From ea52db66f05a185fed6b2e849734a7ffa1c6c6ea Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 25 Nov 2020 15:47:14 -0500 Subject: [PATCH] fix(select): improvements for announcing placeholder and value on screenreaders (#22556) - 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 --- core/src/components/alert/alert.tsx | 33 +++++++-------- core/src/components/select/select.tsx | 11 ++--- .../components/select/test/a11y/index.html | 40 +++++++++++++++---- 3 files changed, 54 insertions(+), 30 deletions(-) diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index bcb4e0e46a..3aac3a0069 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -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 ( -
+
{ inputs.map(i => (
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 1eb6dd4652..6c3130df03 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -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 ( -
+