[terra-date-time-picker] AM/PM button is inaccessible

[scottwilmarth]

Bug Report

Description

Terra Date and Time Picker AM/PM buttons are not accessible:

1. Each button is understood by the screen reader as a toggle button instead of as a set of radio button options. -- A toggle button implies I can change from one setting to another using the single component, but the user must tab to the next toggle button to activate it.
2. The screen reader instructions to activate the control do not work as expected.
3. The sighted user would expect to use the arrow keys to navigate to the correct button using the arrow keys. A non-sighted user would rely on hearing what type of control they are on and the instructions provided via a screen reader to understand how to use it.

Example from Terra Doc Site: https://engineering.cerner.com/terra-ui/components/cerner-terra-framework-docs/date-time-picker/date-time-picker

Steps to Reproduce

1. Put your mouse away and only use only your keyboard.
2. Turn on your screen reader.
3. Tab to the AM button. The user expects to navigate to the selected item in the button group, not necessarily the first item.
4. The screen reader user hears "Toggle button" and expects to use the single control to make the selection, but this is not a true toggle button. It should be understood as a radio button group and act accordingly.
5. The instructions read by the screen reader do not make the selection as anticipated for a non-sighted user.
6. Use left/right arrow keys to navigate the AM/PM button options. Since it is a group of related items, the sighted user expects to navigate via arrow keys. Arrow keys don't work. The user must use the TAB key to go forward and backward which is not expected. 11.

Additional Context / Screenshots

Expected Behavior

The buttons should be programmatically understood as radio buttons and users able to navigate using left/right or up/down arrow keys. Navigating the options should make the selection. All the programmatic context and expected behaviors will come from a standard radio button group.

Possible Solution

Change the two toggle buttons to a radio button group and style as segmented buttons.

Environment

• Component Name and Version: current version
• Browser Name and Version: any browser
• Node/npm Version: [e.g. Node 8/npm 5]
• Webpack Version:
• Operating System and version (desktop or mobile):

@ Mentions

Elliott and I discussed this briefly. Please ping me for more info. Sorry for the pooer issue writing skills. :)

[chrismichalewicz]

UXPLATFORM-6641 was logged to track this internally

[stale[bot]]

This issue has been automatically marked as inactive because it has not had recent activity. It will be closed in seven days if no further activity occurs. Thank you for your contributions.