A11y keyboard focus control in Checkbox Component

[DaveBest99]

Bug, feature request, or proposal:

But:
Using the JAWS screen reader with Firefox, Chrome, and Internet Explorer result with a different user experience. It appears the disassociation of "label", "span", and "input" elements may cause the screen reader focus to be incorrect.

What is the expected behavior?

When moving focus to a Checkbox the text label should be identified with the element, and it is expected that arrow keys will rotate between Radio buttons.

What is the current behavior?

Currently text labels are not read properly for each element, and arrow keys do not stay within the Radio button group.

What are the steps to reproduce?

See below.

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

Latest

Is there anything else we should know?

The user experience is as follows.

Using Firefox and Chrome:

1. Press Tab key to the Indeterminate Checkbox.
   JAWS says "Indeterminate checkbox not checked" and the braille display is on the Checkbox "< > Indeterminate".

2. Press Spacebar to check the element.
   JAWS says "checked" but the braille display shows "Align:".

3. Press Spacebar again to uncheck the element.
   JAWS says "unchecked" but each time you press the Spacebar the braille display focus appears to be random; sometimes on the text "Align:", sometimes on the Checkbox
   "Indeterminate", and sometimes on the page Title "Angular Material".

4. Press Tab key to the Start Check Button.
   JAWS says "start radio button checked 1 of 2", and the braille display shows " Start rbtn 1 of 2".

5. Pressing Tab key again moves focus to the "Disabled" Checkbox element as expected. However, the Up/Down Arrow keys do not rotate the focus between the two Radio buttons. Arrow keys should rotate between the grouped Radio buttons and Tab or Shift+Tab moves focus away from the Radio button group.
   With each press of the Down Arrow key JAWS reads:
   DownArrow: "Start"
   DownArrow: "Radio button not checked End 2 of 2"
   DownArrow: "End"
   DownArrow: "Disabled checkbox not checked"
   DownArrow: "Disabled clickable"

Using Internet Explorer 11:

1. Press Tab key to the first component element.
   JAWS says "checked checkbox not checked", and the braille display shows "< > Checked".
   With each press of the Tab key the next element is spoken with an incorrect text label.

2. Press Tab key again.
   JAWS says "checked checkbox not checked", and the braille display shows "< > Checked".

3. Press Tab key again.
   JAWS says "Align: checkbox not checked", and the braille display shows "< > Align:".

4. Press Tab key again.
   JAWS says "Indeterminate checkbox not checked", and the braille display shows "< > Indeterminate".

5. Press Tab key again.
   JAWS says "Start radio button checked", and the braille display shows " rbtn".
   Note, pressing Spacebar does not uncheck the Radio button, as expected since this is a Radio button group. Pressing Down Arrow moves focus to the "End checkbox not checked" and pressing Spacebar will Check the End Radio button. However, pressing Up/Down Arrow keys does not rotate between the Radio buttons and JAWS does not announce how many Radio buttons are in the group.

6. Press Tab key again.
   JAWS says "Result checkbox not checked", and the braille display shows "< > Result".

7. Press Tab key again.
   JAWS says "Disabled checkbox not checked", and the braille display shows "< > Disabled".

8. Press Tab key again.
   JAWS says "Angular checkbox not checked", and the braille display shows "< > Angular".

9. Press Tab key again.
   JAWS says "I'm a checkbox checkbox not checked", and the braille display shows "< > I'm a checkbox".

10. Pressing the Spacebar on the "Disabled checkbox" will change the state and JAWS announces "checked". Pressing the Tab key moves to the "I'm a checkbox" element and JAWS announces that it is unavailable (In Firefox and Chrome Tab key skips past this element in the focus order). An inconsistent behaviour.

[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.}