diff --git a/src/components/Tab.js b/src/components/Tab.js index 911966fae..256070a50 100644 --- a/src/components/Tab.js +++ b/src/components/Tab.js @@ -85,6 +85,7 @@ export default class Tab extends Component { aria-disabled={disabled ? 'true' : 'false'} aria-controls={panelId} tabIndex={tabIndex || (selected ? '0' : null)} + data-rttab > {children} diff --git a/src/components/UncontrolledTabs.js b/src/components/UncontrolledTabs.js index 4933a1f53..ca3cf81f2 100644 --- a/src/components/UncontrolledTabs.js +++ b/src/components/UncontrolledTabs.js @@ -13,7 +13,7 @@ function isNode(node) { // Determine if a node from event.target is a Tab element function isTabNode(node) { - return isNode(node) && node.getAttribute('role') === 'tab'; + return isNode(node) && node.getAttribute('data-rttab'); } // Determine if a tab node is disabled @@ -347,7 +347,7 @@ export default class UncontrolledTabs extends Component { let nodeAncestor = node.parentElement; do { if (nodeAncestor === this.node) return true; - if (nodeAncestor.getAttribute('data-tabs')) break; + if (nodeAncestor.getAttribute('data-rttabs')) break; nodeAncestor = nodeAncestor.parentElement; } while (nodeAncestor); @@ -383,7 +383,7 @@ export default class UncontrolledTabs extends Component { this.node = node; if (domRef) domRef(node); }} - data-tabs + data-rttabs > {this.getChildren()} diff --git a/src/components/__tests__/__snapshots__/Tab-test.js.snap b/src/components/__tests__/__snapshots__/Tab-test.js.snap index 3e15f7251..f297ca0e3 100644 --- a/src/components/__tests__/__snapshots__/Tab-test.js.snap +++ b/src/components/__tests__/__snapshots__/Tab-test.js.snap @@ -6,6 +6,7 @@ exports[` override the tabIndex if it was provided 1`] = ` aria-disabled="false" aria-selected="false" className="react-tabs__tab" + data-rttab={true} id={null} role="tab" tabIndex="0" @@ -20,6 +21,7 @@ exports[` should accept className 1`] = ` aria-disabled="false" aria-selected="false" className="foobar" + data-rttab={true} id={null} role="tab" tabIndex={null} @@ -32,6 +34,7 @@ exports[` should allow to be wrapped in higher-order-component 1`] = ` aria-disabled="false" aria-selected="false" className="react-tabs__tab" + data-rttab={true} id={null} role="tab" tabIndex={null} @@ -44,6 +47,7 @@ exports[` should have sane defaults 1`] = ` aria-disabled="false" aria-selected="false" className="react-tabs__tab" + data-rttab={true} id={null} role="tab" tabIndex={null} @@ -56,6 +60,7 @@ exports[` should not allow overriding all default properties 1`] = ` aria-disabled="false" aria-selected="false" className="react-tabs__tab" + data-rttab={true} id={null} role="tab" tabIndex={null} @@ -68,6 +73,7 @@ exports[` should pass through custom properties 1`] = ` aria-disabled="false" aria-selected="false" className="react-tabs__tab" + data-rttab={true} data-tooltip="Tooltip contents" id={null} role="tab" @@ -81,6 +87,7 @@ exports[` should support being disabled 1`] = ` aria-disabled="true" aria-selected="false" className="react-tabs__tab react-tabs__tab--disabled" + data-rttab={true} id={null} role="tab" tabIndex={null} @@ -93,6 +100,7 @@ exports[` should support being disabled with custom class name 1`] = ` aria-disabled="true" aria-selected="false" className="react-tabs__tab coolDisabled" + data-rttab={true} id={null} role="tab" tabIndex={null} @@ -105,6 +113,7 @@ exports[` should support being selected 1`] = ` aria-disabled="false" aria-selected="true" className="react-tabs__tab react-tabs__tab--selected" + data-rttab={true} id="abcd" role="tab" tabIndex="0" @@ -119,6 +128,7 @@ exports[` should support being selected with custom class 1`] = ` aria-disabled="false" aria-selected="true" className="react-tabs__tab cool" + data-rttab={true} id={null} role="tab" tabIndex="0" diff --git a/src/components/__tests__/__snapshots__/TabList-test.js.snap b/src/components/__tests__/__snapshots__/TabList-test.js.snap index b6d371ec9..a103c88f7 100644 --- a/src/components/__tests__/__snapshots__/TabList-test.js.snap +++ b/src/components/__tests__/__snapshots__/TabList-test.js.snap @@ -10,7 +10,7 @@ exports[` should accept className 1`] = ` exports[` should allow for higher order components 1`] = `
@@ -23,6 +23,7 @@ exports[` should allow for higher order components 1`] = ` aria-disabled="false" aria-selected="true" className="react-tabs__tab react-tabs__tab--selected" + data-rttab={true} id="react-tabs-12" role="tab" tabIndex="0" @@ -34,6 +35,7 @@ exports[` should allow for higher order components 1`] = ` aria-disabled="false" aria-selected="false" className="react-tabs__tab" + data-rttab={true} id="react-tabs-14" role="tab" tabIndex={null} @@ -61,7 +63,7 @@ exports[` should allow for higher order components 1`] = ` exports[` should display the custom classnames for selected and disabled tab 1`] = `
@@ -74,6 +76,7 @@ exports[` should display the custom classnames for selected and disab aria-disabled="false" aria-selected="true" className="react-tabs__tab active" + data-rttab={true} id="react-tabs-8" role="tab" tabIndex="0" @@ -85,6 +88,7 @@ exports[` should display the custom classnames for selected and disab aria-disabled="true" aria-selected="false" className="react-tabs__tab disabled" + data-rttab={true} id="react-tabs-10" role="tab" tabIndex={null} @@ -112,7 +116,7 @@ exports[` should display the custom classnames for selected and disab exports[` should display the custom classnames for selected and disabled tab specified on tabs 1`] = `
@@ -125,6 +129,7 @@ exports[` should display the custom classnames for selected and disab aria-disabled="false" aria-selected="true" className="react-tabs__tab active" + data-rttab={true} id="react-tabs-4" role="tab" tabIndex="0" @@ -136,6 +141,7 @@ exports[` should display the custom classnames for selected and disab aria-disabled="true" aria-selected="false" className="react-tabs__tab disabled" + data-rttab={true} id="react-tabs-6" role="tab" tabIndex={null} @@ -185,7 +191,7 @@ exports[` should pass through custom properties 1`] = ` exports[` should retain the default classnames for active and disabled tab 1`] = `
@@ -198,6 +204,7 @@ exports[` should retain the default classnames for active and disable aria-disabled="false" aria-selected="true" className="react-tabs__tab react-tabs__tab--selected" + data-rttab={true} id="react-tabs-0" role="tab" tabIndex="0" @@ -209,6 +216,7 @@ exports[` should retain the default classnames for active and disable aria-disabled="true" aria-selected="false" className="react-tabs__tab react-tabs__tab--disabled" + data-rttab={true} id="react-tabs-2" role="tab" tabIndex={null} diff --git a/src/components/__tests__/__snapshots__/Tabs-test.js.snap b/src/components/__tests__/__snapshots__/Tabs-test.js.snap index 6f93146c3..acdf17867 100644 --- a/src/components/__tests__/__snapshots__/Tabs-test.js.snap +++ b/src/components/__tests__/__snapshots__/Tabs-test.js.snap @@ -3,7 +3,7 @@ exports[` child props should reset ids correctly 1`] = `
    child props should reset ids correctly 1`] = ` aria-disabled="false" aria-selected="true" class="react-tabs__tab react-tabs__tab--selected" + data-rttab="true" data-testid="tab1" id="react-tabs-0" role="tab" @@ -26,6 +27,7 @@ exports[` child props should reset ids correctly 1`] = ` aria-disabled="false" aria-selected="false" class="react-tabs__tab" + data-rttab="true" data-testid="tab2" id="react-tabs-2" role="tab" @@ -37,6 +39,7 @@ exports[` child props should reset ids correctly 1`] = ` aria-disabled="false" aria-selected="false" class="react-tabs__tab" + data-rttab="true" data-testid="tab3" id="react-tabs-4" role="tab" @@ -52,6 +55,7 @@ exports[` child props should reset ids correctly 1`] = ` aria-disabled="true" aria-selected="false" class="react-tabs__tab react-tabs__tab--disabled" + data-rttab="true" data-testid="tab4" id="react-tabs-6" role="tab" @@ -95,7 +99,7 @@ exports[` child props should reset ids correctly 1`] = ` exports[` child props should reset ids correctly 2`] = `
      child props should reset ids correctly 2`] = ` aria-disabled="false" aria-selected="true" class="react-tabs__tab react-tabs__tab--selected" + data-rttab="true" data-testid="tab1" id="react-tabs-0" role="tab" @@ -118,6 +123,7 @@ exports[` child props should reset ids correctly 2`] = ` aria-disabled="false" aria-selected="false" class="react-tabs__tab" + data-rttab="true" data-testid="tab2" id="react-tabs-2" role="tab" @@ -129,6 +135,7 @@ exports[` child props should reset ids correctly 2`] = ` aria-disabled="false" aria-selected="false" class="react-tabs__tab" + data-rttab="true" data-testid="tab3" id="react-tabs-4" role="tab" @@ -144,6 +151,7 @@ exports[` child props should reset ids correctly 2`] = ` aria-disabled="true" aria-selected="false" class="react-tabs__tab react-tabs__tab--disabled" + data-rttab="true" data-testid="tab4" id="react-tabs-6" role="tab" @@ -187,7 +195,7 @@ exports[` child props should reset ids correctly 2`] = ` exports[` performance should render all tabs if forceRenderTabPanel is true 1`] = `
        performance should render all tabs if forceRenderTabPanel is t aria-disabled="false" aria-selected="true" class="react-tabs__tab react-tabs__tab--selected" + data-rttab="true" data-testid="tab1" id="react-tabs-0" role="tab" @@ -210,6 +219,7 @@ exports[` performance should render all tabs if forceRenderTabPanel is t aria-disabled="false" aria-selected="false" class="react-tabs__tab" + data-rttab="true" data-testid="tab2" id="react-tabs-2" role="tab" @@ -221,6 +231,7 @@ exports[` performance should render all tabs if forceRenderTabPanel is t aria-disabled="false" aria-selected="false" class="react-tabs__tab" + data-rttab="true" data-testid="tab3" id="react-tabs-4" role="tab" @@ -236,6 +247,7 @@ exports[` performance should render all tabs if forceRenderTabPanel is t aria-disabled="true" aria-selected="false" class="react-tabs__tab react-tabs__tab--disabled" + data-rttab="true" data-testid="tab4" id="react-tabs-6" role="tab" @@ -285,7 +297,7 @@ exports[` performance should render all tabs if forceRenderTabPanel is t exports[` props should accept className 1`] = `
          props should accept className 1`] = ` aria-disabled="false" aria-selected="true" class="react-tabs__tab react-tabs__tab--selected" + data-rttab="true" data-testid="tab1" id="react-tabs-0" role="tab" @@ -308,6 +321,7 @@ exports[` props should accept className 1`] = ` aria-disabled="false" aria-selected="false" class="react-tabs__tab" + data-rttab="true" data-testid="tab2" id="react-tabs-2" role="tab" @@ -319,6 +333,7 @@ exports[` props should accept className 1`] = ` aria-disabled="false" aria-selected="false" class="react-tabs__tab" + data-rttab="true" data-testid="tab3" id="react-tabs-4" role="tab" @@ -334,6 +349,7 @@ exports[` props should accept className 1`] = ` aria-disabled="true" aria-selected="false" class="react-tabs__tab react-tabs__tab--disabled" + data-rttab="true" data-testid="tab4" id="react-tabs-6" role="tab" @@ -377,7 +393,7 @@ exports[` props should accept className 1`] = ` exports[` props should have sane defaults 1`] = `
            props should have sane defaults 1`] = ` aria-disabled="false" aria-selected="true" class="react-tabs__tab react-tabs__tab--selected" + data-rttab="true" data-testid="tab1" id="react-tabs-0" role="tab" @@ -400,6 +417,7 @@ exports[` props should have sane defaults 1`] = ` aria-disabled="false" aria-selected="false" class="react-tabs__tab" + data-rttab="true" data-testid="tab2" id="react-tabs-2" role="tab" @@ -411,6 +429,7 @@ exports[` props should have sane defaults 1`] = ` aria-disabled="false" aria-selected="false" class="react-tabs__tab" + data-rttab="true" data-testid="tab3" id="react-tabs-4" role="tab" @@ -426,6 +445,7 @@ exports[` props should have sane defaults 1`] = ` aria-disabled="true" aria-selected="false" class="react-tabs__tab react-tabs__tab--disabled" + data-rttab="true" data-testid="tab4" id="react-tabs-6" role="tab" @@ -469,7 +489,7 @@ exports[` props should have sane defaults 1`] = ` exports[` props should honor negative defaultIndex prop 1`] = `
              props should honor negative defaultIndex prop 1`] = ` aria-disabled="false" aria-selected="false" class="react-tabs__tab" + data-rttab="true" data-testid="tab1" id="react-tabs-0" role="tab" @@ -491,6 +512,7 @@ exports[` props should honor negative defaultIndex prop 1`] = ` aria-disabled="false" aria-selected="false" class="react-tabs__tab" + data-rttab="true" data-testid="tab2" id="react-tabs-2" role="tab" @@ -502,6 +524,7 @@ exports[` props should honor negative defaultIndex prop 1`] = ` aria-disabled="false" aria-selected="false" class="react-tabs__tab" + data-rttab="true" data-testid="tab3" id="react-tabs-4" role="tab" @@ -517,6 +540,7 @@ exports[` props should honor negative defaultIndex prop 1`] = ` aria-disabled="true" aria-selected="false" class="react-tabs__tab react-tabs__tab--disabled" + data-rttab="true" data-testid="tab4" id="react-tabs-6" role="tab" @@ -558,7 +582,7 @@ exports[` props should honor negative defaultIndex prop 1`] = ` exports[` props should honor positive defaultIndex prop 1`] = `
                props should honor positive defaultIndex prop 1`] = ` aria-disabled="false" aria-selected="false" class="react-tabs__tab" + data-rttab="true" data-testid="tab1" id="react-tabs-0" role="tab" @@ -580,6 +605,7 @@ exports[` props should honor positive defaultIndex prop 1`] = ` aria-disabled="false" aria-selected="true" class="react-tabs__tab react-tabs__tab--selected" + data-rttab="true" data-testid="tab2" id="react-tabs-2" role="tab" @@ -592,6 +618,7 @@ exports[` props should honor positive defaultIndex prop 1`] = ` aria-disabled="false" aria-selected="false" class="react-tabs__tab" + data-rttab="true" data-testid="tab3" id="react-tabs-4" role="tab" @@ -607,6 +634,7 @@ exports[` props should honor positive defaultIndex prop 1`] = ` aria-disabled="true" aria-selected="false" class="react-tabs__tab react-tabs__tab--disabled" + data-rttab="true" data-testid="tab4" id="react-tabs-6" role="tab" @@ -650,7 +678,7 @@ exports[` props should honor positive defaultIndex prop 1`] = ` exports[` should allow for higher order components 1`] = `
                  should allow for higher order components 1`] = ` aria-disabled="false" aria-selected="true" class="react-tabs__tab react-tabs__tab--selected" + data-rttab="true" id="react-tabs-0" role="tab" tabindex="0" @@ -672,6 +701,7 @@ exports[` should allow for higher order components 1`] = ` aria-disabled="false" aria-selected="false" class="react-tabs__tab" + data-rttab="true" id="react-tabs-2" role="tab" > @@ -698,7 +728,7 @@ exports[` should allow for higher order components 1`] = ` exports[` should allow string children 1`] = `
                  Foo
                    should allow string children 1`] = ` aria-disabled="false" aria-selected="true" class="react-tabs__tab react-tabs__tab--selected" + data-rttab="true" id="react-tabs-0" role="tab" tabindex="0" @@ -723,6 +754,7 @@ exports[` should allow string children 1`] = ` aria-disabled="false" aria-selected="false" class="react-tabs__tab" + data-rttab="true" id="react-tabs-2" role="tab" > @@ -751,14 +783,14 @@ exports[` should allow string children 1`] = ` exports[` should not add known props to dom 1`] = `
                    `; exports[` should pass through custom properties 1`] = `
                    `; @@ -766,7 +798,7 @@ exports[` should pass through custom properties 1`] = ` exports[` validation should allow other DOM nodes 1`] = `
                    validation should allow other DOM nodes 1`] = ` aria-disabled="false" aria-selected="true" class="react-tabs__tab react-tabs__tab--selected" + data-rttab="true" id="react-tabs-0" role="tab" tabindex="0" @@ -797,6 +830,7 @@ exports[` validation should allow other DOM nodes 1`] = ` aria-disabled="false" aria-selected="false" class="react-tabs__tab" + data-rttab="true" id="react-tabs-2" role="tab" /> @@ -830,7 +864,7 @@ exports[` validation should allow other DOM nodes 1`] = ` exports[` validation should allow random order for elements 1`] = `
                    validation should allow random order for elements 1`] = ` aria-disabled="false" aria-selected="true" class="react-tabs__tab react-tabs__tab--selected" + data-rttab="true" id="react-tabs-0" role="tab" tabindex="0" @@ -860,6 +895,7 @@ exports[` validation should allow random order for elements 1`] = ` aria-disabled="false" aria-selected="false" class="react-tabs__tab" + data-rttab="true" id="react-tabs-2" role="tab" > @@ -880,7 +916,7 @@ exports[` validation should allow random order for elements 1`] = ` exports[` validation should be okay with rendering just TabList 1`] = `
                      validation should be okay with rendering just TabList 1`] = ` exports[` validation should be okay with rendering without any children 1`] = `
                      `; exports[` validation should gracefully render null 1`] = `
                        validation should gracefully render null 1`] = ` aria-disabled="false" aria-selected="true" class="react-tabs__tab react-tabs__tab--selected" + data-rttab="true" id="react-tabs-0" role="tab" tabindex="0" @@ -931,7 +968,7 @@ exports[` validation should gracefully render null 1`] = ` exports[` validation should not throw a warning when wrong element is found 1`] = `
                          validation should not throw a warning when wrong element is fo aria-disabled="false" aria-selected="true" class="react-tabs__tab react-tabs__tab--selected" + data-rttab="true" id="react-tabs-0" role="tab" tabindex="0"