From acbec5c8d40c2f7146cedcf9fe7e07d94c478426 Mon Sep 17 00:00:00 2001
From: nikitaorliak-cengage <nikita.orliak@cengage.com>
Date: Fri, 25 Oct 2024 17:19:20 +0200
Subject: [PATCH] fix(Dropdown): Hide SVGs from screen readers by adding
 `aria-hidden="true"` to the `svg` elements. (#1515)

Co-authored-by: Nikita Orliak <nikita.orliak@nixs.com>
---
 ...y-dropdown-hide-svg-from-screen-readers.md |  5 +++
 .../Alert/__snapshots__/Alert.test.js.snap    |  1 +
 .../__snapshots__/ButtonGroup.test.js.snap    |  6 +++
 .../src/components/Dropdown/Dropdown.test.js  | 41 +++++++++++++++++--
 .../components/Dropdown/DropdownButton.tsx    |  8 ++--
 .../Dropdown/DropdownSplitButton.tsx          | 12 +++++-
 .../__snapshots__/IconButton.test.js.snap     | 12 ++++++
 .../src/components/IconButton/index.tsx       |  9 ++--
 8 files changed, 80 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/a11y-dropdown-hide-svg-from-screen-readers.md

diff --git a/.changeset/a11y-dropdown-hide-svg-from-screen-readers.md b/.changeset/a11y-dropdown-hide-svg-from-screen-readers.md
new file mode 100644
index 0000000000..d7db6ac51c
--- /dev/null
+++ b/.changeset/a11y-dropdown-hide-svg-from-screen-readers.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(Dropdown): Hide SVGs from screen readers by adding `aria-hidden="true"` to the `svg` elements.
diff --git a/packages/react-magma-dom/src/components/Alert/__snapshots__/Alert.test.js.snap b/packages/react-magma-dom/src/components/Alert/__snapshots__/Alert.test.js.snap
index b843fe336a..31bb651f6e 100644
--- a/packages/react-magma-dom/src/components/Alert/__snapshots__/Alert.test.js.snap
+++ b/packages/react-magma-dom/src/components/Alert/__snapshots__/Alert.test.js.snap
@@ -267,6 +267,7 @@ exports[`Alert Dismissible should render a dismissible icon button with the warn
     id="ignoreSvg"
   >
     <svg
+      aria-hidden="true"
       class="icon"
       fill="currentColor"
       height="20"
diff --git a/packages/react-magma-dom/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.js.snap b/packages/react-magma-dom/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.js.snap
index f11da6ffee..f62b8c178f 100644
--- a/packages/react-magma-dom/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.js.snap
+++ b/packages/react-magma-dom/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.js.snap
@@ -1377,6 +1377,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Horizontal & center alignment 1`]
               Dropdown 2
             </span>
             <svg
+              aria-hidden="true"
               class="icon"
               data-testid="caretDown"
               fill="currentColor"
@@ -1439,6 +1440,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Horizontal & center alignment 1`]
               Dropdown 3
             </span>
             <svg
+              aria-hidden="true"
               class="icon"
               data-testid="caretDown"
               fill="currentColor"
@@ -2126,6 +2128,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
               Dropdown 2
             </span>
             <svg
+              aria-hidden="true"
               class="icon"
               data-testid="caretDown"
               fill="currentColor"
@@ -2188,6 +2191,7 @@ exports[`ButtonGroup With dropdowns Snapshot: Vertical & fill alignment 1`] = `
               Dropdown 3
             </span>
             <svg
+              aria-hidden="true"
               class="icon"
               data-testid="caretDown"
               fill="currentColor"
@@ -2953,6 +2957,7 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
               Dropdown 2
             </span>
             <svg
+              aria-hidden="true"
               class="icon"
               data-testid="caretDown"
               fill="currentColor"
@@ -3015,6 +3020,7 @@ exports[`ButtonGroup With dropdowns Snapshot: noSpace 1`] = `
               Dropdown 3
             </span>
             <svg
+              aria-hidden="true"
               class="icon"
               data-testid="caretDown"
               fill="currentColor"
diff --git a/packages/react-magma-dom/src/components/Dropdown/Dropdown.test.js b/packages/react-magma-dom/src/components/Dropdown/Dropdown.test.js
index 18b2f34998..5d497bfc58 100644
--- a/packages/react-magma-dom/src/components/Dropdown/Dropdown.test.js
+++ b/packages/react-magma-dom/src/components/Dropdown/Dropdown.test.js
@@ -73,8 +73,21 @@ describe('Dropdown', () => {
     expect(getByText('FAQ')).toBeInTheDocument();
   });
 
+  it('should render the dropdown component with aria-hidden', () => {
+    const { container } = render(
+      <Dropdown>
+        <DropdownButton>Toggle me</DropdownButton>
+        <DropdownContent />
+      </Dropdown>
+    );
+
+    const svg = container.querySelector('svg');
+
+    expect(svg).toHaveAttribute('aria-hidden', 'true');
+  });
+
   it('should render a dropup', () => {
-    const { getByTestId } = render(
+    const { getByTestId, container } = render(
       <Dropdown dropDirection="up">
         <DropdownButton>Toggle me</DropdownButton>
         <DropdownContent />
@@ -82,10 +95,14 @@ describe('Dropdown', () => {
     );
 
     expect(getByTestId('caretUp')).toBeInTheDocument();
+
+    const svg = container.querySelector('svg');
+
+    expect(svg).toHaveAttribute('aria-hidden', 'true');
   });
 
   it('should render a dropleft', () => {
-    const { getByTestId } = render(
+    const { getByTestId, container } = render(
       <Dropdown dropDirection="left">
         <DropdownButton testId="dropdownButton">Toggle me</DropdownButton>
         <DropdownContent />
@@ -97,10 +114,14 @@ describe('Dropdown', () => {
       'padding-left',
       magma.spaceScale.spacing03
     );
+
+    const svg = container.querySelector('svg');
+
+    expect(svg).toHaveAttribute('aria-hidden', 'true');
   });
 
   it('should render a dropright', () => {
-    const { getByTestId } = render(
+    const { getByTestId, container } = render(
       <Dropdown dropDirection="right">
         <DropdownButton testId="dropdownButton">Toggle me</DropdownButton>
         <DropdownContent />
@@ -112,6 +133,10 @@ describe('Dropdown', () => {
       'padding-right',
       magma.spaceScale.spacing03
     );
+
+    const svg = container.querySelector('svg');
+
+    expect(svg).toHaveAttribute('aria-hidden', 'true');
   });
 
   it('should render a dropdown with a small button', () => {
@@ -156,6 +181,10 @@ describe('Dropdown', () => {
 
     expect(getByTestId('caretDown')).toBeInTheDocument();
     expect(container.querySelectorAll('button').length).toBe(2);
+
+    const svg = container.querySelector('svg');
+
+    expect(svg).toHaveAttribute('aria-hidden', 'true');
   });
 
   it('should render a split dropdown with custom label', () => {
@@ -210,7 +239,7 @@ describe('Dropdown', () => {
   });
 
   it('should render a button with custom icon', () => {
-    const { queryByTestId, getByText } = render(
+    const { queryByTestId, getByText, container } = render(
       <Dropdown>
         <DropdownButton icon={<AsteriskIcon />}>Toggle me</DropdownButton>
         <DropdownContent />
@@ -223,6 +252,10 @@ describe('Dropdown', () => {
 
     expect(queryByTestId('caretUp')).not.toBeInTheDocument();
     expect(queryByTestId('caretDown')).not.toBeInTheDocument();
+
+    const svg = container.querySelector('svg');
+
+    expect(svg).toHaveAttribute('aria-hidden', 'true');
   });
 
   it('should render a button with custom icon with specified icon position', () => {
diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownButton.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownButton.tsx
index f21e0bc584..6e47e69120 100644
--- a/packages/react-magma-dom/src/components/Dropdown/DropdownButton.tsx
+++ b/packages/react-magma-dom/src/components/Dropdown/DropdownButton.tsx
@@ -94,14 +94,14 @@ export const DropdownButton = React.forwardRef<
   function getButtonIcon(dropDirection: DropdownDropDirection) {
     switch (dropDirection) {
       case DropdownDropDirection.left:
-        return <ArrowLeftIcon testId="caretLeft" />;
+        return <ArrowLeftIcon testId="caretLeft" aria-hidden="true" />;
       case DropdownDropDirection.right:
-        return <ArrowRightIcon testId="caretRight" />;
+        return <ArrowRightIcon testId="caretRight" aria-hidden="true" />;
       case DropdownDropDirection.up:
-        return <ArrowDropUpIcon testId="caretUp" />;
+        return <ArrowDropUpIcon testId="caretUp" aria-hidden="true" />;
 
       default:
-        return <ArrowDropDownIcon testId="caretDown" />;
+        return <ArrowDropDownIcon testId="caretDown" aria-hidden="true" />;
     }
   }
 
diff --git a/packages/react-magma-dom/src/components/Dropdown/DropdownSplitButton.tsx b/packages/react-magma-dom/src/components/Dropdown/DropdownSplitButton.tsx
index 45e9abf89b..4b1aa11911 100644
--- a/packages/react-magma-dom/src/components/Dropdown/DropdownSplitButton.tsx
+++ b/packages/react-magma-dom/src/components/Dropdown/DropdownSplitButton.tsx
@@ -64,9 +64,17 @@ export const DropdownSplitButton = React.forwardRef<
 
   const buttonIcon =
     resolvedContext.dropDirection === DropdownDropDirection.up ? (
-      <ArrowDropUpIcon size={theme.iconSizes.medium} testId="caretUp" />
+      <ArrowDropUpIcon
+        size={theme.iconSizes.medium}
+        testId="caretUp"
+        aria-hidden="true"
+      />
     ) : (
-      <ArrowDropDownIcon size={theme.iconSizes.medium} testId="caretDown" />
+      <ArrowDropDownIcon
+        size={theme.iconSizes.medium}
+        testId="caretDown"
+        aria-hidden="true"
+      />
     );
 
   function handleClick(event: React.SyntheticEvent) {
diff --git a/packages/react-magma-dom/src/components/IconButton/__snapshots__/IconButton.test.js.snap b/packages/react-magma-dom/src/components/IconButton/__snapshots__/IconButton.test.js.snap
index a46f9a6567..a01bd4dd62 100644
--- a/packages/react-magma-dom/src/components/IconButton/__snapshots__/IconButton.test.js.snap
+++ b/packages/react-magma-dom/src/components/IconButton/__snapshots__/IconButton.test.js.snap
@@ -216,6 +216,7 @@ exports[`IconButton Icon Only Button Snapshot should render with large size 1`]
       class="emotion-2 emotion-3"
     >
       <svg
+        aria-hidden="true"
         class="icon"
         fill="currentColor"
         height="32"
@@ -449,6 +450,7 @@ exports[`IconButton Icon Only Button Snapshot should render with small size 1`]
       class="emotion-2 emotion-3"
     >
       <svg
+        aria-hidden="true"
         class="icon"
         fill="currentColor"
         height="20"
@@ -682,6 +684,7 @@ exports[`IconButton Icon Only Button Snapshot should render with updated color 1
       class="emotion-2 emotion-3"
     >
       <svg
+        aria-hidden="true"
         class="icon"
         fill="currentColor"
         height="24"
@@ -915,6 +918,7 @@ exports[`IconButton Icon Only Button Snapshot should render with updated shape 1
       class="emotion-2 emotion-3"
     >
       <svg
+        aria-hidden="true"
         class="icon"
         fill="currentColor"
         height="24"
@@ -1148,6 +1152,7 @@ exports[`IconButton Icon Only Button Snapshot should render with updated variant
       class="emotion-2 emotion-3"
     >
       <svg
+        aria-hidden="true"
         class="icon"
         fill="currentColor"
         height="24"
@@ -1372,6 +1377,7 @@ exports[`IconButton Icon With Text Button Snapshot should render with large size
         Test Text
       </span>
       <svg
+        aria-hidden="true"
         class="icon"
         fill="currentColor"
         height="32"
@@ -1596,6 +1602,7 @@ exports[`IconButton Icon With Text Button Snapshot should render with medium siz
         Test Text
       </span>
       <svg
+        aria-hidden="true"
         class="icon"
         fill="currentColor"
         height="24"
@@ -1820,6 +1827,7 @@ exports[`IconButton Icon With Text Button Snapshot should render with small size
         Test Text
       </span>
       <svg
+        aria-hidden="true"
         class="icon"
         fill="currentColor"
         height="20"
@@ -2044,6 +2052,7 @@ exports[`IconButton Icon With Text Button Snapshot should render with updated co
         Test Text
       </span>
       <svg
+        aria-hidden="true"
         class="icon"
         fill="currentColor"
         height="24"
@@ -2268,6 +2277,7 @@ exports[`IconButton Icon With Text Button Snapshot should render with updated sh
         Test Text
       </span>
       <svg
+        aria-hidden="true"
         class="icon"
         fill="currentColor"
         height="24"
@@ -2492,6 +2502,7 @@ exports[`IconButton Icon With Text Button Snapshot should render with updated te
         Test Text
       </span>
       <svg
+        aria-hidden="true"
         class="icon"
         fill="currentColor"
         height="24"
@@ -2716,6 +2727,7 @@ exports[`IconButton Icon With Text Button Snapshot should render with updated va
         Test Text
       </span>
       <svg
+        aria-hidden="true"
         class="icon"
         fill="currentColor"
         height="24"
diff --git a/packages/react-magma-dom/src/components/IconButton/index.tsx b/packages/react-magma-dom/src/components/IconButton/index.tsx
index beb6b2f7e1..2d6ae739d9 100644
--- a/packages/react-magma-dom/src/components/IconButton/index.tsx
+++ b/packages/react-magma-dom/src/components/IconButton/index.tsx
@@ -93,7 +93,8 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
     const contextProps = React.useContext(ButtonGroupContext);
     const theme = React.useContext(ThemeContext);
     const resolvedProps = resolveProps(contextProps, props);
-    const { color, shape, size, testId, textTransform, variant, ...rest } = resolvedProps;
+    const { color, shape, size, testId, textTransform, variant, ...rest } =
+      resolvedProps;
 
     if (instanceOfIconOnly(resolvedProps)) {
       icon = resolvedProps.icon;
@@ -125,6 +126,7 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
               size: icon.props.size
                 ? icon.props.size
                 : getIconSize(size, theme),
+              'aria-hidden': 'true',
             })
           )}
         </StyledButton>
@@ -139,9 +141,7 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
         shape={shape || ButtonShape.fill}
         size={size || ButtonSize.medium}
         testId={testId}
-        textTransform={
-          textTransform || ButtonTextTransform.uppercase
-        }
+        textTransform={textTransform || ButtonTextTransform.uppercase}
         variant={variant || ButtonVariant.solid}
       >
         {iconPosition === ButtonIconPosition.right && (
@@ -153,6 +153,7 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
           React.cloneElement(icon, {
             size: icon.props.size || getIconSize(size, theme),
             'data-testid': `${testId}-icon`,
+            'aria-hidden': 'true',
           })
         )}
         {iconPosition !== ButtonIconPosition.right && (