ContentSwitcher selection with arrow keys

[ContentSwitcher selection with arrow keys]: ContentSwitcher works as expected when clicking the buttons - the index of the button selected (the desired button) is passed to the onChange event. When tabbing to the ContentSwitcher and using the left/right arrow keys to navigate it does not work as expected - the index of the current button (not the desired button) is passed to the onChange event (along with the key property i.e. key: “ArrowLeft”).

Environment

Operating system MacOS

Browser Chrome, FireFox

Automated testing tool and ruleset

Assistive technology used to verify

Detailed description

What version of the Carbon Design System are you using? 10

What did you expect to happen? When using the left/right arrow keys to navigate a ContentSwitcher I expected the correct button to be selected with focus on the desired button.

What happened instead? For example: I tabbed to the first ContentSwitcher item and pressed the right arrow key. The index passed to the onChange event was the index of the currently selected button so the content did not change as the button to the right was not selected. However, focus still moved to that button. The issue is the same when using the left arrow key. Every subsequent arrow press means focus is on the wrong button and does not align with the content displayed.

What WCAG 2.1 checkpoint does the issue violate?

Steps to reproduce the issue

1. Tab to ContentSwitcher
2. Press either the left or right arrow key

Additional information

This is what’s captured in the onChange function (see _ref) when clicking on the desired button (Sample Code button)

This is what’s captured in the onChange function (see _ref) when trying to move off the Sample Code button to another on it’s left. (pressing the left arrow key on that button)

I would expect the last scenario to say index: 0

Related issue: https://github.ibm.com/mhub/qp-planning/issues/5510

[matthew-chirgwin]

Hi @emyarod - I asked @Zoe-Gathercole1 to raise this issue given an a11y pass of the product we work on where we found this.

In an ideal world, the on click and on key press interaction would call our onChange with the same result content (ie I click on index 0, I am given 0, user presses arrow key left from index 1, the callback says index is 0 as a result etc). Honestly, if the ContentSwitcher worked like the Tab/Tabs (where we can nest our content in the child, and let the Tab/Tabs deal with which is selected) that would make our lives alot easier!

As is, we as a consumer of the ContentSwitcher need to know some of the internals of how it works to know how to respond (ie if ArrowLeft, -1 from index etc). If this were to change, we would break though. Would be interested to know what you would reccomend we do for now.

[joshblack]

Closed by: https://github.com/carbon-design-system/carbon/pull/6257