Merge pull request #6924 from Sage/aria-hidden-vertical-divider

feat(vertical-divider): add aria-hidden prop but prevent overriding when in menu
Sage · Aug 30, 2024 · ea98eb6 · ea98eb6
2 parents a16b186 + 7da78ff
commit ea98eb6
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 3 deletions.
diff --git a/src/components/menu/__internal__/menu.context.tsx b/src/components/menu/__internal__/menu.context.tsx
@@ -5,7 +5,7 @@ export type MenuType = "light" | "dark" | "white" | "black";
 export interface MenuContextProps {
   menuType: MenuType;
   openSubmenuId: string | null;
-  inMenu: boolean;
+  inMenu?: boolean;
   inFullscreenView?: boolean;
   setOpenSubmenuId: (id: string | null) => void;
   registerItem?: (id: string) => void;
@@ -15,7 +15,6 @@ export interface MenuContextProps {
 
 export default React.createContext<MenuContextProps>({
   menuType: "light",
-  inMenu: false,
   openSubmenuId: null,
   setOpenSubmenuId: /* istanbul ignore next */ () => {},
 });
diff --git a/src/components/vertical-divider/vertical-divider.component.tsx b/src/components/vertical-divider/vertical-divider.component.tsx
@@ -117,13 +117,19 @@ export interface VerticalDividerProps extends SpaceProps {
   displayInline?: boolean;
   /** Custom tint of the divider, the supported rage is 1-100 */
   tint?: TintRange;
+  /**
+   * Set the divider to be hidden from screen readers.
+   * Please note that this cannot be overridden when inside a Menu.
+   * */
+  "aria-hidden"?: boolean;
 }
 
 export const VerticalDivider = ({
   h,
   height,
   displayInline = false,
   tint = 80,
+  "aria-hidden": ariaHidden,
   ...props
 }: VerticalDividerProps): JSX.Element => {
   const { inMenu } = useContext(MenuContext);
@@ -137,7 +143,7 @@ export const VerticalDivider = ({
       displayInline={displayInline}
       {...props}
       as={inMenu ? "li" : "div"}
-      aria-hidden={!!inMenu}
+      aria-hidden={inMenu ?? ariaHidden}
     >
       <StyledDivider data-role="divider" tint={tint} />
     </StyledVerticalWrapper>

diff --git a/src/components/vertical-divider/vertical-divider.test.tsx b/src/components/vertical-divider/vertical-divider.test.tsx
@@ -61,3 +61,28 @@ test("should render as an `li` element with `aria-hidden` when inside a Menu", (
   expect(verticalDividerElement.tagName).toEqual("LI");
   expect(verticalDividerElement).toHaveAttribute("aria-hidden", "true");
 });
+
+test("should allow the `aria-hidden` attribute to be set when not in a menu", () => {
+  render(<VerticalDivider aria-hidden />);
+  const verticalDividerElement = screen.getByTestId("vertical-divider");
+
+  expect(verticalDividerElement).toHaveAttribute("aria-hidden", "true");
+});
+
+test("should not allow the `aria-hidden` attribute to be overridden when in a menu", () => {
+  render(
+    <MenuContext.Provider
+      value={{
+        menuType: "light",
+        inMenu: true,
+        openSubmenuId: null,
+        setOpenSubmenuId: () => {},
+      }}
+    >
+      <VerticalDivider aria-hidden={false} />
+    </MenuContext.Provider>
+  );
+  const verticalDividerElement = screen.getByTestId("vertical-divider");
+
+  expect(verticalDividerElement).toHaveAttribute("aria-hidden", "true");
+});