AnalyticalCard: Accesibility properties not available hence not focusable by Tab key

[Arora05]

Describe the bug The Analytical Card UI component is not reachable by the Keyboard Tab key specifically it is only going to header, not the complete card. There are no accessibility options available for analytical card UI.

UI Link https://sap.github.io/ui5-webcomponents-react/?path=/docs/data-display-analyticalcard--default-story

To Reproduce Steps to reproduce the behavior:

Go to UI Link Use the Tab key from the keyboard to focus on the Analytical Card UI. Expected behavior Analytical card UI must be reachable by Tab key from the keyboard and must have accessibility properties to read out child elements

UI5 Web Components for React Information @ui5/webcomponents version: 1.6.0 @ui5/webcomponents-react version:0.27.5 Operating System: Windows 11 Browser: Chrome

[Lukas742]

Hi @Arora05

the card header is read as whole, so all information which are contained inside the header is read out by screen readers on focus. As the header accepts all HTML attributes (as mentioned in our documentation) you can add every aria attribute you like, but since this could overwrite internally set attributes like aria-labelledby, it is not recommended.

The content is the responsibility of the app developer (you), so if you want it to be focusable and accessible, you have to make sure that it is.

E.g.: https://codesandbox.io/s/funny-galileo-yh4hyx?file=/src/App.js

[Arora05]

Hello @Lukas742, Just to add, is it possible to add a click on Enter or SpaceBar be added to it as well for better accessibility to click on the Analytical card header?

Thanks, Kshitiz

[Lukas742]

Hi @Arora05

you can add every event and attribute which is supported on native div elements (e.g. onKeyDown) to the AnalyticalCardHeader.

[github-actions[bot]]

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[bot]]

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 open a new ticket and mention this old one.