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] - Tree with Multselect mode - Accessible name checkboxes is not getting announced with screen reader #8063

Closed yoganjan closed 8 months ago

yoganjan commented 8 months ago

Bug Description

The Tree with multiselect mode , when selecting the checkbox ,its not announcing the accessible name for the checkbox . It only announces checked or unchecked.

Affected Component

Tree

Expected Behaviour

When the user checks or unchecks the checkbox , the screen reader should announce the accessible name for that check box .

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 application
  3. Select Multi select Mode for the tree component
  4. Check the check box associated for each list
  5. Observe that the accessible name is not announced by the screen reader for the checkbox ...

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

1.20.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

kgogov commented 8 months ago

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

I thoroughly examined the example and tested the accessibility announcements using JAWS 2024. My observations indicate that JAWS didn't pronounce the accessible name of the ui5-checkbox inside tree nodes, which are part of the implementation inside the ListItem.

Additionally, I noticed that initially, it accurately announces the tree as being in multi-selection mode by stating: "Contains Multi-Selectable Items". This is why I'm not entirely convinced that there is an actual issue. It requires further clarifications from an accessibility expert.

Another aspect worth considering is the double announcement of the word "Selected" by the screen reader when a checkbox is checked/unchecked.

Please, refer to the video I've attached below for more information.

Best, Konstantin

https://github.com/SAP/ui5-webcomponents/assets/68374332/3314a427-df1f-49b1-8fab-33195276dced

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 select/deselect the checkbox of an item, only the state of the item is supposed to be announced ("Selected" / "Not Selected").

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

As for the double announcement of the "Selected" state - already there is open issue about this behaviour - #6878.

Kind Regards, Yana