Remove aria-hidden=true from spans with required asterisk (#3320) (#3439

) * Remove aria-hidden=true from spans with required asterisk * Create pink-beds-fetch.md --------- Co-authored-by: Cole Bemis <colebemis@github.com>
primer · Jun 28, 2023 · 5b0f6b5 · 5b0f6b5
1 parent d59d9cb
commit 5b0f6b5
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/.changeset/pink-beds-fetch.md b/.changeset/pink-beds-fetch.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Remove `aria-hidden=true` from `span`s with required asterisk
diff --git a/src/__tests__/deprecated/InputField.test.tsx b/src/__tests__/deprecated/InputField.test.tsx
@@ -6,6 +6,7 @@ import InputField from '../../deprecated/InputField'
 expect.extend(toHaveNoViolations)
 
 const TEXTINPUTFIELD_LABEL_TEXT = 'Name'
+const TEXTINPUTFIELD_LABEL_TEXT_WITH_ASTERISK = 'Name *'
 const TEXTINPUTFIELD_CAPTION_TEXT = 'Hint: your first name'
 const TEXTINPUTFIELD_SUCCESS_TEXT = 'This name is valid'
 const TEXTINPUTFIELD_ERROR_TEXT = 'This name is invalid'
@@ -66,7 +67,7 @@ describe('InputField', () => {
         </SSRProvider>,
       )
 
-      const input = getByRole('textbox', {name: TEXTINPUTFIELD_LABEL_TEXT})
+      const input = getByRole('textbox', {name: TEXTINPUTFIELD_LABEL_TEXT_WITH_ASTERISK})
 
       expect(input.getAttribute('required')).not.toBeNull()
     })

diff --git a/src/internal/components/InputLabel.tsx b/src/internal/components/InputLabel.tsx
@@ -55,7 +55,7 @@ const InputLabel: React.FC<React.PropsWithChildren<Props>> = ({
       {required ? (
         <Box display="flex" as="span">
           <Box mr={1}>{children}</Box>
-          <span aria-hidden="true">*</span>
+          <span>*</span>
         </Box>
       ) : (
         children