Skip to content

brnAccordionTrigger adds incorrect ARIA attributes (role="heading" and aria-level="3") causing accessibility violations #792

@OmerGronich

Description

@OmerGronich

Please provide the environment you discovered this bug in.

Docs:

https://spartan.ng/components/accordion

Which area/package is the issue in?

accordion

Description

The brnAccordionTrigger directive currently adds the following static attributes to its host element:

host: {
  role: 'heading',
  'aria-level': '3',
}

This is problematic for two reasons:

  1. Incorrect semantics: The trigger element is usually a button or a clickable element that toggles visibility of the panel, not a heading. Setting role="heading" on a button breaks expected semantics and assistive technology behavior.

  2. Invalid hierarchy: Applying aria-level="3" assumes a heading structure that may not exist. This can confuse screen readers and violate heading level hierarchy rules (e.g. skipping levels).

Suggested fix:

Remove the static role and aria-level from the brnAccordionTrigger host binding:

host: {
  '[attr.data-state]': 'state()',
  '[attr.aria-expanded]': 'state() === "open"',
  '[attr.aria-controls]': 'ariaControls',
  '[id]': 'id',
  // REMOVE:
  // role: 'heading',
  // 'aria-level': '3',
}

Please provide the exception or error you saw


Other information

No response

I would be willing to submit a PR to fix this issue

  • Yes
  • No

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions