[ui5-carousel]: entire container is focusable instead of individual items

[ee92]

Bug Description

The focus outline is shown on the whole carousel container, instead of individual items within in

Affected Component

ui5-carousel

Expected Behaviour

Expected behavior should be the same as SAPUI5 carousel:
https://sapui5.hana.ondemand.com/#/entity/sap.m.Carousel/sample/sap.m.sample.CarouselWithMorePages

Each child of the carousel should be individually focusable and navigable with arrow keys.

Isolated Example

https://sap.github.io/ui5-webcomponents/components/Carousel/#multiple-items-per-page

Steps to Reproduce

1. go to https://sap.github.io/ui5-webcomponents/components/Carousel/#multiple-items-per-page
2. tab to the carousel
3. notice the entire carousel is focused - not just the first item in it

Log Output, Stack Trace or Screenshots

ui5-carousel:

sapui5 carousel:

Priority

None

UI5 Web Components Version

2.12.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

SuccessFactors

Declaration

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

[Valkanister]

Hello @ee92,

The sample that you mention has nothing focusable in its content. If you replace the picture with buttons and inputs, the focus will move to them.

Kind regards, 
Georgi Valkanov
SAP Development Support

[github-actions]

This issue has been closed. To reopen, just leave a comment!

[ee92]

Hi @Valkanister, the inner element focus is not the issue.

The expectation is for the carousel focus to work the same as the SAPUI5 counterpart. Meaning for carousel navigation, each item should be focusable instead of the entire container. Using arrow keys should move the focus and slide the carousel as needed.

The SAPUI5 implementation allows the user to navigate between items by arrow keys, and tab into the content to access inner elements.

The same is not possible with the web component, because if the user tabs into the content, the focus goes to the first element in the first carousel item. In order to reach the content of the second item, they need to tab through the first. This makes it an accessibility issue for users trying to navigate through many items and perform actions on specific ones.

Can you please re-open this issue?

Thanks

[NHristov-sap]

Hello @ui5-webcomponents-topic-rd,

Please take a look on this issue.

Best Regards,
Nikolay Hristov