[TextField] Use aria-hidden on required asterisk (#20742)

mui · Apr 25, 2020 · 260c596 · 260c596
1 parent 906fe3d
commit 260c596
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/packages/material-ui/src/FormLabel/FormLabel.js b/packages/material-ui/src/FormLabel/FormLabel.js
@@ -89,6 +89,7 @@ const FormLabel = React.forwardRef(function FormLabel(props, ref) {
       {children}
       {fcs.required && (
         <span
+          aria-hidden
           className={clsx(classes.asterisk, {
             [classes.error]: fcs.error,
           })}

diff --git a/packages/material-ui/src/FormLabel/FormLabel.test.js b/packages/material-ui/src/FormLabel/FormLabel.test.js
@@ -27,11 +27,12 @@ describe('<FormLabel />', () => {
   }));
 
   describe('prop: required', () => {
-    it('should show an asterisk if required is set', () => {
+    it('should visually show an asterisk but not include it in the a11y tree', () => {
       const { container } = render(<FormLabel required>name</FormLabel>);
 
       expect(container.querySelector('label')).to.have.text('name\u2009*');
       expect(container.querySelectorAll(`.${classes.asterisk}`)).to.have.lengthOf(1);
+      expect(container.querySelectorAll(`.${classes.asterisk}`)[0]).toBeAriaHidden();
     });
 
     it('should not show an asterisk by default', () => {
@@ -48,6 +49,7 @@ describe('<FormLabel />', () => {
 
       expect(container.querySelectorAll(`.${classes.asterisk}`)).to.have.lengthOf(1);
       expect(container.querySelector(`.${classes.asterisk}`)).to.have.class(classes.error);
+      expect(container.querySelectorAll(`.${classes.asterisk}`)[0]).toBeAriaHidden();
       expect(container.firstChild).to.have.class(classes.error);
     });
   });