search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.5k stars 260 forks source link

[a11y][Tree] - Accessible name and role for Expand/Collapse button is missing for each list item #8061

Closed yoganjan closed 8 months ago

yoganjan commented 8 months ago

Bug Description

For the Expand/Collapse icon for each list item in the Tree component accessible name is missing. Voice Over is just announcing as "Expand Image" . It should have a proper Accessible name

Affected Component

Tree

Expected Behaviour

On click of the expand and collapase icon , it should announce a proper accessible name such as "List Item Expand More" or similar related to it .

Isolated Example

No response

Steps to Reproduce

  1. Open https://sap.github.io/ui5-webcomponents-react/?path=/docs/data-display-tree--docs
  2. Open Windows narrator
  3. Click on expand or collapse icon for each item
  4. Observe that the accessible name announced by narrator is not proper. ...

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

1.20.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

petyabegovska commented 8 months ago

Hi @SAP/ui5-webcomponents-topic-p,

Can you check on a Windows machine with the Narrator screen reader?

Best regards, Petya

kgogov commented 8 months ago

Hello @SAP/ui5-webcomponents-topic-p,

I went through the example thoroughly and tested the accessibility announcements with JAWS 2024. From what I observed, JAWS did not pronounce the accessible name of the expand/collapse node strangely. However, it would still be beneficial to get an opinion from an accessibility expert on whether improvements are needed. Please refer to the attached video below for more details.

Best, Konstantin

https://github.com/SAP/ui5-webcomponents/assets/68374332/783df78c-6c32-4469-82ab-6d6613b52b0a

yanaminkova commented 8 months ago

Hello @yoganjan ,

Thanks for your ticket!

The accessible name of the ui5-tree-item is supposed to be announced only on focus. When you expand/collapse the item with the arrows, only the state of the item is supposed to be announced ("open" / "closed").

As you can see in the video, attached by @kgogov, the control works as expected.

Kind Regards, Yana