From 4d841b776eadd468dfd8cd63c0b0a17804c51f97 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Thu, 14 Dec 2023 07:25:13 -0500
Subject: [PATCH] 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>
---
 .changeset/light-frogs-leave.md               |  7 ++++
 src/TextInput/TextInput.tsx                   |  2 +-
 src/Textarea/Textarea.tsx                     |  2 +-
 .../__snapshots__/Autocomplete.test.tsx.snap  |  7 ----
 .../__snapshots__/TextInput.test.tsx.snap     | 33 -------------------
 .../__snapshots__/Textarea.test.tsx.snap      |  1 -
 6 files changed, 9 insertions(+), 43 deletions(-)
 create mode 100644 .changeset/light-frogs-leave.md

diff --git a/.changeset/light-frogs-leave.md b/.changeset/light-frogs-leave.md
new file mode 100644
index 00000000000..4351a1c1c5a
--- /dev/null
+++ 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
index 5250f510b6e..fe0848446ea 100644
--- 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
index 669e595c7d5..944d2715c25 100644
--- 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
index 11df12386a1..74982962b7d 100644
--- 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
index 63eaeab5e13..e891006f9dd 100644
--- 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
index db666d23df8..198752d7241 100644
--- 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}