javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(select): improvements for announcing placeholder and value on screenreaders (#22556)

Browse Source 
- Hides select text from screen readers so it isn't announced twice (Android talkback needs this)
- Adds the placeholder text to be announced if there is no value
- Don't add a comma if there is no value/placeholder (NVDA speech viewer)
- Don't announce alert label twice
This commit is contained in:
Brandy Carney
2020-11-25 15:47:14 -05:00
committed by GitHub
parent c45c8d5564
commit ea52db66f0
3 changed files with 54 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
core/src/components/select/select.tsx
View File

@@ -458,11 +458,12 @@ export class Select implements ComponentInterface {
const textPart = addPlaceholderClass ? 'placeholder' : 'text';
// If there is a label then we need to concatenate it with the
// current value and a comma so it separates nicely when the screen reader
// announces it, otherwise just announce the value
// current value (or placeholder) and a comma so it separates
// nicely when the screen reader announces it, otherwise just
// announce the value / placeholder
const displayLabel = labelText !== undefined
? `${displayValue}, ${labelText}`
: displayValue;
? (selectText !== '' ? `${selectText}, ${labelText}` : labelText)
: selectText;
return (
<Host
@@ -477,7 +478,7 @@ export class Select implements ComponentInterface {
'select-disabled': disabled,
}}
>
<div class={selectTextClasses} part={textPart}>
<div aria-hidden="true" class={selectTextClasses} part={textPart}>
{selectText}
</div>
<div class="select-icon" role="presentation" part="icon">

40
core/src/components/select/test/a11y/index.html
View File

@@ -31,7 +31,7 @@
</ion-list-header>
<div class="native-select-wrapper">
<label for="pet-select">Choose a Pet</label>
<label for="pet-select">Favorite Pet</label>
<select name="pets" id="pet-select">
<option value="dog">Dog</option>
@@ -52,9 +52,35 @@
</ion-list-header>
<ion-item>
<label for="ionic-select">Choose a Pet Custom</label>
<ion-label>Favorite Pet</ion-label>
<ion-select id="ionic-select">
<ion-select>
<ion-select-option value="dog">Dog</ion-select-option>
<ion-select-option value="cat">Cat</ion-select-option>
<ion-select-option value="hamster">Hamster</ion-select-option>
<ion-select-option value="parrot">Parrot</ion-select-option>
<ion-select-option value="spider">Spider</ion-select-option>
<ion-select-option value="goldfish">Goldfish</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Favorite Pet</ion-label>
<ion-select placeholder="Select a Pet">
<ion-select-option value="dog">Dog</ion-select-option>
<ion-select-option value="cat">Cat</ion-select-option>
<ion-select-option value="hamster">Hamster</ion-select-option>
<ion-select-option value="parrot">Parrot</ion-select-option>
<ion-select-option value="spider">Spider</ion-select-option>
<ion-select-option value="goldfish">Goldfish</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Favorite Pet</ion-label>
<ion-select value="spider">
<ion-select-option value="dog">Dog</ion-select-option>
<ion-select-option value="cat">Cat</ion-select-option>
<ion-select-option value="hamster">Hamster</ion-select-option>
@@ -73,9 +99,9 @@
</ion-list-header>
<ion-item>
<ion-label>Choose a Pet</ion-label>
<label for="ionic-select">Favorite Pet</label>
<ion-select>
<ion-select id="ionic-select">
<ion-select-option value="dog">Dog</ion-select-option>
<ion-select-option value="cat">Cat</ion-select-option>
<ion-select-option value="hamster">Hamster</ion-select-option>
@@ -94,7 +120,7 @@
</ion-list-header>
<ion-item>
<ion-label>Choose a Pet</ion-label>
<ion-label>Favorite Pet</ion-label>
<ion-select interface="popover">
<ion-select-option value="dog">Dog</ion-select-option>
@@ -115,7 +141,7 @@
</ion-list-header>
<ion-item>
<ion-label>Choose a Pet</ion-label>
<ion-label>Favorite Pet</ion-label>
<ion-select interface="action-sheet">
<ion-select-option value="dog">Dog</ion-select-option>