[a11y] Add first class support for REM

[alansouzati]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

As of today MUI does a terrific job with Accessibility, including default REM support for Typography.

This feature request intends to raise the issue with limiting REM support to just Typography and Iconography.

For example, using default MUI I go to my browser settings and I change the font size to "Very Large" in Chrome and here is how the Stepper component looks like:

Notice that just changing the font size in the Browser makes MUI change the font size of the stepper text and now things are not centered

Examples 🌈

Button

Here is what I've done to change the button defaults to use rems

https://codesandbox.io/s/mui-rem-overrides-0cntz9

Stepper

This one seems more complicated to fix given that the centering of the SVG text is done in Javascript I believe

https://codesandbox.io/s/mui-rem-overrides-stepper-bl1f0s?file=/index.js

Motivation 🔦

I intend to use MUI out of the box and have REM support across the board where changing the Browser font size will not result in default MUI components looking weird and not aligned well

[alansouzati]

For the Stepper I think this fixes the issue:

#32706

But, the feature request here is more on a higher level to make it consistent REM usage throughout MUI

[oliviertassinari]

https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/ looks about right when it comes to choosing between rem and px.

[alansouzati]

Oh yeah. I just finished reading this (thanks for sharing by the way)!

I agree with everything this article has shared, especially the part about using your intuition.

An example here is LinkedIn at 200% zoom:

Pretty slick.

Now check out the same app increasing the browser font size to "very large":

Things are not looking as good. They are limiting REM support to Typography. So things are getting cropped and content is overlapping (look at the LinkedIn app bar).

This is where I see an "Accessibility" issue given that this is harder to read and use.

When trying to decide to use Pixel or REM, it is also important to test things out in the real world and see what it feels right.

When it comes to Material UI, I think there are things to be improved in this area (I'm down to help send PRs to fix them up). I wanted to sense how open the maintainers are to exploring changing things in that space.