fix(Tabs): remove required role prop (#6964)

* fix(Tabs): remove required role prop * test(Tabs): remove role="navigation" test * docs(Tabs): update proptypes comment * chore: update snapshots Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Oct 6, 2020 · e04c7cc · e04c7cc
1 parent 6e2a519
commit e04c7cc
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 29 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -4936,7 +4936,6 @@ Map {
   },
   "Tabs" => Object {
     "defaultProps": Object {
-      "role": "navigation",
       "selected": 0,
       "selectionMode": "automatic",
       "type": "default",
@@ -4963,10 +4962,6 @@ Map {
       "onSelectionChange": Object {
         "type": "func",
       },
-      "role": Object {
-        "isRequired": true,
-        "type": "string",
-      },
       "selected": Object {
         "type": "number",
       },

diff --git a/packages/react/src/components/Tabs/Tabs-test.js b/packages/react/src/components/Tabs/Tabs-test.js
@@ -26,16 +26,6 @@ describe('Tabs', () => {
         </Tabs>
       );
 
-      it('renders [role="navigation"] props on wrapping <div> by default', () => {
-        expect(
-          wrapper
-            // TODO: uncomment and replace in next major version
-            // .find(`.${prefix}--tabs`).props().role
-            .find(`.${prefix}--tabs--scrollable .${prefix}--tabs--scrollable`)
-            .props().role
-        ).toEqual('navigation');
-      });
-
       it('renders [role="tablist"] props on <ul> by default', () => {
         expect(wrapper.find('ul').props().role).toEqual('tablist');
       });

diff --git a/packages/react/src/components/Tabs/Tabs.js b/packages/react/src/components/Tabs/Tabs.js
@@ -24,7 +24,7 @@ export default class Tabs extends React.Component {
     children: PropTypes.node,
 
     /**
-     * Provide a className that is applied to the root <nav> component for the
+     * Provide a className that is applied to the root <div> component for the
      * <Tabs>
      */
     className: PropTypes.string,
@@ -58,12 +58,6 @@ export default class Tabs extends React.Component {
      */
     onSelectionChange: PropTypes.func,
 
-    /**
-     * By default, this value is "navigation". You can also provide an alternate
-     * role if it makes sense from the accessibility-side
-     */
-    role: PropTypes.string.isRequired,
-
     /**
      * Optionally provide an index for the currently selected <Tab>
      */
@@ -86,7 +80,6 @@ export default class Tabs extends React.Component {
   };
 
   static defaultProps = {
-    role: 'navigation',
     type: 'default',
     selected: 0,
     selectionMode: 'automatic',
@@ -332,7 +325,6 @@ export default class Tabs extends React.Component {
   render() {
     const {
       className,
-      role,
       type,
       light,
       onSelectionChange,
@@ -427,11 +419,7 @@ export default class Tabs extends React.Component {
     return (
       // TODO: remove classname and revert div to React Fragment after next major release
       <div className={`${prefix}--tabs--scrollable`}>
-        <div
-          {...other}
-          className={classes.tabs}
-          role={role}
-          onScroll={this.handleScroll}>
+        <div {...other} className={classes.tabs} onScroll={this.handleScroll}>
           <button
             type="button"
             className={classes.leftOverflowButtonClasses}