enabled arrow navigation with Tabbable #33293
Conversation
|
Pull request demo site: URL |
packages/charts/chart-web-components/src/horizontal-bar-chart/horizontal-bar-chart.template.ts
Show resolved
Hide resolved
packages/charts/chart-web-components/src/horizontal-bar-chart/horizontal-bar-chart.ts
Show resolved
Hide resolved
packages/charts/chart-web-components/src/horizontal-bar-chart/horizontal-bar-chart.ts
Outdated
Show resolved
Hide resolved
| requestAnimationFrame(() => { | ||
| const legendContainer = this.shadowRoot?.getElementById('legend-div') as HTMLElement; | ||
| if (legendContainer) { | ||
| const legendButtons = tabbable.tabbable(legendContainer); |
There was a problem hiding this comment.
do we really need tabbable for this? we already know which elements are focusable and we can select them easily.
you can refer to the implementations of the MenuList, RadioGroup, and Tablist web components to see how they handle this.
There was a problem hiding this comment.
yes, can select those elements directly also. That what is the functionality of Tabbale. It only helps in identifying the focusable elements.
| const tabbableElements = tabbable.tabbable(rootDiv); | ||
| let currentIndex = 0; | ||
|
|
||
| rootDiv.addEventListener('keydown', (event: KeyboardEvent) => { |
There was a problem hiding this comment.
does pressing tab key still move focus to the next bar segment or does it move to elements in the next focusable group?
There was a problem hiding this comment.
It still moves to the next bar segment. Moving to the next bar is the functionality of Groupper which needs to be implemented separately like Arrow navigation.
Previous Behavior
Bars and legends were not navigable with the help of arrow keys.
New Behavior
Bars and legends are now navigable with the help of arrow keys using Tabbable.
Related Issue(s)