You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I confirm that I have checked if the bug already has been 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
@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.
EldRoos
changed the title
Grouped list and listitems
List: Grouped list and list items
Mar 17, 2024
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)
The text was updated successfully, but these errors were encountered: