add select accessibility

Liam DeBeasi
2021-07-09 09:36:58 -04:00
parent 6362801347
commit bcb681e938

@ -268,4 +268,14 @@ When using VoiceOver on macOS or iOS, Chrome will announce the switch as a check
You are currently on a switch. To select or deselect this checkbox, press Control-Option-Space.
```
There is a WebKit bug open for this: https://bugs.webkit.org/show_bug.cgi?id=196354
There is a WebKit bug open for this: https://bugs.webkit.org/show_bug.cgi?id=196354
### Select
#### Example Components
- [ion-select](https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/select/select.tsx)
#### Labels
When used inside of `ion-item`, most form components are automatically associated with the corresponding `ion-label` by adding an `id` to the label and then setting `aria-labelledby` on the form component. `ion-select` is a different story as we need to have screen readers announce both the label value as well as the text of any selected options within `ion-select`. As a result, we set an `aria-label` on the `ion-select` which contains the label text as well as the text of any selected options. If there are no selected options, the placeholder text is used instead.