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.
Content for first tab goes here.
Content for second tab goes here.
Content for fourth tab goes here.