fix(switcher): wrap SwitcherDivider hr in li for a11y compliance (#20632)

nehaaprasad · heloiselui · sangeethababu9223 · web-flow · commit 9cdf8609d5e4 · 2026-05-11T17:05:07.000Z
* fix(switcher): wrap SwitcherDivider hr in li for a11y compliance * fix: remove duplicate SwitcherDivider in Header w/Actions and Switcher story * fix: override default hr styles in SwitcherDivider and restore both dividers in story * update * fix(switcher): apply className to hr element for a11y compliance * Apply suggestion from @maradwan26 Co-authored-by: Mahmoud <132728978+maradwan26@users.noreply.github.com> * test(SwitcherDivider): update hr to inside li --------- Co-authored-by: Heloise Lui <71858203+heloiselui@users.noreply.github.com> Co-authored-by: Sangeetha Babu <sangeetha9223@gmail.com> Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com> Co-authored-by: Mahmoud <132728978+maradwan26@users.noreply.github.com> Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>
diff --git a/packages/react/src/components/UIShell/SwitcherDivider.tsx b/packages/react/src/components/UIShell/SwitcherDivider.tsx
@@ -12,7 +12,7 @@ import { usePrefix } from '../../internal/usePrefix';
 
 export interface SwitcherDividerProps {
   /**
-   * Optionally provide a custom class to apply to the underlying `<li>` node
+   * Optionally provide a custom class to apply to the underlying `<hr>` node
    */
   className?: string;
 }
@@ -26,12 +26,16 @@ const SwitcherDivider = ({
     [customClassName || '']: !!customClassName,
   });
 
-  return <hr {...other} className={classNames} />;
+  return (
+    <li>
+      <hr {...other} className={classNames} />
+    </li>
+  );
 };
 
 SwitcherDivider.propTypes = {
   /**
-   * Optionally provide a custom class to apply to the underlying `<li>` node
+   * Optionally provide a custom class to apply to the underlying `<hr>` node
    */
   className: PropTypes.string,
 };
diff --git a/packages/react/src/components/UIShell/__tests__/SwitcherDivider-test.js b/packages/react/src/components/UIShell/__tests__/SwitcherDivider-test.js
@@ -11,18 +11,23 @@ import { render } from '@testing-library/react';
 
 describe('SwitcherDivider', () => {
   describe('renders as expected - Component API', () => {
-    it('should spread extra props onto outermost element', () => {
+    it('should spread extra props onto the separator element', () => {
       const { container } = render(<SwitcherDivider data-testid="test-id" />);
 
-      expect(container.firstChild).toHaveAttribute('data-testid', 'test-id');
+      // SwitcherDivider renders as `li > hr`, so assert against the separator.
+      expect(container.firstChild.firstChild).toHaveAttribute(
+        'data-testid',
+        'test-id'
+      );
     });
 
-    it('should support a custom `className` prop on the outermost element', () => {
+    it('should support a custom `className` prop on the separator element', () => {
       const { container } = render(
         <SwitcherDivider className="custom-class" />
       );
 
-      expect(container.firstChild).toHaveClass('custom-class');
+      // SwitcherDivider renders as `li > hr`, so assert against the separator.
+      expect(container.firstChild.firstChild).toHaveClass('custom-class');
     });
   });
 });
