fix: properly set aria attributes on components

packages/calcite-components/src/components/block/block.tsx

@@ -500,7 +500,7 @@ export class Block
       <Host>
         <InteractiveContainer disabled={this.disabled}>
           <article
-            aria-busy={toAriaBoolean(loading)}
+            aria-busy={loading ? toAriaBoolean(loading) : null}
             class={{
               [CSS.container]: true,
             }}

packages/calcite-components/src/components/button/button.tsx

@@ -266,8 +266,8 @@ export class Button
     return (
       <InteractiveContainer disabled={this.disabled}>
         <Tag
-          aria-busy={toAriaBoolean(this.loading)}
-          aria-expanded={this.el.ariaExpanded}
+          aria-busy={this.loading ? toAriaBoolean(this.loading) : null}
+          aria-expanded={this.el.ariaExpanded ? this.el.ariaExpanded : null}
           aria-label={!this.loading ? getLabelText(this) : this.messages.loading}
           aria-live="polite"
           class={{

packages/calcite-components/src/components/card/card.tsx

@@ -388,7 +388,10 @@ export class Card
               </div>
             ) : null}
             {thumbnailStart && this.renderThumbnail()}
-            <section aria-busy={toAriaBoolean(this.loading)} class={{ [CSS.container]: true }}>
+            <section
+              aria-busy={this.loading ? toAriaBoolean(this.loading) : null}
+              class={{ [CSS.container]: true }}
+            >
               {this.renderHeader()}
               <div
                 class={{

packages/calcite-components/src/components/list/list.tsx

@@ -537,7 +537,7 @@ export class List
           {this.renderItemAriaLive()}
           {loading ? <calcite-scrim class={CSS.scrim} loading={loading} /> : null}
           <table
-            aria-busy={toAriaBoolean(loading)}
+            aria-busy={loading ? toAriaBoolean(loading) : null}
             aria-label={label || ""}
             class={CSS.table}
             onKeyDown={this.handleListKeydown}

packages/calcite-components/src/components/menu-item/menu-item.tsx

@@ -14,7 +14,12 @@ import {
   Watch,
 } from "@stencil/core";
 import { FlipContext } from "../interfaces";
-import { Direction, getElementDir, slotChangeGetAssignedElements } from "../../utils/dom";
+import {
+  Direction,
+  getElementDir,
+  slotChangeGetAssignedElements,
+  toAriaBoolean,
+} from "../../utils/dom";
 import {
   componentFocusable,
   LoadableComponent,
@@ -470,8 +475,8 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
           <div class={CSS.itemContent}>
             <a
               aria-current={this.isFocused ? "page" : false}
-              aria-expanded={this.open}
-              aria-haspopup={this.hasSubmenu}
+              aria-expanded={toAriaBoolean(this.open)}
+              aria-haspopup={toAriaBoolean(this.hasSubmenu)}
               aria-label={this.label}
               class={{ [CSS.layoutVertical]: this.layout === "vertical", [CSS.content]: true }}
               href={this.href}

packages/calcite-components/src/components/panel/panel.tsx

@@ -720,7 +720,7 @@ export class Panel
 
     const panelNode = (
       <article
-        aria-busy={toAriaBoolean(loading)}
+        aria-busy={loading ? toAriaBoolean(loading) : null}
         class={CSS.container}
         hidden={isClosed}
         ref={this.setContainerRef}

packages/calcite-components/src/components/pick-list/pick-list.tsx

@@ -305,7 +305,11 @@ export class PickList<
 
   render(): VNode {
     return (
-      <Host aria-busy={toAriaBoolean(this.loading)} onKeyDown={this.keyDownHandler} role="menu">
+      <Host
+        aria-busy={this.loading ? toAriaBoolean(this.loading) : null}
+        onKeyDown={this.keyDownHandler}
+        role="menu"
+      >
         <List props={this} />
       </Host>
     );

packages/calcite-components/src/components/table-cell/table-cell.tsx

@@ -243,11 +243,7 @@ export class TableCell
             tabIndex={staticCell ? -1 : 0}
           >
             {(this.selectionCell || this.readCellContentsToAT) && (
-              <span
-                aria-hidden={true}
-                aria-live={this.focused ? "polite" : "off"}
-                class={CSS.assistiveText}
-              >
+              <span aria-live={this.focused ? "polite" : "off"} class={CSS.assistiveText}>
                 {this.selectionCell && this.selectionText}
                 {this.readCellContentsToAT && !this.selectionCell && this.contentsText}
               </span>

packages/calcite-components/src/components/table-header/table-header.tsx

@@ -261,11 +261,7 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo
             />
           )}
           {(this.selectionCell || this.numberCell) && (
-            <span
-              aria-hidden={true}
-              aria-live={this.focused ? "polite" : "off"}
-              class={CSS.assistiveText}
-            >
+            <span aria-live={this.focused ? "polite" : "off"} class={CSS.assistiveText}>
               {this.screenReaderText}
             </span>
           )}

packages/calcite-components/src/components/table-row/table-row.tsx

@@ -13,7 +13,11 @@ import {
 } from "@stencil/core";
 import { LocalizedComponent } from "../../utils/locale";
 import { Alignment, Scale, SelectionMode } from "../interfaces";
-import { focusElementInGroup, FocusElementInGroupDestination } from "../../utils/dom";
+import {
+  focusElementInGroup,
+  FocusElementInGroupDestination,
+  toAriaBoolean,
+} from "../../utils/dom";
 import { RowType, TableInteractionMode, TableRowFocusEvent } from "../table/interfaces";
 import { isActivationKey } from "../../utils/key";
 import {
@@ -410,7 +414,7 @@ export class TableRow implements InteractiveComponent, LocalizedComponent {
         <InteractiveContainer disabled={this.disabled}>
           <tr
             aria-rowindex={this.positionAll + 1}
-            aria-selected={this.selected}
+            aria-selected={toAriaBoolean(this.selected)}
             class={{ [CSS.lastVisibleRow]: this.lastVisibleRow }}
             onKeyDown={this.keyDownHandler}
             ref={(el) => (this.tableRowEl = el)}

packages/calcite-components/src/components/text-area/text-area.tsx

@@ -366,7 +366,12 @@ export class TextArea
           </footer>
           <HiddenFormInputSlot component={this} />
           {this.isCharacterLimitExceeded() && (
-            <span aria-hidden={true} aria-live="polite" class={CSS.assistiveText} id={this.guid}>
+            <span
+              aria-hidden={toAriaBoolean(true)}
+              aria-live="polite"
+              class={CSS.assistiveText}
+              id={this.guid}
+            >
               {this.replacePlaceHoldersInMessages()}
             </span>
           )}

packages/calcite-components/src/components/tree/tree.tsx

@@ -9,7 +9,7 @@ import {
   Prop,
   VNode,
 } from "@stencil/core";
-import { focusElement, nodeListToArray } from "../../utils/dom";
+import { focusElement, nodeListToArray, toAriaBoolean } from "../../utils/dom";
 import { Scale, SelectionMode } from "../interfaces";
 import { TreeItemSelectDetail } from "../tree-item/interfaces";
 import { getTraversableItems, isTreeItem } from "./utils";
@@ -88,9 +88,9 @@ export class Tree {
         aria-multiselectable={
           this.child
             ? undefined
-            : (
-                this.selectionMode === "multiple" || this.selectionMode === "multichildren"
-              ).toString()
+            : toAriaBoolean(
+                this.selectionMode === "multiple" || this.selectionMode === "multichildren",
+              )
         }
         onKeyDown={this.keyDownHandler}
         role={!this.child ? "tree" : undefined}

packages/calcite-components/src/components/value-list/value-list.tsx

@@ -513,7 +513,7 @@ export class ValueList<
   render(): VNode {
     return (
       <Host
-        aria-busy={toAriaBoolean(this.loading)}
+        aria-busy={this.loading ? toAriaBoolean(this.loading) : null}
         onBlur={this.handleBlur}
         onFocusin={this.handleFocusIn}
         onKeyDown={this.keyDownHandler}