fix(forms): ensure Message validation icon has a role of "img" (#1888)

zendeskgarden · Aug 15, 2024 · cf568a7 · cf568a7
1 parent 052c7cd
commit cf568a7
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/packages/forms/src/elements/common/Message.spec.tsx b/packages/forms/src/elements/common/Message.spec.tsx
@@ -110,6 +110,7 @@ describe('Message', () => {
 
       expect(getByText(text).firstChild!.nodeName).toBe('svg');
       expect(getByText(text).firstChild).toHaveAttribute('aria-label', validationLabel);
+      expect(getByText(text).firstChild).toHaveAttribute('role', 'img');
     });
   });
 });
diff --git a/packages/forms/src/styled/common/StyledMessageIcon.ts b/packages/forms/src/styled/common/StyledMessageIcon.ts
@@ -42,7 +42,8 @@ interface IStyledMessageIconProps {
 export const StyledMessageIcon = styled(MessageIcon).attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
-  'aria-hidden': null
+  'aria-hidden': null,
+  role: 'img'
 })<IStyledMessageIconProps>`
   width: ${props => props.theme.iconSizes.md};
   height: ${props => props.theme.iconSizes.md};