[Lists] Change List and ListItem to use ul and li

[bweggersen]

We are looking through the semantics of our website, which uses Material-UI, and we discovered that list items in Material UI doesn't use <ul> and <li> (ie https://github.com/callemall/material-ui/blob/master/src/lists/list-item.jsx#L298). Does anybody know why this is?

[hai-cea]

@bweggersen That's a good question :)

We should probably change it to use ul and li.

[cgestes]

+1 let's keep the semantic of webpages structure correct.

[shaurya947]

@bweggersen @cgestes are either of you interested in taking this up in a PR?

[alitaheri]

@oliviertassinari @newoga @mbrookes Let's discuss this too. I think using ul and li might limit what we can do and hurt composibility, I'm not sure. what do you guys think?

[newoga]

@alitaheri I think this PR is suggesting to change the underlying DOM node to render ul and li instead of div. I don't know how this would hurt composability and I think is more semantic so I'm okay with this change. Anything I'm missing?

[alitaheri]

well my only concern is that, ul can only contain li. if that doesn't limit us, then I'm ok with this too.

[newoga]

Yeah that's fair. I think we'd just have to implement it in a way where ListItems and custom composed components are just wrapped in an <li> that don't have any styling. I suppose the only caveat is that browsers more often then not have predefined styling for those tags that we may have to reset to avoid weird rendering issues. But I think it's still worth looking at.

I think more semantic tags definitely help in terms of finding stuff in the DOM, especially with the inline style approach.

[alitaheri]

Yeah, keeping the semantic is very good. but limiting somehow. We'll have to investigate this before trying to implement it.

[omarreiss]

I just wanted to add that semantic HTML is also very important for accessibility. Not having this for example makes things less accessible for people using screen readers. cc: @afercia

[mbrookes]

@nathanmarks I see next is still using div by default. Is using ul / li a possibility, or should I mark as wontfix?

[akshaynaik404]

Is someone already working on this? If not, How should I go about solving it?

[mbrookes]

@akshaynaik404 No-one is working on this. If you wanted to help, the contributing guide has some pointers on how to get started.

[pssuralkar]

HI,
I am trying to warp with div but getting error "Warning: Unknown prop nestedLevel on

tag. Remove this prop from the element." so could you please help me how to resolve this issue or is there any alternative solution to fix this issue. Thanks in Advance.

[pssuralkar]

I am trying to warp "ListItem " with div

[akshaynaik404]

@oliviertassinari will be in a better position to answer your query. It would also be helpful if you shared a code snippet along as well.

[mbrookes]

@pssuralkar @akshaynaik404, best to use github issues for... issues. Please keep deployment questions on gitter or SO.

In general when wrapping a component, the wrapper needs to pass through to the child component any props that the parent component expects the child to support.

[pssuralkar]

@akshaynaik404 - Below is the code. I want to wrapped list item in div for some CSS styling.

 <div className={"verticalLine"}>
                <ListItem
                  key={1}
                  className={this.props.route.route == "/" ? "active" : "null"}
                  primaryText={"List Item"}
                  secondaryText={<span className={"horizontalLine"}>{}</span>}
                  leftIcon={<img src="icon.svg"/>}
                  primaryTogglesNestedList={true}
                  initiallyOpen={true}
                />
</div>