Skip to content

Commit

Permalink
[base] Make invisible elements untabbable in TrapFocus when they are …
Browse files Browse the repository at this point in the history
…irrelevant (#33380)
  • Loading branch information
EthanStandel committed Jul 17, 2022
1 parent 49663a8 commit 53582fe
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 3 deletions.
11 changes: 8 additions & 3 deletions packages/mui-base/src/TrapFocus/TrapFocus.js
Original file line number Diff line number Diff line change
Expand Up @@ -325,13 +325,18 @@ function TrapFocus(props) {
return (
<React.Fragment>
<div
tabIndex={0}
tabIndex={open ? 0 : -1}
onFocus={handleFocusSentinel}
ref={sentinelStart}
data-test="sentinelStart"
data-testid="sentinelStart"
/>
{React.cloneElement(children, { ref: handleRef, onFocus })}
<div tabIndex={0} onFocus={handleFocusSentinel} ref={sentinelEnd} data-test="sentinelEnd" />
<div
tabIndex={open ? 0 : -1}
onFocus={handleFocusSentinel}
ref={sentinelEnd}
data-testid="sentinelEnd"
/>
</React.Fragment>
);
}
Expand Down
22 changes: 22 additions & 0 deletions packages/mui-base/src/TrapFocus/TrapFocus.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,28 @@ describe('<TrapFocus />', () => {
expect(screen.getByTestId('root')).toHaveFocus();
});

it('does not allow sentinelStart or sentinelEnd to be tabbable until open={true}', () => {
function Test(props) {
return (
<TrapFocus open {...props}>
<div tabIndex={-1}>
<button>Test</button>
</div>
</TrapFocus>
);
}

const { setProps } = render(<Test />);

setProps({ open: false });
expect(screen.getByTestId('sentinelStart').getAttribute('tabindex')).to.eq('-1');
expect(screen.getByTestId('sentinelEnd').getAttribute('tabindex')).to.eq('-1');

setProps({ open: true });
expect(screen.getByTestId('sentinelStart').getAttribute('tabindex')).to.eq('0');
expect(screen.getByTestId('sentinelEnd').getAttribute('tabindex')).to.eq('0');
});

describe('interval', () => {
clock.withFakeTimers();

Expand Down

0 comments on commit 53582fe

Please sign in to comment.