Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(select): announce placeholder, hide select text from screenreaders #22556

Merged
merged 9 commits into from
Nov 25, 2020
Merged

fix(select): announce placeholder, hide select text from screenreaders #22556

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a54267a
fix(select): announce placeholder, hide select text from screenreaders
brandyscarney Nov 23, 2020
86c2c3f
style: comment
brandyscarney Nov 23, 2020
a166e14
fix(select): aria-hidden true
brandyscarney Nov 24, 2020
f7b5ef3
Merge branch 'master' into fix-select-placeholder-a11y
brandyscarney Nov 24, 2020
d173e8a
fix(select): don't add a comma if the select text is empty
brandyscarney Nov 24, 2020
fa5fbb3
bad merge
brandyscarney Nov 24, 2020
98fba0c
fix(alert): make sure header is not null when assigning labelledBy
brandyscarney Nov 24, 2020
ec6bf32
style: lint
brandyscarney Nov 24, 2020
3433e9d
fix(alert): don't read alert header twice
brandyscarney Nov 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 15 additions & 18 deletions core/src/components/alert/alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,22 +373,24 @@ export class Alert implements ComponentInterface, OverlayInterface {
return values;
}

private renderAlertInputs(labelledBy: string | undefined) {
private renderAlertInputs() {
switch (this.inputType) {
case 'checkbox': return this.renderCheckbox(labelledBy);
case 'radio': return this.renderRadio(labelledBy);
default: return this.renderInput(labelledBy);
case 'checkbox': return this.renderCheckbox();
case 'radio': return this.renderRadio();
default: return this.renderInput();
}
}

private renderCheckbox(labelledby: string | undefined) {
private renderCheckbox() {
const inputs = this.processedInputs;
const mode = getIonMode(this);

if (inputs.length === 0) {
return null;
}

return (
<div class="alert-checkbox-group" aria-labelledby={labelledby}>
<div class="alert-checkbox-group">
{ inputs.map(i => (
<button
type="button"
Expand Down Expand Up @@ -422,13 +424,15 @@ export class Alert implements ComponentInterface, OverlayInterface {
);
}

private renderRadio(labelledby: string | undefined) {
private renderRadio() {
const inputs = this.processedInputs;

if (inputs.length === 0) {
return null;
}

return (
<div class="alert-radio-group" role="radiogroup" aria-labelledby={labelledby} aria-activedescendant={this.activeId}>
<div class="alert-radio-group" role="radiogroup" aria-activedescendant={this.activeId}>
{ inputs.map(i => (
<button
type="button"
Expand Down Expand Up @@ -459,13 +463,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
);
}

private renderInput(labelledby: string | undefined) {
private renderInput() {
const inputs = this.processedInputs;
if (inputs.length === 0) {
return null;
}
return (
<div class="alert-input-group" aria-labelledby={labelledby}>
<div class="alert-input-group">
{ inputs.map(i => {
if (i.type === 'textarea') {
return (
Expand Down Expand Up @@ -552,13 +556,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
const subHdrId = `alert-${overlayIndex}-sub-hdr`;
const msgId = `alert-${overlayIndex}-msg`;

let labelledById: string | undefined;
if (header !== undefined) {
labelledById = hdrId;
} else if (subHeader !== undefined) {
labelledById = subHdrId;
}

return (
<Host
role="dialog"
Expand Down Expand Up @@ -589,7 +586,7 @@ export class Alert implements ComponentInterface, OverlayInterface {

<div id={msgId} class="alert-message" innerHTML={sanitizeDOMString(this.message)}></div>

{this.renderAlertInputs(labelledById)}
{this.renderAlertInputs()}
{this.renderAlertButtons()}

</div>
Expand Down
11 changes: 6 additions & 5 deletions core/src/components/select/select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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">
Expand Down
40 changes: 33 additions & 7 deletions core/src/components/select/test/a11y/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down