search

ithaka / pharos

JSTOR's design system
https://pharos.jstor.org
MIT License
117 stars 15 forks source link

Storybook/Site: Implicit list of links #510

Open sirrah-tam opened 1 year ago

sirrah-tam commented 1 year ago

The problem The top level of the Sidenav component contains a set of visually grouped links that are not marked up as part of a list. Screen reader users will perceive the navigation region and then each individual link without giving context to how they are each associated.

Screen Shot 2023-04-07 at 10 53 40 AM|450 Screen Shot 2023-04-07 at 10 55 56 AM|450

The solution Developers can add <ul> and <li> elements appropriately to give semantic structure to the top level of navigation.

Additional information The menu items that are part of the collapsible sections do utilize this explicit list structure, the same practice should be used for all sets of grouped links.

daneah commented 1 year ago

We should fix the examples we have both on the Pharos site itself as well as in the story for this component, but the choice of the content is ultimately up to the consumer, so teams will also need to fix this themselves.