Skip to content

[Tree] Incorrect use of aria-checked in Tree Multi Select variants #2599

@DanielleRameau

Description

@DanielleRameau

Provide a general summary of the issue here

In Multi select (https://storybook.sanomalearning.design/?path=/story/navigation-tree--multi-select) and Multi select with Badges (https://storybook.sanomalearning.design/?path=/story/navigation-tree--multi-select-with-badges) variants the built in accessibility checker shows problems with wrongly used aria attributes, namely "aria-checked"; The problem here is, that according to documentation, "aria-checked" is not mentioned as to be used with role="row" (https://w3c.github.io/aria/#aria-checked);

🧑‍💻 We could use tree-item, then aria-checked possible, or remove aria-checked and add aria-multiselectable to the role=treegrid element, and use aria-selected for both single and multi select

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/treegrid_role#single_and_multi-select_treegrids

Another thing is, that in input type="checbox" there is "aria-checked" present, when it is not needed for it, as "input" has built in semantics and doesn't require ARIA (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-checked)

Image

🧑‍💻 Make sure to also check the indeterminate state after the fix has been done

👤 Your name

DR

🧢 Your Product/Team

SLDS

Metadata

Metadata

Assignees

Type

Projects

Status

✈️ Released

Relationships

None yet

Development

No branches or pull requests

Issue actions