From ee2c18d51c3162c07dceecefa593bbbf29129bf3 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 22 Oct 2020 22:45:41 -0400 Subject: [PATCH] Fix boolean aria attribs --- docs/getting-started/changelog.md | 1 + src/components/alert/alert.tsx | 2 +- src/components/checkbox/checkbox.tsx | 2 +- src/components/color-picker/color-picker.tsx | 4 ++-- src/components/details/details.tsx | 4 ++-- src/components/dialog/dialog.tsx | 2 +- src/components/drawer/drawer.tsx | 2 +- src/components/dropdown/dropdown.tsx | 2 +- src/components/input/input.tsx | 2 +- src/components/menu-item/menu-item.tsx | 4 ++-- src/components/radio/radio.tsx | 2 +- src/components/rating/rating.tsx | 4 ++-- src/components/skeleton/skeleton.tsx | 2 +- src/components/switch/switch.tsx | 2 +- src/components/tab-panel/tab-panel.tsx | 8 +++++++- src/components/tab/tab.tsx | 4 ++-- src/components/tooltip/tooltip.tsx | 2 +- 17 files changed, 28 insertions(+), 21 deletions(-) diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md index 75c79ffb5..eb1c2b927 100644 --- a/docs/getting-started/changelog.md +++ b/docs/getting-started/changelog.md @@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis - Fixed a bug where setting `open` initially wouldn't show `sl-dialog` or `sl-drawer` - Fixed a bug where `disabled` could be set when buttons are rendered as links - Fixed a bug where hoisted dropdowns would render in the wrong position when place inside an `sl-dialog` +- Fixed a bug where boolean aria attributes didn't explicitly set `true|false` string values in the DOM - Improved `sl-dropdown` accessibility by attaching `aria-haspopup` and `aria-expanded` to the slotted trigger - Removed `console.log` from modal utility - 🚨 BREAKING CHANGE: Refactored `sl-menu` and `sl-menu-item` to improve accessibility by using proper focus states diff --git a/src/components/alert/alert.tsx b/src/components/alert/alert.tsx index 4cb8fe969..0db9188f8 100644 --- a/src/components/alert/alert.tsx +++ b/src/components/alert/alert.tsx @@ -193,7 +193,7 @@ export class Alert { role="alert" aria-live="assertive" aria-atomic="true" - aria-hidden={!this.open} + aria-hidden={this.open ? 'false' : 'true'} onMouseMove={this.handleMouseMove} onTransitionEnd={this.handleTransitionEnd} > diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx index a6014338c..888aab210 100644 --- a/src/components/checkbox/checkbox.tsx +++ b/src/components/checkbox/checkbox.tsx @@ -176,7 +176,7 @@ export class Checkbox { disabled={this.disabled} required={this.required} role="checkbox" - aria-checked={this.checked} + aria-checked={this.checked ? 'true' : 'false'} aria-labelledby={this.labelId} onClick={this.handleClick} onBlur={this.handleBlur} diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx index 549ecaef0..0848e5887 100644 --- a/src/components/color-picker/color-picker.tsx +++ b/src/components/color-picker/color-picker.tsx @@ -623,7 +623,7 @@ export class ColorPicker { 'color-picker--inline': this.inline, 'color-picker--disabled': this.disabled }} - aria-disabled={this.disabled} + aria-disabled={this.disabled ? 'true' : 'false'} >
(this.dropdown = el)} class="color-dropdown" - aria-disabled={this.disabled} + aria-disabled={this.disabled ? 'true' : 'false'} containingElement={this.host} hoist={this.hoist} onSl-show={this.handleDropdownShow} diff --git a/src/components/details/details.tsx b/src/components/details/details.tsx index c0a8c3fe4..ca1c39723 100644 --- a/src/components/details/details.tsx +++ b/src/components/details/details.tsx @@ -181,9 +181,9 @@ export class Details { id={`${this.componentId}-header`} class="details__header" role="button" - aria-expanded={this.open} + aria-expanded={this.open ? 'true' : 'false'} aria-controls={`${this.componentId}-content`} - aria-disabled={this.disabled} + aria-disabled={this.disabled ? 'true' : 'false'} tabIndex={this.disabled ? -1 : 0} onClick={this.handleSummaryClick} onKeyDown={this.handleSummaryKeyDown} diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx index 313f7c677..2332bca82 100644 --- a/src/components/dialog/dialog.tsx +++ b/src/components/dialog/dialog.tsx @@ -196,7 +196,7 @@ export class Dialog { class="dialog__panel" role="dialog" aria-modal="true" - aria-hidden={!this.open} + aria-hidden={this.open ? 'false' : 'true'} aria-label={this.noHeader ? this.label : null} aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null} tabIndex={0} diff --git a/src/components/drawer/drawer.tsx b/src/components/drawer/drawer.tsx index fb50bcd30..2d465c2de 100644 --- a/src/components/drawer/drawer.tsx +++ b/src/components/drawer/drawer.tsx @@ -213,7 +213,7 @@ export class Drawer { class="drawer__panel" role="dialog" aria-modal="true" - aria-hidden={!this.open} + aria-hidden={this.open ? 'false' : 'true'} aria-label={this.noHeader ? this.label : null} aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null} tabIndex={0} diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx index 84fd05cee..d112f63c5 100644 --- a/src/components/dropdown/dropdown.tsx +++ b/src/components/dropdown/dropdown.tsx @@ -390,7 +390,7 @@ export class Dropdown { part="panel" class="dropdown__panel" role="menu" - aria-hidden={!this.open} + aria-hidden={this.open ? 'false' : 'true'} aria-labelledby={this.componentId} > diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx index cb7da7c2a..f2e4954cd 100644 --- a/src/components/input/input.tsx +++ b/src/components/input/input.tsx @@ -335,7 +335,7 @@ export class Input { inputMode={this.inputmode} aria-labelledby={this.labelId} aria-describedby={this.helpTextId} - aria-invalid={this.invalid} + aria-invalid={this.invalid ? 'true' : 'false'} onChange={this.handleChange} onInput={this.handleInput} onInvalid={this.handleInvalid} diff --git a/src/components/menu-item/menu-item.tsx b/src/components/menu-item/menu-item.tsx index 5db28a0cc..30a3351f3 100644 --- a/src/components/menu-item/menu-item.tsx +++ b/src/components/menu-item/menu-item.tsx @@ -81,8 +81,8 @@ export class MenuItem { 'menu-item--focused': this.hasFocus }} role="menuitem" - aria-disabled={this.disabled} - aria-selected={this.checked} + aria-disabled={this.disabled ? 'true' : 'false'} + aria-checked={this.checked ? 'true' : 'false'} tabIndex={!this.disabled ? 0 : null} onFocus={this.handleFocus} onBlur={this.handleBlur} diff --git a/src/components/radio/radio.tsx b/src/components/radio/radio.tsx index e8e2dc37e..40c3fac19 100644 --- a/src/components/radio/radio.tsx +++ b/src/components/radio/radio.tsx @@ -181,7 +181,7 @@ export class Radio { checked={this.checked} disabled={this.disabled} role="radio" - aria-checked={this.checked} + aria-checked={this.checked ? 'true' : 'false'} aria-labelledby={this.labelId} onClick={this.handleClick} onBlur={this.handleBlur} diff --git a/src/components/rating/rating.tsx b/src/components/rating/rating.tsx index a623076c4..479fca395 100644 --- a/src/components/rating/rating.tsx +++ b/src/components/rating/rating.tsx @@ -163,8 +163,8 @@ export class Rating { 'rating--readonly': this.readonly, 'rating--disabled': this.disabled }} - aria-disabled={this.disabled} - aria-readonly={this.readonly} + aria-disabled={this.disabled ? 'true' : 'false'} + aria-readonly={this.readonly ? 'true' : 'false'} aria-value={this.value} aria-valuemin={0} aria-valuemax={this.max} diff --git a/src/components/skeleton/skeleton.tsx b/src/components/skeleton/skeleton.tsx index d6ae2833a..9e9c71e59 100644 --- a/src/components/skeleton/skeleton.tsx +++ b/src/components/skeleton/skeleton.tsx @@ -26,7 +26,7 @@ export class Skeleton { 'skeleton--pulse': this.effect === 'pulse', 'skeleton--sheen': this.effect === 'sheen' }} - aria-busy + aria-busy="true" aria-live="polite" >
diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx index 9865e0c5e..4e8c40a4e 100644 --- a/src/components/switch/switch.tsx +++ b/src/components/switch/switch.tsx @@ -150,7 +150,7 @@ export class Switch { disabled={this.disabled} required={this.required} role="switch" - aria-checked={this.checked} + aria-checked={this.checked ? 'true' : 'false'} aria-labelledby={this.labelId} onClick={this.handleClick} onBlur={this.handleBlur} diff --git a/src/components/tab-panel/tab-panel.tsx b/src/components/tab-panel/tab-panel.tsx index 90ae06775..996059b66 100644 --- a/src/components/tab-panel/tab-panel.tsx +++ b/src/components/tab-panel/tab-panel.tsx @@ -31,7 +31,13 @@ export class TabPanel { return ( // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels -
+
diff --git a/src/components/tab/tab.tsx b/src/components/tab/tab.tsx index 0450b6ce7..62d66de0f 100644 --- a/src/components/tab/tab.tsx +++ b/src/components/tab/tab.tsx @@ -58,8 +58,8 @@ export class Tab { 'tab--disabled': this.disabled }} role="tab" - aria-disabled={this.disabled} - aria-selected={this.active} + aria-disabled={this.disabled ? 'true' : 'false'} + aria-selected={this.active ? 'true' : 'false'} tabindex={this.disabled || !this.active ? '-1' : '0'} > diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx index 28b56f959..332d4aba8 100644 --- a/src/components/tooltip/tooltip.tsx +++ b/src/components/tooltip/tooltip.tsx @@ -240,7 +240,7 @@ export class Tooltip { 'tooltip--open': this.open }} role="tooltip" - aria-hidden={!this.open} + aria-hidden={this.open ? 'false' : 'true'} > {this.content}