VerticalBar: The use of keyboard is not standard / perceptible

[marcoscv-work]

Using keyboard is not standard / perceptible

Accessibility improvement: fix proposed in order to use VerticalBar in DXP.

Context:

This VerticalBar component: Visually “Icons > Panels” are just vertical tabs so the behaviour should be like tabs.

¿How are tabs defined in Clay? As a role=“tablist”:
https://clayui.com/docs/components/tabs.html

In aria is pretty similar behaviour:
https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-automatic.html#tablist-1

and the last example of panels use, google (gmail for example right panels):
Following these examples is easy to define the pattern based on clay/aria with some improvements based on google (they invested on accessibility a lot).

So, the detailed description:

1º We get to the tabs focusing the active tab, if there are not an active tab we go directly to the first item (the rest of them have tabindex=“-1”).
2º If we are in the button-tabs component we can use arrow up/down to move between button-tabs
3º If we are over a button-tab and we press enter/space we show that panel and move the focus to the first focusable item or making a general focus on the panel/sidebar
4º If we get to the componen by focus and we have a panel active we will focus to the button first and next item will be the sidebar/panel
5º We use correct markup and labelling:
https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html#rps_label
6º If we are in the button-tabs component and press tab-key we will go to next element (the sidebar if it is expanded/opened)

[matuzalemsteles]

cc @drakonux @emiliano-cicero

[marcoscv-work]

They already know them. @drakonux @emiliano-cicero please confirm.

Pattern already applied to DXP successfully:
liferay-echo/liferay-portal#10169

[matuzalemsteles]

Great, just so that these things are also documented for the future in case someone says something...

[marcoscv-work]

We are beginning to have a great debt, thanks @matuzalemsteles !

[marcoscv-work]

Sorry, I'm late with this, It should include aria-orientation="vertical" since tabs are horizontal by default:

[drakonux]

Hey, sorry for the delay. The behavior that we defined some time ago is the following:

• Tab key, the focus moves to the next focusable component.
• Shift + Tab. the focus moves to the previous focusable component.
• ↓ or ↑, the focus moves to the next/previous tab item in a wrap from last to first and vice versa.

Correct me if I'm wrong @marcoscv-work , but it's what you demand now.

[matuzalemsteles]

Thanks @marcoscv-work and @drakonux for the details!

[marcoscv-work]

@drakonux I think the definition is perfect, a perfect match with what accessibility needs.

@matuzalemsteles thanks!

[github-actions]

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