@@ -141,13 +141,22 @@ globally cause input errors to show when the input is dirty and invalid.
141
141
- <kbd >ENTER</kbd > or <kbd >SPACE</kbd >: Select focused item
142
142
143
143
### Accessibility
144
-
145
- The ` <mat-select> ` component without text or label should be given a meaningful label via
146
- ` aria-label ` or ` aria-labelledby ` .
147
-
148
- The ` <mat-select> ` component has ` role="combobox" ` , the dropdown panel has ` role="listbox" ` and options inside select panel have ` role="option" ` .
149
-
150
- The native ` <select> ` offers the best accessibility because it is supported directly by screen-readers.
144
+ When possible, prefer a native ` <select> ` element over ` MatSelect ` . The native control
145
+ provides the most accessible experience across the widest range of platforms.
146
+
147
+ ` MatSelect ` implements the combobox pattern detailed in the [ 1.2 version of the ARIA
148
+ specification] ( https://www.w3.org/TR/wai-aria-1.2 ) . The combobox trigger controls a ` role="listbox" `
149
+ element opened in a pop-up. Previous versions of the ARIA specification
150
+ required that ` role="combobox" ` apply to a text input control, but the 1.2 version of the
151
+ specification supports a wider variety of interaction patterns. This newer usage of ARIA works
152
+ in all browser and screen-reader combinations supports by Angular Material.
153
+
154
+ Because the pop-up uses the ` role="listbox" ` pattern, you should _ not_ put other interactive
155
+ controls, such as buttons or checkboxes, inside a select option. Nesting interactive controls like
156
+ this interferes with most assistive technology.
157
+
158
+ Always provide an accessible label for the select. This can be done by adding a ` <mat-label> `
159
+ inside of ` <mat-form-field> ` , the ` aria-label ` attribute, or the ` aria-labelledby ` attribute.
151
160
152
161
### Troubleshooting
153
162
0 commit comments