fix: properly set aria attributes on components (#10404)

**Related Issue:** #10407 ## Summary - only sets `aria-expanded` on button when present on host - properly sets `boolean` values to strings on other components - removes `aria-hidden` from screen reader text
Esri · Sep 26, 2024 · 864f3e3 · 864f3e3
1 parent c99be67
commit 864f3e3
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 21 deletions.
diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx
@@ -267,7 +267,7 @@ export class Button
       <InteractiveContainer disabled={this.disabled}>
         <Tag
           aria-busy={toAriaBoolean(this.loading)}
-          aria-expanded={this.el.ariaExpanded}
+          aria-expanded={this.el.ariaExpanded ? this.el.ariaExpanded : null}
           aria-label={!this.loading ? getLabelText(this) : this.messages.loading}
           aria-live="polite"
           class={{

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.tsx b/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}

diff --git a/packages/calcite-components/src/components/table-cell/table-cell.tsx b/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>

diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/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>
           )}

diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/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)}

diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx
@@ -366,7 +366,7 @@ export class TextArea
           </footer>
           <HiddenFormInputSlot component={this} />
           {this.isCharacterLimitExceeded() && (
-            <span aria-hidden={true} aria-live="polite" class={CSS.assistiveText} id={this.guid}>
+            <span aria-live="polite" class={CSS.assistiveText} id={this.guid}>
               {this.replacePlaceHoldersInMessages()}
             </span>
           )}

diff --git a/packages/calcite-components/src/components/tree/tree.tsx b/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}