search

seb-oss / green

Green is an open-source design system built by SEB.
https://storybook.seb.io/
Apache License 2.0
39 stars 57 forks source link

List: Grouped list and list items #1237

Open toplizard opened 9 months ago

toplizard commented 9 months ago

Bug already reported?

For which framework/library you are reporting the bug

extract

Component name

gds-grouped-list

Description

The component is in fact more like a tabel component. You can see this especially when the listitems have groups, like "key" and "value". And if this component was in fact a list item, it is best practice to use the actual html elements ul,ol,dl

Steps To Reproduce

https://sebgroup.github.io/green/latest/core/?path=/docs/components-grouped-list--page

Current Behaviour

role=list

Expected Behaviour

ul, ol, dl elements (li for list-item)

splashdust commented 9 months ago

@toplizard The main rationale for using custom elements instead of plain ul and li is style encapsulation. It's common for apps to have general styles defined for these elements, and so rather than having to provide exhaustive resets, we decided to go with custom elements even for a simple component like this. It also means we can leverage the element scoping feature we have in place for Green Core, which further limits the risk of conflicts between different MFEs and shells.

Using custom elements also leaves the door open for future features that could be harder to achieve with plain ul/li.

As for the role semantics, another option would have been to simply wrap the internal slots in ul/li. But that would mean unnecessary nesting in my opinion, and semantically it would be equivalent either way. I also tested this in several screen reader / browser combinations and could not notice a difference in interpretation.

When it comes to "table-like" lists, I agree. These does look more like table components, and I think we need to clarify our examples and provide guidance for when to use the list component versus tables.

The gds-grouped-list component is intended to be used as a list, and as such it is also perfectly valid to have flow content children under the list items. The decision of whether to use table or list semantics will depend on the type of content to be displayed.

I'll also add here that regular ul/li lists (as bullet lists) are still supported through CSS from Chlorophyll, and we have also discussed adding a general prose / rich-text component to Green Core, for when you need to display generic markup from a CMS, and similar scenarios.

TLDR; It's by design, we need it for style encapsulation, but docs and examples could be improved.