A11y keyboard focus control in the configurable slider example

[DaveBest99]

Bug, feature request, or proposal:

Bug:
Arrow keys do not keep the focus within the Input Edit box as values change. Checking and unchecking some elements have no apparent change to the screen reader user. The Results element "md-slider" has no text label.

What is the expected behavior?

Arrow keys should change the value within a spin box without moving focus out of the element, and text labels must align with the appropriate Form field.

What is the current behavior?

Currently arrow keys move the user focus out of the Edit Spin box, and some elements have text label focus problems.

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?

Create a consistent and standard experience for all users.

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

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

Is there anything else we should know?

The screen reader user experience follows:

1. Press Tab key to move focus to any of the component element Value, Min, Max,Step Size.
   JAWS says "Value edit spin box 0", and braille display shows "Value ed 0".
   JAWS says "Min edit spin box 0", and braille display shows "Min ed 0".
   JAWS says "Max edit spin box 100", and braille display shows "Max ed 100".
   JAWS says "Step size edit spin box 1", and braille display shows "Step size ed 1".
   Using the keyboard the user can Delete or Backspace to remove the number, and type any characters into the Input field, but only moving focus away and then back will JAWS announce "Invalid entry" if non-numeric values are typed. If the Input Edit box is left blank, no error is announced.
   Pressing PgUP, PgDn, Home, End, perform no function.
   Pressing the Up arrow to increment, and the Down arrow to decrement, will change the number but focus moves out of the Input edit box and the user must press Tab or Shift+Tab to move focus back into the Input Edit box (Note, this behaviour does not occur with the "md-slider" result element).
   Note, when using IE11 all elements appear twice in the focus order as the user presses the Tab key.

2. Press Tab key to move the focus to the Ticks check box.
   JAWS says "Show ticks check box not checked", and the braille display shows "< > Show ticks".
   Pressing Spacebar will Check and Uncheck this box with the appropriate JAWS feedback.
   When this box is Checked two additional elements appear in the next focusable order as Tab key is pressed.
   "Auto ticks check box not checked" and "Tick interval spin box ed 1". When "Auto ticks" is Checked the Spin box disappears. The "Tick interval spin box" has the same Up arrow and Down arrow behaviour as issue 1 above.
   Also, the "Tick interval" appears to have no effect, as the screen reader and braille display do not indicate Ticks.

3. Press Tab key to move focus to the Thumbs label.
   JAWS says "Show thumb label check box not checked", and braille display shows "< > Show thumb label".
   When the "Thumb label" is Checked, there is no apparent change to the screen reader user, as the "md-slide" result element shows no change and there is no aria-alert.

4. Press Tab key to move focus to the Vertical element.
   JAWS says "Vertical check box not checked", and the braill display shows "< > Vertical".
   When pressing Spacebar on this element, JAWS says "checked" and "unchecked" as expected, but the braille display shows "< > Inverted" when the box is Checked.
   Whether the box is Checked or not, the behaviour of the "md-slider" result element does not change.
   On the "md-slider" element Right and Up arrow increment the numbers and the Left and Down arrow decrement the numbers for both settings. This is usually the expected behaviour, as vertical and horizontal screen reader output has no difference, but if a user choice is offered the arrow keys should respond accordingly.

5. Press Tab key to move focus to the Inverted element.
   JAWS says "Inverted check box not checked", and the braill display shows "< > Inverted".
   When pressing Spacebar on this element, JAWS says "checked" and "unchecked" as expected, but the braille display shows "< > Disabled" when the box is Checked.
   Whether the box is Checked or not, the behaviour of the "md-slider" result element does not change.
   On the "md-slider" elemetn Right and Up arrow increment the numbers and the Left and Down arrow decrement the numbers for both settings. Expected behaviour would be inverted; Right and Up arrow keys decrement numbers and Left and Down arrow keys increment numbers.

6. Pressing the Tab key to move focus to the "md-slider" result element.
   JAWS says "Left right slider 0 to increase or decrease use the arrow keys", and the braille display shows "lrtrk 0".
   When the Disabled element is Checked, JAWS says "Left right slider unavailable 0", and there is no change to the braille display. There should be a text label on this element.

[mmalerba]

Most of these issues appear to be with various components in the configurable slider example, not the slider component itself. Changed issue title to reflect this

[mmalerba]

Addressing points above:

1. Will switch inputs to type=number
2. Ticks are intended as a visual thing only
3. Thumb label is intended as a presentation thing only, since the value is always announced for screen readers
4. Will add aria-orientation
5. Inverted is intended as a visual thing only
6. Will aria-label sliders

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