Merge pull request #7178 from Sage/FE-7058

fix(flex-tile-divider): add aria-hidden attribute to hr element
Sage · Jan 24, 2025 · a49c1c0 · a49c1c0
2 parents 58041d0 + e9d1639
commit a49c1c0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/components/tile/flex-tile-divider/flex-tile-divider.component.tsx b/src/components/tile/flex-tile-divider/flex-tile-divider.component.tsx
@@ -12,7 +12,7 @@ export const FlexTileDivider = (): JSX.Element => {
       width="100vw"
       m="0px 0px -1px 0px"
     >
-      <Hr m={0} />
+      <Hr aria-hidden="true" m={0} />
     </Box>
   );
 };

diff --git a/src/components/tile/flex-tile-divider/flex-tile-divider.test.tsx b/src/components/tile/flex-tile-divider/flex-tile-divider.test.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import FlexTileDivider from "./flex-tile-divider.component";
+
+test("hr element has aria-hidden attribute set to true", () => {
+  render(<FlexTileDivider />);
+  expect(screen.getByTestId("hr")).toHaveAttribute("aria-hidden", "true");
+});