From 545612c3d6aa8df1915675952eafd9a8bd98a46b Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 17 Jun 2019 10:18:04 +0200
Subject: [PATCH] [Divider] Add aria role if it's not implicit (#16256)

* [Divider] Add aria role if it's not implicit

* Better name for role override test
---
 packages/material-ui/src/Divider/Divider.js    | 10 ++++++----
 .../material-ui/src/Divider/Divider.test.js    | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js
index b36bf954eb647d..654b295439331a 100644
--- a/packages/material-ui/src/Divider/Divider.js
+++ b/packages/material-ui/src/Divider/Divider.js
@@ -42,14 +42,11 @@ const Divider = React.forwardRef(function Divider(props, ref) {
     className,
     component: Component = 'hr',
     light = false,
+    role = Component !== 'hr' ? 'separator' : undefined,
     variant = 'fullWidth',
     ...other
   } = props;
 
-  if (Component === 'li' && !other.role) {
-    other.role = 'separator';
-  }
-
   return (
     <Component
       className={clsx(
@@ -62,6 +59,7 @@ const Divider = React.forwardRef(function Divider(props, ref) {
         },
         className,
       )}
+      role={role}
       ref={ref}
       {...other}
     />
@@ -91,6 +89,10 @@ Divider.propTypes = {
    * If `true`, the divider will have a lighter color.
    */
   light: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  role: PropTypes.string,
   /**
    *  The variant to use.
    */
diff --git a/packages/material-ui/src/Divider/Divider.test.js b/packages/material-ui/src/Divider/Divider.test.js
index 64f136f39b3b97..7b92499316dfa3 100644
--- a/packages/material-ui/src/Divider/Divider.test.js
+++ b/packages/material-ui/src/Divider/Divider.test.js
@@ -65,4 +65,22 @@ describe('<Divider />', () => {
       });
     });
   });
+
+  describe('role', () => {
+    it('avoids adding implicit aria semantics', () => {
+      const wrapper = mount(<Divider />);
+      assert.strictEqual(wrapper.find('hr').props().role, undefined);
+    });
+
+    it('adds a proper role if none is specified', () => {
+      const wrapper = mount(<Divider component="div" />);
+      assert.strictEqual(wrapper.find('div').props().role, 'separator');
+    });
+
+    it('overrides the computed role with the provided one', () => {
+      // presentation is the only valid aria role
+      const wrapper = mount(<Divider role="presentation" />);
+      assert.strictEqual(wrapper.find('hr').props().role, 'presentation');
+    });
+  });
 });