fix(combobox, input-date-picker, input-number, input-text, input-time…

…-picker, input, radio-button-group, segmented-control, select, text-area): use toAriaBoolean in aria-invalid attribute to provide valid AT error messaging (#10079) **Related Issue:** [#7792](#7792) ## Summary Use `toAriaBoolean` in `aria-invalid` attribute to provide valid AT error messaging.
Esri · Aug 15, 2024 · 78bc096 · 78bc096
1 parent 67f1424
commit 78bc096
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 18 deletions.
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -1637,7 +1637,7 @@ export class Combobox
           aria-errormessage={IDS.validationMessage}
           aria-expanded={toAriaBoolean(open)}
           aria-haspopup="listbox"
-          aria-invalid={this.status === "invalid"}
+          aria-invalid={toAriaBoolean(this.status === "invalid")}
           aria-label={getLabelText(this)}
           aria-owns={`${listboxUidPrefix}${guid}`}
           class={{

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -572,7 +572,7 @@ export class InputDatePicker
                   aria-errormessage={IDS.validationMessage}
                   aria-expanded={toAriaBoolean(this.open)}
                   aria-haspopup="dialog"
-                  aria-invalid={this.status === "invalid"}
+                  aria-invalid={toAriaBoolean(this.status === "invalid")}
                   class={{
                     [CSS.input]: true,
                     [CSS.inputNoBottomBorder]: this.layout === "vertical" && this.range,
@@ -667,7 +667,7 @@ export class InputDatePicker
                     aria-errormessage={IDS.validationMessage}
                     aria-expanded={toAriaBoolean(this.open)}
                     aria-haspopup="dialog"
-                    aria-invalid={this.status === "invalid"}
+                    aria-invalid={toAriaBoolean(this.status === "invalid")}
                     class={{
                       [CSS.input]: true,
                       [CSS.inputBorderTopColorOne]: this.layout === "vertical" && this.range,

diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx
@@ -17,6 +17,7 @@ import {
   getSlotted,
   isPrimaryPointerButton,
   setRequestedIcon,
+  toAriaBoolean,
 } from "../../utils/dom";
 import { Alignment, Scale, Status } from "../interfaces";
 import {
@@ -1092,7 +1093,7 @@ export class InputNumber
     const childEl = (
       <input
         aria-errormessage={IDS.validationMessage}
-        aria-invalid={this.status === "invalid"}
+        aria-invalid={toAriaBoolean(this.status === "invalid")}
         aria-label={getLabelText(this)}
         autocomplete={this.autocomplete}
         autofocus={this.el.autofocus ? true : null}

diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx
@@ -12,7 +12,7 @@ import {
   VNode,
   Watch,
 } from "@stencil/core";
-import { getElementDir, getSlotted, setRequestedIcon } from "../../utils/dom";
+import { getElementDir, getSlotted, setRequestedIcon, toAriaBoolean } from "../../utils/dom";
 import {
   connectForm,
   disconnectForm,
@@ -674,7 +674,7 @@ export class InputText
     const childEl = (
       <input
         aria-errormessage={IDS.validationMessage}
-        aria-invalid={this.status === "invalid"}
+        aria-invalid={toAriaBoolean(this.status === "invalid")}
         aria-label={getLabelText(this)}
         autocomplete={this.autocomplete}
         autofocus={this.el.autofocus ? true : null}

diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
@@ -78,7 +78,7 @@ import { getSupportedLocale } from "../../utils/locale";
 import { decimalPlaces } from "../../utils/math";
 import { getIconScale } from "../../utils/component";
 import { Validation } from "../functional/Validation";
-import { focusFirstTabbable } from "../../utils/dom";
+import { focusFirstTabbable, toAriaBoolean } from "../../utils/dom";
 import { IconNameOrString } from "../icon/interfaces";
 import { syncHiddenFormInput } from "../input/common/input";
 import { CSS, IDS } from "./resources";
@@ -1017,7 +1017,7 @@ export class InputTimePicker
               aria-autocomplete="none"
               aria-errormessage={IDS.validationMessage}
               aria-haspopup="dialog"
-              aria-invalid={this.status === "invalid"}
+              aria-invalid={toAriaBoolean(this.status === "invalid")}
               disabled={disabled}
               icon="clock"
               id={this.referenceElementId}

diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx
@@ -17,6 +17,7 @@ import {
   getSlotted,
   isPrimaryPointerButton,
   setRequestedIcon,
+  toAriaBoolean,
 } from "../../utils/dom";
 import { Scale, Status, Alignment } from "../interfaces";
 import {
@@ -1183,7 +1184,7 @@ export class Input
         <input
           accept={this.accept}
           aria-errormessage={IDS.validationMessage}
-          aria-invalid={this.status === "invalid"}
+          aria-invalid={toAriaBoolean(this.status === "invalid")}
           aria-label={getLabelText(this)}
           autocomplete={this.autocomplete}
           autofocus={autofocus}
@@ -1216,7 +1217,7 @@ export class Input
             <this.childElType
               accept={this.accept}
               aria-errormessage={IDS.validationMessage}
-              aria-invalid={this.status === "invalid"}
+              aria-invalid={toAriaBoolean(this.status === "invalid")}
               aria-label={getLabelText(this)}
               autocomplete={this.autocomplete}
               autofocus={autofocus}

diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx
@@ -13,6 +13,7 @@ import {
   Watch,
 } from "@stencil/core";
 import { createObserver } from "../../utils/observers";
+import { toAriaBoolean } from "../../utils/dom";
 import { Layout, Scale, Status } from "../interfaces";
 import {
   componentFocusable,
@@ -209,7 +210,7 @@ export class RadioButtonGroup implements LoadableComponent {
       <Host role="radiogroup">
         <div
           aria-errormessage={IDS.validationMessage}
-          aria-invalid={this.status === "invalid"}
+          aria-invalid={toAriaBoolean(this.status === "invalid")}
           class={CSS.itemWrapper}
         >
           <slot />

diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
@@ -11,7 +11,7 @@ import {
   VNode,
   Watch,
 } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
+import { getElementDir, toAriaBoolean } from "../../utils/dom";
 import {
   afterConnectDefaultValueSet,
   connectForm,
@@ -204,7 +204,7 @@ export class SegmentedControl
       <Host onClick={this.handleClick} role="radiogroup">
         <div
           aria-errormessage={IDS.validationMessage}
-          aria-invalid={this.status === "invalid"}
+          aria-invalid={toAriaBoolean(this.status === "invalid")}
           class={CSS.itemWrapper}
         >
           <InteractiveContainer disabled={this.disabled}>

diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx
@@ -11,7 +11,7 @@ import {
   VNode,
   Watch,
 } from "@stencil/core";
-import { focusElement } from "../../utils/dom";
+import { focusElement, toAriaBoolean } from "../../utils/dom";
 import {
   afterConnectDefaultValueSet,
   connectForm,
@@ -422,7 +422,7 @@ export class Select
           <div class={CSS.wrapper}>
             <select
               aria-errormessage={IDS.validationMessage}
-              aria-invalid={this.status === "invalid"}
+              aria-invalid={toAriaBoolean(this.status === "invalid")}
               aria-label={getLabelText(this)}
               class={CSS.select}
               disabled={disabled}

diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx
@@ -311,9 +311,9 @@ export class TextArea
           <textarea
             aria-describedby={this.guid}
             aria-errormessage={IDS.validationMessage}
-            aria-invalid={
-              this.status === "invalid" || toAriaBoolean(this.isCharacterLimitExceeded())
-            }
+            aria-invalid={toAriaBoolean(
+              this.status === "invalid" || this.isCharacterLimitExceeded(),
+            )}
             aria-label={getLabelText(this)}
             autofocus={this.el.autofocus}
             class={{