search

seb-oss / green

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

Accordion: Accessibility, content treated as header #1763

Closed jeslag closed 2 weeks ago

jeslag commented 2 weeks ago

Bug already reported?

For which framework/library you are reporting the bug

Angular

Component name

accordion

Description

Screen reader interprets content inside ngg-accordion-list-item as headings.

Steps To Reproduce

  1. Use angular
  2. Create ngg-accordion with ngg-accordion-list-item containing any content
  3. Use screen reader and focus on accordion content
  4. Screen reader will read: "Content" + "heading level X"

Current Behaviour

Screen reader treats content inside ngg-accordion-list-item as headings. If an ngg-accordion-list-item contains a div with the text "Example text", then a screen reader will read "Example text heading level X".

Expected Behaviour

I have limited experience with accessibility but perhaps the content should not be treated as headings? Not sure exactly how this should work.