sdk Stepper tabindex and Web Accessibility Initiative (WAI) compatibility #16692
Description
Reproduction
Steps to reproduce:
-
To reproduce this you can open the example of the Stepper implementation, this is the link
https://stackblitz.com/angular/ldmyyrymddm?file=app%2Fstepper-overview-example.html -
in the styles.css file add this:
div:focus {
background-color: aquamarine !important;
}
- Now in the form use the tab key to see how interact...
a. first tabbing you will see the mode button on focus.
b. Second tabbing, you will see the title tab on focus.
c. Third tabbing, you will see a div in aquamarine showing you the form...
And is here in where we have a conflict with Web Accessibility, because this selected item it doesn't help to orient users when they need specific elements to be on-focus.
This div is managed by the component, and it would be very helpful to developers if we can decide if this div is going to have a tab-index property or not, even a tool-tip, since is helpful sometimes to describe the purpose of this form, could be a nice place to add it.
As a reference:
W3 focus order criteria
Expected Behavior
What behavior were you expecting to see?
The tabbing should pass through all the significant elements in the form to comply with Web Accessibility.
We should jump from the Tab title to the first input element of the form.
As a developer it would be nice to re-define some properties of that div accessible from outside of the library, like the tabindex, tooltip, this div normally identify by the library as for example "id="cdk-step-content-10-0"", depending on the steps that one create, but the properties of that div are't accesible in an easy way.
Actual Behavior
What behavior did you actually see?
By doing the Tabbing we end up in an element that it doesn't provide guidance to a user with Web Accessibility needs.
Environment
- Angular: ~7.0.2
- CDK/Material: 8.1.2
- Browser(s): Chrome Version 75.0.3770.142 (Official Build) (32-bit)
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10