Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
Co-authored-by: Matt <github@nospam.33m.co>
  • Loading branch information
3 people committed May 11, 2020
1 parent c2d5308 commit d8fd3ce
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 10 deletions.
5 changes: 2 additions & 3 deletions docs/src/pages/components/tabs/AccessibleTabs.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,11 @@ TabPanel.propTypes = {
value: PropTypes.any.isRequired,
};

const useStyles = makeStyles((theme) => ({
const useStyles = makeStyles({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
},
}));
});

export default function AccessibleTabs() {
const classes = useStyles();
Expand Down
5 changes: 2 additions & 3 deletions docs/src/pages/components/tabs/AccessibleTabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,11 @@ function TabPanel(props: TabPanelProps) {
);
}

const useStyles = makeStyles((theme: Theme) => ({
const useStyles = makeStyles({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
},
}));
});

export default function AccessibleTabs() {
const classes = useStyles();
Expand Down
8 changes: 4 additions & 4 deletions docs/src/pages/components/tabs/tabs.md
Original file line number Diff line number Diff line change
Expand Up @@ -95,19 +95,19 @@ Tab labels may be either all icons or all text.

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#tabpanel)

This section lists necessary steps to provide necessary information for assistive technology:
The following steps are needed in order to provide necessary information for assistive technologies:

1. label `Tabs` via `aria-label` or `aria-labelledby`
1. Label `Tabs` via `aria-label` or `aria-labelledby`.
2. `Tab`s need to be connected to their
corresponding `[role="tabpanel"]` by setting the correct `id`, `aria-controls` and `aria-labelledby`
corresponding `[role="tabpanel"]` by setting the correct `id`, `aria-controls` and `aria-labelledby`.

An example for the current implementation can be found in the demos on this page. We've also published an experimental API in `@material-ui/lab` that does not require
extra work.

### Keyboard navigation

The components implement keyboard navigation using the "manual activation" behavior. If you want to switch to the
"selection automatically follows focus" behavior you have pass `selectionFollowsFocus` to the `Tabs` component. The WAI-ARIA authoring practices have a detailed guide on [how to decide then to make selection automatically follow focus](https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus).
"selection automatically follows focus" behavior you have pass `selectionFollowsFocus` to the `Tabs` component. The WAI-ARIA authoring practices have a detailed guide on [how to decide when to make selection automatically follow focus](https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus).

### Demo

Expand Down

0 comments on commit d8fd3ce

Please sign in to comment.