Fix accessibility issue with ReferenceField error

marmelab · Jan 15, 2025 · 2bb4e3f · 2bb4e3f
1 parent d38453a
commit 2bb4e3f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/packages/ra-ui-materialui/src/field/ReferenceField.spec.tsx b/packages/ra-ui-materialui/src/field/ReferenceField.spec.tsx
@@ -481,7 +481,7 @@ describe('<ReferenceField />', () => {
             hidden: true,
         });
         expect(ErrorIcon).not.toBeNull();
-        expect(ErrorIcon?.getAttribute('aria-errormessage')).toBe('boo');
+        await screen.findByText('boo');
     });
 
     describe('link', () => {

diff --git a/packages/ra-ui-materialui/src/field/ReferenceField.tsx b/packages/ra-ui-materialui/src/field/ReferenceField.tsx
@@ -19,6 +19,7 @@ import { LinearProgress } from '../layout';
 import { Link } from '../Link';
 import { FieldProps } from './types';
 import { genericMemo } from './genericMemo';
+import { visuallyHidden } from '@mui/utils';
 
 /**
  * Fetch reference record, and render its representation, or delegate rendering to child component.
@@ -111,13 +112,12 @@ export const ReferenceFieldView = <
 
     if (error) {
         return (
-            <ErrorIcon
-                aria-errormessage={
-                    typeof error === 'string' ? error : error?.message
-                }
-                color="error"
-                fontSize="small"
-            />
+            <div>
+                <ErrorIcon role="presentation" color="error" fontSize="small" />
+                <span style={visuallyHidden}>
+                    {typeof error === 'string' ? error : error?.message}
+                </span>
+            </div>
         );
     }
     // We explicitly check isLoading here as the record may not have an id for the reference,