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}