From f885d590677618c5a31460e454c30f9947f1825e Mon Sep 17 00:00:00 2001
From: nikitaorliak-cengage <nikita.orliak@cengage.com>
Date: Fri, 25 Oct 2024 15:26:15 +0200
Subject: [PATCH] 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 <nikita.orliak@nixs.com>
---
 .../a11y-breadcrumb-hide-svg-from-screen-readers.md |  5 +++++
 .../src/components/Breadcrumb/Breadcrumb.test.js    | 13 +++++++++++++
 .../src/components/Breadcrumb/BreadcrumbItem.tsx    |  4 ++--
 3 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/a11y-breadcrumb-hide-svg-from-screen-readers.md

diff --git a/.changeset/a11y-breadcrumb-hide-svg-from-screen-readers.md b/.changeset/a11y-breadcrumb-hide-svg-from-screen-readers.md
new file mode 100644
index 0000000000..d855e6b227
--- /dev/null
+++ b/.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.
diff --git a/packages/react-magma-dom/src/components/Breadcrumb/Breadcrumb.test.js b/packages/react-magma-dom/src/components/Breadcrumb/Breadcrumb.test.js
index 2b979c92c3..e1f810deea 100644
--- a/packages/react-magma-dom/src/components/Breadcrumb/Breadcrumb.test.js
+++ b/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';
diff --git a/packages/react-magma-dom/src/components/Breadcrumb/BreadcrumbItem.tsx b/packages/react-magma-dom/src/components/Breadcrumb/BreadcrumbItem.tsx
index fcf16831cb..785b24daf8 100644
--- a/packages/react-magma-dom/src/components/Breadcrumb/BreadcrumbItem.tsx
+++ b/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>
         </>