Fix boolean aria attribs

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

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}
       >

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}

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'}
         >
           <div
             part="grid"
@@ -782,7 +782,7 @@ export class ColorPicker {
       <sl-dropdown
         ref={el => (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}

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}

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}

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}

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}
           >
             <slot />

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}

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-disabled={this.disabled ? 'true' : 'false'}
-        aria-selected={this.checked}
+        aria-checked={this.checked ? 'true' : 'false'}
         tabIndex={!this.disabled ? 0 : null}
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}

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}

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-disabled={this.disabled ? 'true' : 'false'}
-        aria-readonly={this.readonly}
+        aria-readonly={this.readonly ? 'true' : 'false'}
         aria-value={this.value}
         aria-valuemin={0}
         aria-valuemax={this.max}

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"
       >
         <div part="indicator" class="skeleton__indicator" />

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}

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
       <Host id={this.host.id || this.componentId} style={{ display: this.active ? 'block' : 'none' }}>
-        <div part="base" class="tab-panel" role="tabpanel" aria-selected={this.active} aria-hidden={!this.active}>
+        <div
+          part="base"
+          class="tab-panel"
+          role="tabpanel"
+          aria-selected={this.active ? 'true' : 'false'}
+          aria-hidden={this.active ? 'false' : 'true'}
+        >
           <slot />
         </div>
       </Host>

src/components/tab/tab.tsx

@@ -58,8 +58,8 @@ export class Tab {
             'tab--disabled': this.disabled
           }}
           role="tab"
-          aria-disabled={this.disabled}
+          aria-disabled={this.disabled ? 'true' : 'false'}
-          aria-selected={this.active}
+          aria-selected={this.active ? 'true' : 'false'}
           tabindex={this.disabled || !this.active ? '-1' : '0'}
         >
           <slot />

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}
             </div>