Add aria-orientation to Divider

mui · Aug 9, 2024 · cde7379 · cde7379
1 parent 193bd6b
commit cde7379
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 13 deletions.
diff --git a/docs/data/material/components/dividers/VerticalDividerMiddle.js b/docs/data/material/components/dividers/VerticalDividerMiddle.js
@@ -16,7 +16,7 @@ export default function VerticalDividerMiddle() {
         '& svg': {
           m: 1,
         },
-        '& hr': {
+        '& .MuiDivider-root': {
           mx: 0.5,
         },
       }}

diff --git a/docs/data/material/components/dividers/VerticalDividerMiddle.tsx b/docs/data/material/components/dividers/VerticalDividerMiddle.tsx
@@ -16,7 +16,7 @@ export default function VerticalDividerMiddle() {
         '& svg': {
           m: 1,
         },
-        '& hr': {
+        '& .MuiDivider-root': {
           mx: 0.5,
         },
       }}

diff --git a/docs/data/material/components/dividers/VerticalDividers.js b/docs/data/material/components/dividers/VerticalDividers.js
@@ -20,7 +20,7 @@ export default function VerticalDividers() {
         '& svg': {
           m: 1,
         },
-        '& hr': {
+        '& .MuiDivider-root': {
           mx: 0.5,
         },
       }}

diff --git a/docs/data/material/components/dividers/VerticalDividers.tsx b/docs/data/material/components/dividers/VerticalDividers.tsx
@@ -20,7 +20,7 @@ export default function VerticalDividers() {
         '& svg': {
           m: 1,
         },
-        '& hr': {
+        '& .MuiDivider-root': {
           mx: 0.5,
         },
       }}

diff --git a/packages/mui-material/src/Divider/Divider.js b/packages/mui-material/src/Divider/Divider.js
@@ -224,10 +224,10 @@ const Divider = React.forwardRef(function Divider(inProps, ref) {
     absolute = false,
     children,
     className,
-    component = children ? 'div' : 'hr',
+    orientation = 'horizontal',
+    component = children || orientation === 'vertical' ? 'div' : 'hr',
     flexItem = false,
     light = false,
-    orientation = 'horizontal',
     role = component !== 'hr' ? 'separator' : undefined,
     textAlign = 'center',
     variant = 'fullWidth',
@@ -255,6 +255,11 @@ const Divider = React.forwardRef(function Divider(inProps, ref) {
       role={role}
       ref={ref}
       ownerState={ownerState}
+      aria-orientation={
+        role === 'separator' && (component !== 'hr' || orientation === 'vertical')
+          ? orientation
+          : undefined
+      }
       {...other}
     >
       {children ? (

diff --git a/packages/mui-material/src/Divider/Divider.test.js b/packages/mui-material/src/Divider/Divider.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui/internal-test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { styled } from '@mui/material/styles';
 import Divider, { dividerClasses as classes } from '@mui/material/Divider';
 import describeConformance from '../../test/describeConformance';
@@ -165,19 +165,29 @@ describe('<Divider />', () => {
 
   describe('role', () => {
     it('avoids adding implicit aria semantics', () => {
-      const { container } = render(<Divider />);
-      expect(container.firstChild).not.to.have.attribute('role');
+      render(<Divider />);
+      expect(screen.getByRole('separator')).not.to.have.attribute('role');
+      expect(screen.getByRole('separator')).not.to.have.attribute('aria-orientation');
     });
 
     it('adds a proper role if none is specified', () => {
-      const { container } = render(<Divider component="div" />);
-      expect(container.firstChild).to.have.attribute('role', 'separator');
+      render(<Divider component="div" />);
+      expect(screen.getByRole('separator')).not.to.equal(null);
+      expect(screen.getByRole('separator')).to.have.attribute('aria-orientation');
+    });
+
+    it('adds a proper role with vertical orientation', () => {
+      render(<Divider orientation="vertical" />);
+      expect(screen.getByRole('separator')).not.to.equal(null);
+      expect(screen.getByRole('separator')).to.have.attribute('aria-orientation');
     });
 
     it('overrides the computed role with the provided one', () => {
       // presentation is the only valid aria role
-      const { container } = render(<Divider role="presentation" />);
-      expect(container.firstChild).to.have.attribute('role', 'presentation');
+      render(<Divider role="presentation" data-testid="divider" />);
+      expect(screen.queryByRole('separator')).to.equal(null);
+      expect(screen.getByTestId('divider')).to.have.attribute('role', 'presentation');
+      expect(screen.getByTestId('divider')).not.to.have.attribute('aria-orientation');
     });
   });
 });