A11y keyboard focus control in the Radio Button Component

[DaveBest99]

Bug, feature request, or proposal:

Bug:
The Tab key and Shift+Tab key should move focus to and and away from the Radio button component, and the UP/Down arrow keys should rotate focus between each Radio button in the group. The Tab key moves focus through all Radio buttons when none are selected, and only on the selected Radio button when one is checked. Arrow keys do not keep the user focus within the Radio button group, and the text label are not associated with the button element.

What is the expected behavior?

Expected behaviour of arrow keys within a Radio button group is to rotate between the buttons and not freely move through the page.

What is the current behavior?

Currently Tab and Arrow keys do not perform as expected.

What are the steps to reproduce?

See below.

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

What is the use-case or motivation for changing an existing behavior?

To implement WCAG standards.

Which versions of Angular, Material, OS, browsers are affected?

Using JAWS17 screen reader with browsers Firefox, Chrome, and IE11.

Is there anything else we should know?

The screen reader user experience is as follows.

Using Firefox:

1. Press Tab key to the Radio button component.
   JAWS says "Winter radio button not checked 1 of 4", and the braille display shows "< > Winter rbtn 1 of 4".
   Note, the Down arrow key moves freely through all the Radio buttons and the user can press Spacebar to check a specific Radio button. The Up and Down arrow keys should rotate between the Radio buttons within the group and not freely move up/down the page.

2. Press Tab key again.
   JAWS says "Spring radio button not checked 2 of 4", and the braille display shows "< > Spring rbtn 2 of 4".
   Note, this is not the expected behaviour for the Tab key. Tab and Shift+Tab should move the focus to the next or previous page element outside of the Radio button group.

3. Press Tab key again.
   JAWS says "Summer radio button not checked 3 of 4", and the braille display shows "< > Summer rbtn 3 of 4".
   Note, this is not the expected behaviour for the Tab key. Tab and Shift+Tab should move the focus to the next or previous page element outside of the Radio button group.

4. Press Tab key again.
   JAWS says "Autumn radio button not checked 4 of 4", and the braille display shows "< > Autumn rbtn 4 of 4".
   Note, this is not the expected behaviour for the Tab key. Tab and Shift+Tab should move the focus to the next or previous page element outside of the Radio button group.

5. Press Tab key again.
   The screen reader focus skips over the text field "Your favorite season is: ", but when using the arrow keys the user will find this text field. This text field never gets focus and never automatically announced by the screen reader.

6. Press Spacebar on any one of the Radio button.
   Only the selected Radio button is now in the focus order. Using Tab and Shift+Tab will skip over all other Radio buttons, which is expected but the arrow keys do not restrict the user focus to only the Radio buttons in the group.

7. Press Spacebar on the "Summer" Radio button.
   JAWS says "Summer radio button not checked 3 of 4".
   The user must move focus away, Tab or Arrow key, and then back again to get the proper Checked message. Also, the resulting text "Your favorite season is: Summer" is never announced by JAWS. This text field could use an aria-alert.

Using Internet Explorer 11 and Google Chrome:

1. Press Tab key to move the focus to the Radio button component.
   JAWS says "Winter Radio button not checked", and the braille display shows "< > Winter radio button".
   When moving to the Radio button component JAWS focus always lands on the first Radio button in the group, and pressing Tab key again moves focus past the Radio button component so that other Radio buttons never get focus, which is expected. However, focus should land on the selected Radio button in the group.
   Note, the number of Radio buttons in the group is not announced by the screen reader or shown on the braille display.

2. Press Shift+Tab key to move the focus back to the Radio button component.
   JAWS says "Autumn Radio button not checked", and the braille display shows "< > Autumn radio button".
   When moving back to the Radio button component JAWS focus always lands on the last Radio button in the group, and pressing Tab key again moves focus past the Radio button component so that other Radio buttons never get focus, which is expected. However, focus should land on the selected Radio button in the group.
   Note, the number of Radio buttons in the group is not announced by the screen reader or shown on the braille display.

3. Press Spacebar on one of the Radio buttons.
   Use the Arrow key to find the Spring Radio button, and press Spacebar to check it.
   JAWS automatically announces the state change "Spring checked" and shows " Spring rbtn". However, the updated text is not automatically announced, and the user must press Down arrow to find the text "Your favorite season is: Spring". An aria-alert could be used.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}