[material-ui][Divider] Add aria-orientation (#43241)

mui · Aug 15, 2024 · 902bb70 · 902bb70
1 parent 5fefa49
commit 902bb70
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 18 deletions.
diff --git a/docs/data/material/components/dividers/VerticalDividerMiddle.js b/docs/data/material/components/dividers/VerticalDividerMiddle.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Card from '@mui/material/Card';
-import Divider from '@mui/material/Divider';
+import Divider, { dividerClasses } from '@mui/material/Divider';
 import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
 import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
 import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
@@ -16,7 +16,7 @@ export default function VerticalDividerMiddle() {
         '& svg': {
           m: 1,
         },
-        '& hr': {
+        [`& .${dividerClasses.root}`]: {
           mx: 0.5,
         },
       }}

diff --git a/docs/data/material/components/dividers/VerticalDividerMiddle.tsx b/docs/data/material/components/dividers/VerticalDividerMiddle.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Card from '@mui/material/Card';
-import Divider from '@mui/material/Divider';
+import Divider, { dividerClasses } from '@mui/material/Divider';
 import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
 import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
 import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
@@ -16,7 +16,7 @@ export default function VerticalDividerMiddle() {
         '& svg': {
           m: 1,
         },
-        '& hr': {
+        [`& .${dividerClasses.root}`]: {
           mx: 0.5,
         },
       }}

diff --git a/docs/data/material/components/dividers/VerticalDividers.js b/docs/data/material/components/dividers/VerticalDividers.js
@@ -4,7 +4,7 @@ import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
 import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
 import FormatBoldIcon from '@mui/icons-material/FormatBold';
 import Box from '@mui/material/Box';
-import Divider from '@mui/material/Divider';
+import Divider, { dividerClasses } from '@mui/material/Divider';
 
 export default function VerticalDividers() {
   return (
@@ -20,7 +20,7 @@ export default function VerticalDividers() {
         '& svg': {
           m: 1,
         },
-        '& hr': {
+        [`& .${dividerClasses.root}`]: {
           mx: 0.5,
         },
       }}

diff --git a/docs/data/material/components/dividers/VerticalDividers.tsx b/docs/data/material/components/dividers/VerticalDividers.tsx
@@ -4,7 +4,7 @@ import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
 import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
 import FormatBoldIcon from '@mui/icons-material/FormatBold';
 import Box from '@mui/material/Box';
-import Divider from '@mui/material/Divider';
+import Divider, { dividerClasses } from '@mui/material/Divider';
 
 export default function VerticalDividers() {
   return (
@@ -20,7 +20,7 @@ export default function VerticalDividers() {
         '& svg': {
           m: 1,
         },
-        '& hr': {
+        [`& .${dividerClasses.root}`]: {
           mx: 0.5,
         },
       }}

diff --git a/docs/data/material/components/dividers/dividers.md b/docs/data/material/components/dividers/dividers.md
@@ -32,7 +32,7 @@ The Divider component supports three variants: `fullWidth` (default), `inset`, a
 
 ### Orientation
 
-Use the `orientation` prop to change the Divider from horizontal to vertical.
+Use the `orientation` prop to change the Divider from horizontal to vertical. When using vertical orientation, the Divider renders a `<div>` with the corresponding accessibility attributes instead of `<hr>` to adhere to the WAI-ARIA [spec](https://www.w3.org/TR/wai-aria-1.2/#separator).
 
 {{"demo": "VerticalDividers.js", "bg": true}}
 

diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -186,6 +186,22 @@ export default function ChipExample() {
 }
 ```
 
+### Divider
+
+When using vertical orientation, the Divider now renders a `<div>` with the corresponding accessibility attributes instead of `<hr>` to adhere to [the WAI-ARIA spec](https://www.w3.org/TR/wai-aria-1.2/#separator). You might need to adjust your styles accordingly if you are targeting `hr` tags in your CSS.
+
+```diff
+-import Divider from '@mui/material/Divider';
++import Divider, { dividerClasses } from '@mui/material/Divider';
+
+ const Main = styled.main({
+-  '& hr': {
++  [`& .${dividerClasses.root}`]: {
+     marginTop: '16px',
+   },
+ });
+```
+
 ### Loading Button
 
 The `children` passed to the Loading Button component is now wrapped in a `<span>` tag to avoid [issues](https://github.com/mui/material-ui/issues/27853) when using tools to translate websites.

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');
     });
   });
 });