Tabs: Tabs are not operable by keyboard

[marcoscv-work]

We cannot move along tabs by keyboard using tab or arrows.

https://clayui.com/docs/components/tabs.html#content

Why do we need this functionality?
WCAG 2.1 - Operable: 2.1 Keyboard Accessible

We should be able to get all tabs by keyboard, there are different ways to get it, most popular is the combination of tab and arrow keys, examples:

• https://getbootstrap.com/docs/5.2/components/navs-tabs/#javascript-behavior
• https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual (manual activation)
• https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-automatic (automatic activation)

If possible, a API property to select if the activation is automatic or manual would be awesome, if not, manual activation is a more common case for liferay

[matuzalemsteles]

Hey @marcoscv-work I ended up changing it these days but I still haven't put the navigation by arrow, I think the navigation here between the tabs should only be via the arrow keys and not using tab, do you think we should do that yet? I didn't find anything in the documentation about this, the tab behavior looks like it is, move to the active tab and the next element to the active tabpanel.

About tab activation, it makes sense to have an API to configure this and we can add a recommendation of when to use this, apparently the good thing about manual activation is only when the panel is loaded on demand.

[marcoscv-work]

Hello @matuzalemsteles thanks for responding so quickly
I think using arrows would be perfect, in that case and with correct aria labeling we wouldn't need tab key

[matuzalemsteles]

Just noting a few things here, in order to be able to change the active state of the tab when navigating through the tabs, we will need to restructure the component to control the active state, today the implementation of tabs who controls the active state is the developer when will implement.

To make this more OOTB, I'm going to add the RFC 0002 Controlled and uncontrolled components pattern to control the asset state so we can change the asset state and have visibility into it. Other things that would also be useful like automatically adding aria-controls and creating the id of the tabs to associate the tab and the panel automatically without being manual, I will leave to work on that in another issue that is related to the Collection pattern #5032 which will allow us to have more OOTB functionality like this.

[marcoscv-work]

Thanks @matuzalemsteles !! it's great! it looks awesome!

Just a warning, it's possible people who working on BofA accessibility bugs contact us related with tabs, there are some issues related: https://issues.liferay.com/browse/LPS-165822

[matuzalemsteles]

No problem, despite making some changes we still have compatibility with the previous version the navigation with the automatic activation that has to follow the pattern but the manual activation works OOTB, but then the automatic navigation should work OOTB without needing to be controlled.

[marcoscv-work]

No problem, despite making some changes we still have compatibility with the previous version the navigation with the automatic activation that has to follow the pattern but the manual activation works OOTB, but then the automatic navigation should work OOTB without needing to be controlled.

That's perfect, automatic activation is something we will use in a close future but the manual one is the standard for portal so perfect!, thanks @matuzalemsteles

[github-actions]

This issue has been merged and will be released in DXP at https://issues.liferay.com/browse/LPS-165856