search

nl-design-system / backlog

Central product backlog of the NL Design System.
European Union Public License 1.2
7 stars 1 forks source link

Separator #119

Open Robbert opened 3 years ago

Robbert commented 3 years ago

Naam

Separator

Link naar GitHub Discussion

The horizontal rule separator element <hr> should be available in Storybook and in Figma, and should be styleable in CSS.

<hr> / .nl-separator

Also known as: Divider.

bddjong commented 3 years ago

@Robbert After some searching around, the The Hague team would suggest this component is named divider instead of separator. It seems to be the more commonly used name. Even a quick google towards separator component gives divider results. Material Design, Spectrum, Ant Design are all popular design systems and all use divider instead of separator.

Robbert commented 3 years ago

@bddjong Good points, go for it! 👍

I even notice now that my go-to resource, the WAI-ARIA specification, mentions "divider" in addition to "separator":

Separator: A divider that separates and distinguishes sections of content or groups of menuitems.

Source: separator role

I feel that "divider" is frequently used for a presentational component, whereas separator is used for a semantic component. Frequently I see that "divider" is used for a visual line between items that are actually just a group, such as between list items. I think those should be two separate components, and I am not yet sure the visual divider should be part of NL Design System, since it could be implemented as a border on a list item component (for example). The most important thing for accessibility is that role="separator" is not unintentionally applied to those situations where only a visual divider is desired, it would be very inconvenient for screen reader users to have a separator announced after every list item.

I'm hoping to gather even more perspectives on this so we can align when we eventually decide to add this component to @nl-design-system-unstable.