fix: address a11y issues in input related components

Signed-off-by: Mason Hu <[email protected]>
canonical · Feb 21, 2024 · 6e79c95 · 6e79c95
1 parent 829ba13
commit 6e79c95
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 6 deletions.
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -100,10 +100,11 @@ const Input = ({
   const helpId = useId();
   const hasError = !!error;
 
+  const description = [help ? helpId : null, success ? validationId : null]
+    .filter(Boolean)
+    .join(" ");
   const commonProps = {
-    "aria-describedby": [help ? helpId : null, success ? validationId : null]
-      .filter(Boolean)
-      .join(" "),
+    "aria-describedby": !description ? undefined : description,
     "aria-errormessage": hasError ? validationId : null,
     "aria-invalid": hasError,
     id: inputId,

diff --git a/src/components/Input/__snapshots__/Input.test.tsx.snap b/src/components/Input/__snapshots__/Input.test.tsx.snap
@@ -9,7 +9,6 @@ exports[`Input renders 1`] = `
       class="p-form__control u-clearfix"
     >
       <input
-        aria-describedby=""
         aria-invalid="false"
         class="p-form-validation__input"
         id="test-id"

diff --git a/...blePagination/TablePaginationControls/__snapshots__/TablePaginationControls.test.tsx.snap b/...blePagination/TablePaginationControls/__snapshots__/TablePaginationControls.test.tsx.snap
@@ -23,7 +23,6 @@ exports[`<TablePaginationControls /> renders table pagination controls and match
 
 exports[`<TablePaginationControls /> renders table pagination controls and matches the snapshot 2`] = `
 <input
-  aria-describedby=""
   aria-invalid="false"
   class="p-form-validation__input u-no-margin--bottom pagination-input"
   id="paginationPageInput"

diff --git a/src/components/TablePagination/__snapshots__/TablePagination.test.tsx.snap b/src/components/TablePagination/__snapshots__/TablePagination.test.tsx.snap
@@ -33,7 +33,6 @@ exports[`<TablePagination /> renders table pagination and matches the snapshot 1
       class="p-form__control u-clearfix"
     >
       <input
-        aria-describedby=""
         aria-invalid="false"
         class="p-form-validation__input u-no-margin--bottom pagination-input"
         id="paginationPageInput"