Let aria-required be undefined if not passed (#4058)

* skips rendering aria-required attr on inputs if it 'required' prop is undefined * adds changeset * Update light-frogs-leave.md --------- Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
primer · Dec 14, 2023 · 4d841b7 · 4d841b7
1 parent 71baff3
commit 4d841b7
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 43 deletions.
diff --git a/.changeset/light-frogs-leave.md b/.changeset/light-frogs-leave.md
@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+TextInput, Textarea: Does not pass `aria-required` attribute to input or textarea if it is undefined. This fixes some tests that were breaking in dotcom.
+
+<!-- Changed components: TextInput, Textarea -->
diff --git a/src/TextInput/TextInput.tsx b/src/TextInput/TextInput.tsx
@@ -144,7 +144,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           onFocus={handleInputFocus}
           onBlur={handleInputBlur}
           type={type}
-          aria-required={required ? 'true' : 'false'}
+          aria-required={required}
           {...inputProps}
           data-component="input"
         />

diff --git a/src/Textarea/Textarea.tsx b/src/Textarea/Textarea.tsx
@@ -92,7 +92,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         <StyledTextarea
           value={value}
           resize={resize}
-          aria-required={required ? 'true' : 'false'}
+          aria-required={required}
           aria-invalid={validationStatus === 'error' ? 'true' : 'false'}
           ref={ref}
           disabled={disabled}

diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -118,7 +118,6 @@ exports[`snapshots renders a custom empty state message 1`] = `
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
-      aria-required="false"
       autoComplete="off"
       className="c2"
       data-component="input"
@@ -286,7 +285,6 @@ exports[`snapshots renders a loading state 1`] = `
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
-      aria-required="false"
       autoComplete="off"
       className="c2"
       data-component="input"
@@ -505,7 +503,6 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
-      aria-required="false"
       autoComplete="off"
       className="c2"
       data-component="input"
@@ -1278,7 +1275,6 @@ exports[`snapshots renders a multiselect input 1`] = `
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
-      aria-required="false"
       autoComplete="off"
       className="c2"
       data-component="input"
@@ -1954,7 +1950,6 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
-      aria-required="false"
       autoComplete="off"
       className="c2"
       data-component="input"
@@ -2764,7 +2759,6 @@ exports[`snapshots renders a single select input 1`] = `
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
-      aria-required="false"
       autoComplete="off"
       className="c2"
       data-component="input"
@@ -3793,7 +3787,6 @@ exports[`snapshots renders with an input value 1`] = `
       aria-expanded={false}
       aria-haspopup="listbox"
       aria-owns="autocompleteId-listbox"
-      aria-required="false"
       autoComplete="off"
       className="c2"
       data-component="input"

diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -112,7 +112,6 @@ exports[`TextInput renders 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="zipcode"
@@ -243,7 +242,6 @@ exports[`TextInput renders block 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="zipcode"
@@ -366,7 +364,6 @@ exports[`TextInput renders consistently 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     onBlur={[Function]}
@@ -489,7 +486,6 @@ exports[`TextInput renders contrast 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="zipcode"
@@ -619,7 +615,6 @@ exports[`TextInput renders error 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="zipcode"
@@ -749,7 +744,6 @@ exports[`TextInput renders large 1`] = `
   size="large"
 >
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="zipcode"
@@ -898,7 +892,6 @@ exports[`TextInput renders leadingVisual 1`] = `
     </svg>
   </span>
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="search"
@@ -1048,7 +1041,6 @@ exports[`TextInput renders leadingVisual 2`] = `
     </svg>
   </span>
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="search"
@@ -1179,7 +1171,6 @@ exports[`TextInput renders leadingVisual 3`] = `
     </div>
   </span>
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="search"
@@ -1310,7 +1301,6 @@ exports[`TextInput renders leadingVisual 4`] = `
     </div>
   </span>
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="search"
@@ -1435,7 +1425,6 @@ exports[`TextInput renders monospace 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="zipcode"
@@ -1558,7 +1547,6 @@ exports[`TextInput renders placeholder 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="zipcode"
@@ -1691,7 +1679,6 @@ exports[`TextInput renders small 1`] = `
   size="small"
 >
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="zipcode"
@@ -2308,7 +2295,6 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="search"
@@ -2748,7 +2734,6 @@ exports[`TextInput renders trailingAction text button 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="search"
@@ -3394,7 +3379,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="search"
@@ -3547,7 +3531,6 @@ exports[`TextInput renders trailingVisual 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="search"
@@ -3697,7 +3680,6 @@ exports[`TextInput renders trailingVisual 2`] = `
   onClick={[Function]}
 >
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="search"
@@ -3847,7 +3829,6 @@ exports[`TextInput renders trailingVisual 3`] = `
   onClick={[Function]}
 >
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="search"
@@ -3978,7 +3959,6 @@ exports[`TextInput renders trailingVisual 4`] = `
   onClick={[Function]}
 >
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="search"
@@ -4132,7 +4112,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <input
-      aria-required="false"
       className="c2"
       data-component="input"
       onBlur={[Function]}
@@ -4355,7 +4334,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      aria-required="false"
       className="c4"
       data-component="input"
       onBlur={[Function]}
@@ -4534,7 +4512,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <input
-      aria-required="false"
       className="c2"
       data-component="input"
       onBlur={[Function]}
@@ -4797,7 +4774,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      aria-required="false"
       className="c5"
       data-component="input"
       onBlur={[Function]}
@@ -5060,7 +5036,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      aria-required="false"
       className="c5"
       data-component="input"
       onBlur={[Function]}
@@ -5323,7 +5298,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      aria-required="false"
       className="c5"
       data-component="input"
       onBlur={[Function]}
@@ -5511,7 +5485,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <input
-      aria-required="false"
       className="c2"
       data-component="input"
       onBlur={[Function]}
@@ -5774,7 +5747,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      aria-required="false"
       className="c4"
       data-component="input"
       onBlur={[Function]}
@@ -5993,7 +5965,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
     onClick={[Function]}
   >
     <input
-      aria-required="false"
       className="c2"
       data-component="input"
       onBlur={[Function]}
@@ -6305,7 +6276,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      aria-required="false"
       className="c5"
       data-component="input"
       onBlur={[Function]}
@@ -6608,7 +6578,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      aria-required="false"
       className="c5"
       data-component="input"
       onBlur={[Function]}
@@ -6918,7 +6887,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
       </div>
     </span>
     <input
-      aria-required="false"
       className="c5"
       data-component="input"
       onBlur={[Function]}
@@ -7110,7 +7078,6 @@ exports[`TextInput should render a password input 1`] = `
   onClick={[Function]}
 >
   <input
-    aria-required="false"
     className="c2"
     data-component="input"
     name="password"

diff --git a/src/__tests__/__snapshots__/Textarea.test.tsx.snap b/src/__tests__/__snapshots__/Textarea.test.tsx.snap
@@ -85,7 +85,6 @@ exports[`Textarea renders consistently 1`] = `
 >
   <textarea
     aria-invalid="false"
-    aria-required="false"
     className="c1"
     cols={30}
     rows={7}