diff --git a/docs/pages/api-docs/tabs.md b/docs/pages/api-docs/tabs.md index 40789f6a8e2ac5..236545b26b6db2 100644 --- a/docs/pages/api-docs/tabs.md +++ b/docs/pages/api-docs/tabs.md @@ -29,6 +29,8 @@ The `MuiTabs` name can be used for providing [default props](/customization/glob | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | action | ref | | Callback fired when the component mounts. This is useful when you want to trigger an action programmatically. It supports two actions: `updateIndicator()` and `updateScrollButtons()` | +| aria-label | string | | The label for the Tabs as a string. | +| aria-labelledby | string | | An id or list of ids separated by a space that label the Tabs. | | centered | bool | false | If `true`, the tabs will be centered. This property is intended for large views. | | children | node | | The content of the component. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js index 3ff1ec69a9d8ac..20e84744860395 100644 --- a/packages/material-ui/src/Tabs/Tabs.js +++ b/packages/material-ui/src/Tabs/Tabs.js @@ -73,6 +73,8 @@ export const styles = (theme) => ({ const Tabs = React.forwardRef(function Tabs(props, ref) { const { + 'aria-label': ariaLabel, + 'aria-labelledby': ariaLabelledBy, action, centered = false, children: childrenProp, @@ -483,6 +485,8 @@ const Tabs = React.forwardRef(function Tabs(props, ref) { {/* The tablist isn't interactive but the tabs are */} {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
', () => { after: () => mount.cleanUp(), })); + it('can be named via `aria-label`', () => { + render(