Skip to content

[A11y][SF][Table]: The chevron (>) elements column lack alternate text. #12657

@VidhiNPatel

Description

@VidhiNPatel

Describe the bug

Chevron icons are used visually to indicate that the rows are interactive or actionable. This information should also be conveyed to users of screen readers. The cells in the last column receive focus when navigating with the arrow keys; therefore, they should have appropriate alternative text.
Although the arrow icon SVGs now have aria-label="navigation", the presence of the aria-hidden attribute prevents them from being exposed to assistive technologies. Ensure that the name is exposed properly to screen readers.

Reference: https://ui5.sap.com/#/entity/sap.f.FlexibleColumnLayout/sample/sap.f.sample.FlexibleColumnLayoutWithOneColumnStart

Isolated Example

No response

Reproduction steps

  1. Go to https://ui5.github.io/webcomponents-react/v2/?path=/story/data-display-table--with-row-actions
  2. Ensure that the chevron (>) element aria-label name is exposed properly to screen readers.

Expected Behaviour

Chevron icons are used visually to indicate that the rows are interactive or actionable. This information should also be conveyed to users of screen readers.
Reference: https://ui5.sap.com/#/entity/sap.f.FlexibleColumnLayout/sample/sap.f.sample.FlexibleColumnLayoutWithOneColumnStart

Screenshots or Videos

No response

UI5 Web Components for React Version

2.16

UI5 Web Components Version

1.16

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

  • I’m not disclosing any internal or sensitive information.

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    Status

    To do

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions