[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

@@ -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.
    */

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