Skip to content

Commit 0df3a5c

Browse files
jelbournwagnermaciel
authored andcommitted
docs(material/select): expand a11y section
Expands the select's a11y section with additional guidance and background on its ARIA treatment.
1 parent 1cc00eb commit 0df3a5c

File tree

1 file changed

+16
-7
lines changed

1 file changed

+16
-7
lines changed

src/material/select/select.md

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -141,13 +141,22 @@ globally cause input errors to show when the input is dirty and invalid.
141141
- <kbd>ENTER</kbd> or <kbd>SPACE</kbd>: Select focused item
142142

143143
### 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.
151160

152161
### Troubleshooting
153162

0 commit comments

Comments
 (0)