digdir / designsystemet

Designsystemet
https://designsystemet.no
MIT License
85 stars 38 forks source link

Document correct aria usage and examples for our badge component #2749

Open Febakke opened 3 weeks ago

Febakke commented 3 weeks ago

Often when using badges you are giving visual cues that something has happened. There is a new message or an update to an element in the user interface. How should screen readers handle this? We need to document some cases in our storybook.

Suggestion @eirikbacker

  • Should have role="img" and make aria-label prop required, and print content as ::before { content: attr(aria-label) } instead of using children

relevant links

W3 pattern