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

[Card]: [Accessibility on Cards to navigate using keys(Tab, Arrow) though list of cards in Grid or FlexBox Layout ] #9557

Closed kmanisha29 closed 3 weeks ago

kmanisha29 commented 1 month ago

Describe the bug

My usecase required cutsom component to be used in card in header instead of CardHeader from Ui5. I see that cardHeader is accessible and due to that we are able to navigate through cards if only card Header present. Although If I use custom header in card's header, then cards are not accessible. Buttons like favorite or ellipsis are accessible through tabs but not card even when we have click action associated with it. Am I missing some config to make Card accessible in a list layout. I am using FlexBox and list of Cards. Neither tab nor arrow buttons are usable to navigate with custom header. Can you suggest a way? Should it be provided to Flexbox or Grid Items to navigate through any component clickable.

Isolated Example

https://stackblitz.com/edit/github-savnpj?file=src%2FApp.tsx

Reproduction steps

  1. Given example contains both list with cards. 1st has custom component in header and 2 has CardHeader
  2. List 1 is nit accessible. List 2 is somewhat due to CardHeader
  3. Also, at least header part should still be accessible if we are using header prop from Card component to add header to defined slot to get all its features

  4. ...

Expected Behaviour

We should be able to navigate through cards using just keyboard - Tabs and arrow keys. Via keys we should be able to access or focus on a card and read through it and navigate to next card and also perform action on the card and within it.

Screenshots or Videos

No response

UI5 Web Components for React Version

1.26.0

UI5 Web Components Version

1.23.1

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

SAP Labs

Declaration

MarcusNotheis commented 1 month ago

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

kgogov commented 1 month ago

Hello @kmanisha29,

Thank you for sharing your findings and for providing an excellent code snippet!

From what I understand, the documentation states:

Note: We recommend using ui5-card-header for the header slot to benefit from improved keyboard handling, styling, and accessibility.

I am involving the team responsible for this component to provide better guidance on how to address your situation.

@SAP/ui5-webcomponents-topic-rd, could you please provide your opinion on how to resolve this example?

Regards, Konstantin Gogov UI5 Web Components GitHub Dispatcher

GerganaKremenska commented 3 weeks ago

Hello @kmanisha29,

  1. Am I missing some config to make Card accessible in a list layout.- There is no configuration as @kgogov mentioned

We recommend using ui5-card-header for the header slot to benefit from improved keyboard handling, styling, and accessibility.

If there is a use of a custom header, the responsibility is on the application developer to take care of cards accessibility.

  1. I am using FlexBox and list of Cards. Neither tab nor arrow buttons are usable to navigate with custom header. Can you suggest a way? - On the custom header, tab is not working because there is no tab stop. Tabindex= "0" on part of the header wrapper of ui5-card-header makes the header focusable(accessible), but it is only on part of it because we can not nest intercative elements.(e.g. buttons). This is why the accessiblity of the slot custom header is left to the appplication developr as we can not anticipate the content of the slot.

  2. We should be able to navigate through cards using just keyboard - Tabs and arrow keys. - You can navigate trough cards using "Tab" if ui5-card-header is used, if not the custom header should take care of accessibility. For arrow keys to work the layout control should take care of the navigaton, not the card itself as it does not know in what context it is used.

As this is a consultation i am closing the issue if you have further questions do not hesitate to contact us.

Best Regards, Gergana