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.56k stars 267 forks source link

[Table]: Interactive contents of the table are not announced by screen reader #9984

Open lateefsofi opened 1 month ago

lateefsofi commented 1 month ago

Describe the bug

Interactive contents of the table are not announced by screen reader. When user navigates from one row to another, only header text is announced by not the interactive content

Isolated Example

https://stackblitz.com/edit/github-xfs7ff?file=src%2FToDos.module.css,src%2Fmain.tsx,src%2FToDos.tsx

Reproduction steps

  1. Navigate to https://stackblitz.com/edit/github-xfs7ff?file=src%2FToDos.module.css,src%2Fmain.tsx,src%2FToDos.tsx
  2. Start Voiceover on Mac or Jaws on windows
  3. Navigate through the table and check the announcement

Expected Behaviour

Row content should be announced with the column headers

Screenshots or Videos

No response

UI5 Web Components for React Version

1.29.8

UI5 Web Components Version

1.24.4

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

lateefsofi commented 1 month ago

Looks we have to warp the contents in span tag then only screen will announce it

Lukas742 commented 1 month ago

Hi @lateefsofi

could you please explain why you've reopened the issue, so we can investigate the problem?

lateefsofi commented 1 month ago

@Lukas742 Interactive elements in the cells like Switc and Button in the current example are not announced. User had to press tab key to focus over Switch button then only it will be announced. a11y tester shared the UI5 behaviour example https://ui5.sap.com/#/entity/sap.m.plugins.UploadSetwithTable/sample/sap.m.sample.UploadSetwithTablePlugin.ResponsiveTableSimple, we expect ui5 web-components table to make announcements like this.

Lukas742 commented 1 month ago

@lateefsofi I've tested with VoiceOver and there it seems to announce the interactive content correctly. Please see the attached video and let me know if I've missed something:

https://github.com/user-attachments/assets/70781c2a-376b-475e-9ec0-64a2646e7dd1

lateefsofi commented 1 month ago

@Lukas742 at 0.25 if you see the announcement is only for first column cell but not for other 2 columns(only header is announced)

Lukas742 commented 1 month ago

@lateefsofi thanks for clarifying.

Since the Table and all of its sub components are web components developed by the ui5-webcomponents team, I'm going to forward this issue to their repo.

Hi Colleagues, here you can find the given example, just without React or our wrapper: https://stackblitz.com/edit/github-7aqd1q?file=main.js,index.html

Todor-ads commented 1 month ago

Hello @SAP/ui5-webcomponents-topic-core, could you take a look at this issue? I am able to reproduce the problem in https://stackblitz.com/edit/github-7aqd1q?file=main.js,index.html Regards, Todor