fix(Breadcrumb): Hide SVGs from screen readers by adding `aria-hidden…

…="true"` to the `span` element that wraps the SVGs. (#1514)

Co-authored-by: Nikita Orliak <[email protected]>

.changeset/a11y-breadcrumb-hide-svg-from-screen-readers.md

@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(Breadcrumb): Hide SVGs from screen readers by adding `aria-hidden="true"` to the `span` element that wraps the SVGs.

packages/react-magma-dom/src/components/Breadcrumb/Breadcrumb.test.js

@@ -58,6 +58,19 @@ describe('Breadcrumb', () => {
     expect(getByLabelText('Test label')).toBeInTheDocument();
   });
 
+  it('should render the breadcrumb component with aria-hidden', () => {
+    const { container } = render(
+      <Breadcrumb>
+        <BreadcrumbItem to="#">{LINK_TEXT}</BreadcrumbItem>
+        <BreadcrumbItem>{SPAN_TEXT}</BreadcrumbItem>
+      </Breadcrumb>
+    );
+
+    const span = container.querySelector('span');
+
+    expect(span).toHaveAttribute('aria-hidden', 'true');
+  });
+
   describe('i18n', () => {
     it('should use the nav aria-label', () => {
       const navAriaLabel = 'test aria label';

packages/react-magma-dom/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -36,7 +36,7 @@ const StyledLink = styled.a<{ isInverse?: boolean }>`
       : props.theme.colors.neutral700};
   text-decoration: none;
   cursor: default;
-  
+
   &:hover,
   &:focus {
     color: ${props =>
@@ -82,7 +82,7 @@ export const BreadcrumbItem = React.forwardRef<
           <Hyperlink to={to} isInverse={isInverse}>
             {children}
           </Hyperlink>
-          <StyledSpan isInverse={isInverse} theme={theme}>
+          <StyledSpan isInverse={isInverse} theme={theme} aria-hidden="true">
             <ChevronRightIcon size={theme.iconSizes.small} />
           </StyledSpan>
         </>