diff --git a/packages/react/src/components/Tab/Tab.js b/packages/react/src/components/Tab/Tab.js index b6d56ae7269f..68b3862159f8 100644 --- a/packages/react/src/components/Tab/Tab.js +++ b/packages/react/src/components/Tab/Tab.js @@ -10,9 +10,10 @@ import React from 'react'; import classNames from 'classnames'; import { settings } from 'carbon-components'; import deprecate from '../../prop-types/deprecate'; +import setupGetInstanceId from '../../tools/setupGetInstanceId'; const { prefix } = settings; - +const getInstanceId = setupGetInstanceId(); export default class Tab extends React.Component { static propTypes = { /** @@ -105,9 +106,11 @@ export default class Tab extends React.Component { onKeyDown: () => {}, }; + tabId = this.props.id || `tab-${getInstanceId()}`; + render() { const { - id, + id, // eslint-disable-line no-unused-vars className, handleTabClick, handleTabKeyDown, @@ -143,8 +146,8 @@ export default class Tab extends React.Component { const buttonProps = { ['aria-selected']: selected, ['aria-disabled']: disabled, - ['aria-controls']: `${id}__panel`, - id, + ['aria-controls']: `${this.tabId}__panel`, + id: this.tabId, // TODO: remove scrollable in next major release // className: `${prefix}--tabs__nav-link`, className: `${prefix}--tabs--scrollable__nav-link`, diff --git a/packages/react/src/components/Tabs/Tabs-story.js b/packages/react/src/components/Tabs/Tabs-story.js index ecdbdcaef938..d1d9b5092787 100644 --- a/packages/react/src/components/Tabs/Tabs-story.js +++ b/packages/react/src/components/Tabs/Tabs-story.js @@ -122,23 +122,22 @@ export default { export const Default = () => (
- +

Content for first tab goes here.

- +

Content for second tab goes here.

- +

Content for third tab goes here.

(
- }> + }>

Content for fifth tab goes here.

@@ -180,18 +176,17 @@ export const Container = () => ( props.tabs().light ? 'container-tabs-story-wrapper--light' : null }> - +

Content for first tab goes here.

- +

Content for second tab goes here.

( - }> + }>

Content for fourth tab goes here.