Skip to content

Commit

Permalink
[Tabs] Improve focus management on list with no active tabs (#22377)
Browse files Browse the repository at this point in the history
Co-authored-by: Olivier Tassinari <[email protected]>
  • Loading branch information
alexmotoc and oliviertassinari authored Aug 27, 2020

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent bdc85a8 commit a7216e5
Showing 2 changed files with 15 additions and 0 deletions.
1 change: 1 addition & 0 deletions packages/material-ui/src/Tabs/Tabs.js
Original file line number Diff line number Diff line change
@@ -419,6 +419,7 @@ const Tabs = React.forwardRef(function Tabs(props, ref) {
onChange,
textColor,
value: childValue,
...(childIndex === 1 && value === false && !child.props.tabIndex ? { tabIndex: 0 } : {}),
});
});

14 changes: 14 additions & 0 deletions packages/material-ui/src/Tabs/Tabs.test.js
Original file line number Diff line number Diff line change
@@ -1066,5 +1066,19 @@ describe('<Tabs />', () => {
});
});
});

it('should allow to focus first tab when there are no active tabs', () => {
const { getAllByRole } = render(
<Tabs value={false}>
<Tab />
<Tab />
</Tabs>,
);

expect(getAllByRole('tab').map((tab) => tab.getAttribute('tabIndex'))).to.deep.equal([
'0',
'-1',
]);
});
});
});

0 comments on commit a7216e5

Please sign in to comment.