New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle edge cases in with-constrained-tabbing. #10174

Merged
merged 2 commits into from Oct 3, 2018

Conversation

Projects
None yet
4 participants
@afercia
Contributor

afercia commented Sep 25, 2018

Description

Handle edge cases to keep tabbing constrained in withConstrainedTabbing, for example when clicking in the content and then pressing Tab. See conversation on #9973

To test:

  • use Safari or Edge / IE11 where the edge case is more evident
  • edit a post and open the Help modal (on a mac, press Control-Option-H, on Windows: Shift-Alt-H)
  • press Tab and verify focus stays on the Close button
  • click in the middle of the content
  • press Tab and verify focus is moved to the Close button

Previously, focus went to the document root.

By adding tabIndex="-1" to the withConstrainedTabbing it is possible to detect when the event.target is not the firstTabbable or lastTabbable. This happens, for example when the content is clicked and then Tab is pressed again. In this edge case, focus is moved to the first tabbable.

Fixes #10165

@afercia afercia requested a review from aduth Sep 25, 2018

@aduth

aduth approved these changes Sep 27, 2018

This component could use some tests.

* When pressing Tab and none of the tabbables has focus, the keydown
* event happens on the wrapper div: move focus on the first tabbable.
*/
} else if ( ! tabbables.includes( event.target ) ) {

This comment has been minimized.

@aduth

aduth Sep 27, 2018

Member

Would it be enough to test event.target === this.focusContainRef.current ? More optimized, more explicit to what we are testing.

Or are there other cases where the target of the tab press would itself not be tabbable? I guess might account for elements with tabIndex=-1 within the content? If so, should be update the comment to reflect this?

@aduth

aduth Sep 27, 2018

Member

Would it be enough to test event.target === this.focusContainRef.current ? More optimized, more explicit to what we are testing.

Or are there other cases where the target of the tab press would itself not be tabbable? I guess might account for elements with tabIndex=-1 within the content? If so, should be update the comment to reflect this?

This comment has been minimized.

@afercia

afercia Sep 27, 2018

Contributor

Yep it would be nicer and simpler. Unfortunately, it doesn't work on IE11 where the event.target seems to be the clicked children element in the content. See below, in order:

  • event.target
  • event.currentTarget
  • this.focusContainRef.current

screenshot 94

@afercia

afercia Sep 27, 2018

Contributor

Yep it would be nicer and simpler. Unfortunately, it doesn't work on IE11 where the event.target seems to be the clicked children element in the content. See below, in order:

  • event.target
  • event.currentTarget
  • this.focusContainRef.current

screenshot 94

This comment has been minimized.

@aduth

aduth Oct 3, 2018

Member

Ah! This is fine then.

@aduth

aduth Oct 3, 2018

Member

Ah! This is fine then.

E2E Tests: a11y: Test focus retention in modals
Checks edge cases in withConstrainedTabbing.

@mcsf mcsf requested a review from talldan Oct 1, 2018

@mcsf

This comment has been minimized.

Show comment
Hide comment
@mcsf

mcsf Oct 1, 2018

Contributor

Added tests co-authored with @talldan. Should be ready to merge.

Contributor

mcsf commented Oct 1, 2018

Added tests co-authored with @talldan. Should be ready to merge.

@jasmussen jasmussen added this to the 4.0 milestone Oct 3, 2018

@aduth aduth merged commit 7ca88c3 into master Oct 3, 2018

2 checks passed

codecov/project 48.56% (-0.02%) compared to 7509ace
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@aduth aduth deleted the update/with-constrained-tabbing-improvements branch Oct 3, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment