Material-ui: [ListItemText] Shouldn't be a heading by default

[tuukkao]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The element rendered by ListItemText should be a span by default.

Current Behavior

The element rendered by ListItemText is a h3 by default.

Context

Headings are usually used, among other things, forr organizing a page's sections for screen readers and other assistive technologies. Having every list item as a heading might be unnecessary clutter, since not every list item might represent a section on the page. Something like using a span element by default and letting the developer associate a role for the item might be a better idea.

See also:
https://www.w3.org/TR/WCAG20-TECHS/G141.html

Your Environment

| Tech | Version |
|--------------|-------------|
| Material-UI | f64c730a3 |
| React | 16.3.13 |
| browser | Chrome 66 |

[oliviertassinari]

@tuukkao validator.w3 Doesn't raise any issue about it. I guess you are right. h3 is too bold. For reference Bootstrap has an example with a <h5> element. I'm fine with a span by default. Do you want to work on it? :)

[Mortuie]

If there are no takers and @tuukkao doesn't want to do it, would I be able to?

[ninjasun]

How is it going @Mortuie ?

[Mortuie]

@ninjasun I cannot find what is being referenced here: https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ListItemText

I also wasn't aware it was handed to me but happy to look into it more thoroughly. Although it seems ListItemText.js renders a div? Any help would be appreciated.

[oliviertassinari]

I believe the component that is rendering a <h3> element is the following:
https://github.com/mui-org/material-ui/blob/04fae47c2a876f38aacfae866d220ddcbb7358ef/packages/material-ui/src/ListItemText/ListItemText.js#L53-L56
https://github.com/mui-org/material-ui/blob/04fae47c2a876f38aacfae866d220ddcbb7358ef/packages/material-ui/src/Typography/Typography.js#L171
The fix is about doing something like:

 <Typography 
   variant="subheading" 
   className={classNames(classes.primary, { [classes.textDense]: dense })} 
+  component="span"
 > 

[Mortuie]

I see I'll have a go at that later on!

[adeelibr]

If no one is working on this, can I?

[Mortuie]

@adeelibr Feel free I have a bit too much going on currently :(

[tuukkao]

validator.w3 Doesn't raise any issue about it.

This isn't really a violation of any specification. It's just something unexpected and which doesn't really need to be the default.

[adeelibr]

understood.

[adeelibr]

Hi I have made the changes now you can provide it a type like this

<ListItemText primary="Some list item text here" headingType="span" />

Also you can provide it any type of component e.g, h1, h2, p etc using the headingType prop

If you do not provide this headingType prop the default component it will render the list item is going to be in h3 type.

Can you kindly have a look at this PR https://github.com/mui-org/material-ui/pull/11544 Thank you.