[Typography] Add inherit and screen reader only

[oliviertassinari]

• variant="srOnly" use case:

import Icon from '@material-ui/core/Icon';
import Typography from '@material-ui/core/Typography';

// ...

<Icon>add_circle</Icon>
<Typography variant="srOnly">Create a user</Typography>

• variant="inherit" use case:

            <MenuItem>
              <Typography variant="inherit" noWrap>
                Label
              </Typography>
            </MenuItem>

[mbrookes]

<Icon aria-label="Create a user">add_circle</Icon>?

[oliviertassinari]

@mbrookes I haven't tried with a screen reader, it might not work. I can only find reference to stuff like http://web-accessibility.carnegiemuseums.org/code/svg/.

[mbrookes]

I should have checked the literature rather than just assuming, however:

"SVG user agents MUST provide an accessible object in the accessibility tree for rendered SVG elements that meet any of the following criteria [...]:

• It has at least one direct child ‘title’ element or ‘desc' element that is not empty after trimming whitespace. User agents MAY include elements with these child elements without checking for valid text content.
• It has a non-empty (after trimming whitespace) ‘aria-label’ attribute or ‘aria-roledescription’ attribute.
  [...]

https://www.w3.org/TR/svg-aam-1.0/#include_elements

(which doesn't mean srOnly isn't potentially useful elsewhere)

[oliviertassinari]

It's for Font icons right, not SVG?

---

What do you prefer between srOnly and screenReaderOnly?

[mbrookes]

🤦‍♂️
In that case, no, aria-label won't work as we apply aria-hidden to the icon span. However wouldn't you be using an IconButton in this case?

screenReaderOnly while more verbose is much clearer as to what it does.

[nathanmarks]

Typo in vertical

[nathanmarks]

"Only accessible to screen readers" would be better

fixed

[oliviertassinari]

screenReaderOnly while more verbose is much clearer as to what it does.

I agree, however. The CSS API can help with the purpose of this class name. Bootstrap & Font Awesome are using the .sr-only wording. It's something people are already used to 🤔.