AnalyticalTable: announce row data on selection via screen reader

[durgaprasad1995]

Bug Description

Accessibility Issue.

When the user selects and deselects the checkbox it should read the row details.

Currently, it's reading only checked and unchecked.

Observed Behavior:

There is no information conveyed to the end user upon selecting or deselecting the rows present within the 'Items(xxxx)' table which is present within the 'Supplier' dialog box.

Expected Behavior:

State of the should be read out to screen reader users.
Providing state of the UI on all user interface components enables compatibility with assistive technology, such as screen readers, screen magnifiers, and speech recognition software, used by people with disabilities.
Here information as 'Checked/selected' should be read out when sub menu items are accessed.

State (expand/collapse) of the UI should be read out to screen reader users.

Affected Component

No response

Expected Behaviour

State of the should be read out to screen reader users.
Providing state of the UI on all user interface components enables compatibility with assistive technology, such as screen readers, screen magnifiers, and speech recognition software, used by people with disabilities.
Here information as 'Checked/selected' should be read out when sub menu items are accessed.

State (expand/collapse) of the UI should be read out to screen reader users.

Isolated Example

No response

Steps to Reproduce

1.Go to analytics table (https://sap.github.io/ui5-webcomponents-react/v2/?path=/story/data-display-analyticaltable--default&args=selectionMode:Multiple) check any row
2.Open Jaws and see whether it is announcing the selected row data or not
3.
...

Log Output, Stack Trace or Screenshots

Priority

Very High

UI5 Web Components Version

1.17.0

Browser

Chrome

Operating System

Windows

Additional Context

No response

Organization

SAP

Declaration

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

[elenastoyanovaa]

Hello,

In order to process the reported issue we need a sample, were we can debug, reproduce and analyse the problem. Without that we would be enable to determine the root cause of the issue.
For accessibility related issue we need some further information, which is described here: https://sap.github.io/ui5-webcomponents/nightly/docs/advanced/accessibility/#testing-accessibility
As I saw that you identify the issue as a Very High Prio it will be important for us to give us information/reference to the suspected violated accessibility requirement (e.g. Web Content Accessibility Guidelines WCAG 2.2, BITV 2.0, EN 301 549) and the accessibility impact.

Kind Regards,
Elena

[durgaprasad1995]

@elenastoyanovaa For this we can use UI 5 Analytics table only example you can play here https://sap.github.io/ui5-webcomponents-react/v2/?path=/story/data-display-analyticaltable--default&args=selectionMode:Multiple
there is no reading on selecting of checkbox, and getting this error "There is no information conveyed to the end user upon selecting or deselecting the rows

[elenastoyanovaa]

Hello @MarcusNotheis @Lukas742 ,

It seems that this table does not use a ui5 web components table. Can you please transfer the issue to your queue?

Kind Regards,
Elena

[Lukas742]

Thanks for reporting! I'll forward this issue to the UI5 Web Components for React repo as the affected component is developed there.

[durgaprasad1995]

Hi @Lukas742 there is no update since 2weeks

[durgaprasad1995]

Hi @Lukas742 i hope you got all the required information kindly let me know if anything

[Lukas742]

Hi @durgaprasad1995

we will investigate this issue in the upcoming week at the latest.

[Lukas742]

Hi @durgaprasad1995

could you please elaborate on what the expected output should be?
Each cell has an aria-selected prop which should announce the selected state of the cell/row. Additionally, we're setting an aria-label explaining how a row can be selected or unselected depending on the state.

As reference you can find an example using a standard HTML grid table, where a basic select functionality is implemented, here: https://stackblitz.com/edit/github-jsdyp7?file=src%2FHTMLGridTable.tsx,src%2FApp.tsx,src%2Findex.css

[elenastoyanovaa]

Hello @Lukas742 ,

Perhaps the reporter should answer this question, or a specification should be checked?

Kind Regards,
Elena

[Lukas742]

@elenastoyanovaa Oops, I didn't mean to tag you. Sorry about that! I've now edited my post.

[durgaprasad1995]

Hi @durgaprasad1995

could you please elaborate on what the expected output should be? Each cell has an aria-selected prop which should announce the selected state of the cell/row. Additionally, we're setting an aria-label explaining how a row can be selected or unselected depending on the state.

As reference you can find an example using a standard HTML grid table, where a basic select functionality is implemented, here: https://stackblitz.com/edit/github-jsdyp7?file=src%2FHTMLGridTable.tsx,src%2FApp.tsx,src%2Findex.css

Hi @Lukas742 It should read out the state and row details. In the given example it's announcing the selected and deselect and which row it is in but not announcing the details it should announce the whole row selected details Ex:- Row 3 Description 3 like this

Even if the selected row is empty also it should announce Selected row is empty

please let me know if anything needed

[durgaprasad1995]

Hi @Lukas742
Adding more information on Expected Behaviour.

Each & every UI element should be read out on accessing with screen reader.

Providing role, state, and value information on all user interface components enables compatibility with assistive technology, such as screen readers, screen magnifiers, and speech recognition software, used by people with disabilities.

[Lukas742]

Hi @durgaprasad1995

I wasn't able to find specifications for this, so for this to be implemented this request would need to go through the Inner Source process and be synchronised with the SAP Central Design team first. Please raise a BLI to the central design team and include the ticket number here for reference.

In the meantime you can also implement this behavior yourself. I've prepared a StackBlitz example showing how row and cell props can be extended and also how you can implement live announcements for screen readers.

https://stackblitz.com/edit/ui5wcr-at-selection-live-announcement?file=src%2FApp.tsx,node_modules%2F%40ui5%2Fwebcomponents-base%2Fdist%2Futil%2FInvisibleMessage.d.ts

[durgaprasad1995]

Hi @Lukas742 Thanks a lot I have tested with the example it's working as expected please find the recordings and screen shot.

please proceed next step. let me know the fixed version

Screen.Recording.2024-09-30.172013.mp4

[Lukas742]

Hi @durgaprasad1995

If you want this behavior to be integrated in the AnalyticalTable, please file the BLI:

I wasn't able to find specifications for this, so for this to be implemented this request would need to go through the Inner Source process and be synchronised with the SAP Central Design team first. Please raise a BLI to the central design team and include the ticket number here for reference.

Otherwise, you can use the provided code example to implement it in your application.

[durgaprasad1995]

Okay can i know the process how to create the BLI

[Lukas742]

@durgaprasad1995 since this is a public repo, please contact me internally so I can forward you the links.

[durgaprasad1995]

@durgaprasad1995 since this is a public repo, please contact me internally so I can forward you the links.

Okay @Lukas742 Thanks will contact

[github-actions]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Inactive issues will be closed after 7 days. Thanks.

[github-actions]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please first check to see if the maintainers have requested additional input and provide it if necessary, or post a detailed description of why this issue is still a problem.