SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
442 stars 99 forks source link

AnalyticalTable: Multiple a11y issues with the row expansion button in analytical tree table #6516

Open fushizen opened 2 weeks ago

fushizen commented 2 weeks ago

Describe the bug

Using axe devtools (a plugin used by the internal A11y team to check for issues) In the analytical tree table, the indicator to expand the tree table row has 2 critical a11y issues:

  1. On expanding the row, there is the issue ARIA attribute is not allowed: aria-expanded="true"

image

  1. The row expansion button has the issue Ensure buttons have discernible text

image

Isolated Example

https://sap.github.io/ui5-webcomponents-react/v1/?path=/story/data-display-analyticaltable--tree-table

Reproduction steps

  1. Go to the storybook for analytical table - tree table
  2. Open axe devtools in dev console
  3. Described issues are present

Expected Behaviour

Component to not have a11y issues detectable by the tool

Screenshots or Videos

image

image

UI5 Web Components for React Version

1.24.x

UI5 Web Components Version

1.24.x

Browser

Edge

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

SAP

Declaration

Lukas742 commented 3 days ago

Hi @fushizen

On expanding the row, there is the issue ARIA attribute is not allowed: aria-expanded="true"

This attribute is redundant, but since the button (inside the span) isn't focusable via keyboard navigation, it shouldn't affect users. Nonetheless, we'll remove it.

The row expansion button has the issue Ensure buttons have discernible text

The surrounding span has an aria-label that describes the interaction. Additionally, as the button isn't focusable via keyboard navigation, there shouldn't be an issue for users.


In general, please try to follow the Testing Accessibility guidelines and ensure that there's an actual accessibility concern present.