feat(components): support automatic focus sentinel #5260

asudoh · 2020-02-04T09:11:40Z

This change eliminates the need for application to put focus sentinel by having <Modal>, <ComposedModal> and <FloatingMenu> automatically put the focus sentinels.

This change also add support for reverse-focus-wrap feature to <Modal> and <ComposedModal>, without needing using 3rd-party focus-trap-react library. This helps applications hitting adverse side-effects that focus-trap-react library causes (e.g. #3021, #3665 and #4600).

Fixes #3817.
Fixes #4036.
Fixes #4600.

Changelog

New

Automatic way to put focus sentinel for <Modal>, <ComposedModal> and <FloatingMenu>.
Reverse-focus-wrap feature to <Modal> and <ComposedModal> that works without needing using 3rd-party focus-trap-react library.

Testing / Reviewing

Testing should make sure <Modal>, <ComposedModal>, <OverflowMenu> and <Tooltip> are not broken.

This change eliminates the need for application to put focus sentinel by having `<Modal>`, `<ComposedModal>` and `<FloatingMenu>` automatically put the focus sentinels. This change also add support for reverse-focus-wrap feature to `<Modal>` and `<ComposedModal>`, without needing using 3rd-party `focus-trap-react` library. This helps applications hitting adverse side-effects that `focus-trap-react` library causes (e.g. carbon-design-system#3021, carbon-design-system#3665 and carbon-design-system#4600). Fixes carbon-design-system#3817. Fixes carbon-design-system#4036. Fixes carbon-design-system#4600.

netlify · 2020-02-04T09:23:26Z

Deploy preview for carbon-elements ready!

Built with commit 3ccfd96

https://deploy-preview-5260--carbon-elements.netlify.com

netlify · 2020-02-04T09:24:19Z

Deploy preview for carbon-components-react ready!

Built with commit 3ccfd96

https://deploy-preview-5260--carbon-components-react.netlify.com

emyarod

looks good to me, floating menus function as expected and reverse focus wrap is also functional. seems like the ideal use case for Node.compareDocumentPosition()

joshblack · 2020-02-11T00:08:54Z

cc @dakahn @snidersd if you all have a chance to confirm!

abbeyhrt · 2020-02-11T17:43:40Z

packages/react/src/components/Modal/Modal.js

     */
-    focusTrap: PropTypes.bool,
+    focusTrap: deprecate(


Since we're deprecating this prop, are we not going to give the user the ability to choose whether or not they want the modal focus-wrapped?

Thank you for asking @abbeyhrt - Focus-wrapping behavior runs regardless of focusTrap property, even before it was introduced or after it was introduced. Some time ago the codebase introduced a third-party focus-trap-react library for better focus-wrapping behavior, but it introduced lots of side effects as the PR description of this PR links to. focusTrap property was introduced to disable such third-party library to avoid the side effects. This PR removes the property because the third-party is no longer needed for focus-wrapping.

packages/react/src/components/Modal/Modal.js

dakahn

Can we get a UX example stories for the components in question? Maybe a button that when clicked throws the modals so we can easily test focus moving to and from and being trapped etc?

This would also be helpful moving forward protecting against regressions with changes like this

asudoh · 2020-02-11T22:06:58Z

@dakahn The features the fix is for (focus wrapping for modal and making focus sequence as though floating menu body is placed next to the trigger button) can be tested at https://react.carbondesignsystem.com/?path=/story/modal--default and https://react.carbondesignsystem.com/?path=/story/overflowmenu--basic. For the former, you can keep hitting tab key or shift-tab key and see if the focus is within modal. For the latter, you can first focus on the trigger button, hit enter, and hit tab and see if the focus goes back to the trigger button.

For both, in the failed case, the focus goes to "Show info" button.

Co-Authored-By: Abbey Hart <abbeyhrt@gmail.com>

dakahn

Testing on Firefox latest on Windows 10 at https://react.carbondesignsystem.com/iframe.html?id=modal--default

For Modal and ComposedModal Initial focus is placed on close button then focus is moved to any subsequent interactable elements and then focus is lost before returning to the close button.

asudoh · 2020-02-11T22:26:03Z

For Modal and ComposedModal Initial focus is placed on close button then focus is moved to any subsequent interactable elements and then focus is lost before returning to the close button.

It's the expected behavior (irrelevant to this PR). The initial focus can be changed either by the following:

Add data-modal-primary-focus attribute to the element that should get initial focus
Change selectorPrimaryFocus prop

dakahn · 2020-02-11T22:28:08Z

@asudoh No, that's not what I'm talking about. I'm referring to focus being lost after the last interactable element in the modal before returning to the close button.

dakahn · 2020-02-11T22:35:47Z

To clarify what I was seeing it seems that focus trap is off by default (I hadn't clicked the knob 🦆) -- wouldn't that be counter to the expected behavior? If this is what we've been doing then it could make sense to keep it that way, but I don't recall choosing to make our modal fail WCAG by default.

dakahn · 2020-02-11T22:47:57Z

packages/react/src/components/Modal/Modal.js

    hasScrollingContent: false,
  };

  button = React.createRef();
  outerModal = React.createRef();
  innerModal = React.createRef();
+  startSentinel = React.createRef();


Is there a clearer plain-language way we can name this as opposed to "sentinel". It's difficult jargon to even Google a simple definition of. I assume you're meaning like a sentinel node, but there's probably a friendlier way to describe that.

@dakahn Hope this link shed some light: https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex

I understand the concept of sentinel elements in a focus-trap, but my question was if we could name these in plainer and simpler to understand language? firstElement and lastElement spring to mind.

If not that's cool too, but maybe a quick comment explaining the concept of sentinels to somebody who -- like myself -- has implemented wrapping focus but was totally unfamiliar with this term.

in a focus trap we have "sentinel" elements that designate the first and last elements in the tab order and signify when we should wrap

Maybe "start trap" and "end trap"?

asudoh · 2020-02-11T23:35:38Z

then focus is moved to any subsequent interactable elements and then focus is lost before returning to the close button.

@dakahn My apologies for misunderstanding your statement on your finding. Given you don't seem to have tested my change and testing https://react.carbondesignsystem.com/iframe.html?id=modal--default instead, I think it explains why you saw the problem.

Didn't have access to my Windows environment today, but with Firefox 73 on my Mac, the focus-wrap behavior seems to work as expected with this PR's code (I don't observe "then focus is lost before returning to the close button"). e.g. at http://localhost:9000/iframe.html?id=composedmodal--example-usage-with-trigger-button, hitting tab key when the Save button has focus moves the focus to the close button, and hitting shift-tab key when the close button has focus moves the focus to the Save button:

Same (correct) behavior is observed at http://localhost:9000/iframe.html?id=modal--default.

To clarify it seems that focus trap is off by default -- wouldn't that be counter to the expected behavior?

The change makes the focus-wrap behavior always, by making focus-wrap behavior work without third-party focus-trap-react library. To do that, introduced some new code (e.g. wrapFocus.js) for focus-wrap behavior.

dakahn · 2020-02-12T15:35:33Z

The focus wrap behavior is off in the story by default for modal and composed modal. That's what I'm seeing at the testing link, which is where the confusion came from. My question was is this intentional?

asudoh · 2020-02-13T05:32:31Z

I forgot removing focusTrap property from the story (my apologies), fixed. This PR is for making focus-wrapping behavior work regardless of that property.

Also renamed startSentinelNode to startTrapNode as suggested.

aledavila · 2020-02-13T18:50:19Z

Question since this PR is about focus. Have you tested these changes on iOS. The focus trap still doesn't seem to work when using voice over in safari.

emyarod · 2020-02-13T19:24:12Z

I don't have an iOS device to test for this PR but the iOS issue is tracked separately over in #2739 and doesn't seem to be referenced in this PR. not sure if the fix for that can be rolled into the current PR

asudoh · 2020-02-13T23:51:53Z

@emyarod is right - This is solely about keyboard focus, not about screen reader cursor (focus).

asudoh added the status: ready for review 👀 label Feb 4, 2020

asudoh requested review from emyarod and abbeyhrt February 4, 2020 09:11

asudoh requested a review from a team as a code owner February 4, 2020 09:11

test(Modal): fix tests

b09d3d8

asudoh force-pushed the auto-focus-sentinel branch from d1f21ca to b09d3d8 Compare February 4, 2020 10:48

Merge branch 'master' into auto-focus-sentinel

c0cf32d

emyarod approved these changes Feb 4, 2020

View reviewed changes

asudoh added the status: one more review 👀 label Feb 4, 2020

Merge branch 'master' into auto-focus-sentinel

bf7bdc7

dakahn self-requested a review February 11, 2020 16:08

abbeyhrt reviewed Feb 11, 2020

View reviewed changes

packages/react/src/components/Modal/Modal.js Outdated Show resolved Hide resolved

dakahn suggested changes Feb 11, 2020

View reviewed changes

Update packages/react/src/components/Modal/Modal.js

fb8d81d

Co-Authored-By: Abbey Hart <abbeyhrt@gmail.com>

dakahn suggested changes Feb 11, 2020

View reviewed changes

asudoh added 2 commits February 13, 2020 14:26

chore(devenv): remove unused story

00d0804

chore(Modal): rename variables

ca1e9c3

dakahn approved these changes Feb 14, 2020

View reviewed changes

Merge branch 'master' into auto-focus-sentinel

3ccfd96

asudoh merged commit 0e9c6d5 into carbon-design-system:master Feb 14, 2020

asudoh deleted the auto-focus-sentinel branch February 14, 2020 06:25

asudoh mentioned this pull request Feb 14, 2020

Clicking on a link in Tooltip that is part of a Modal doesn't work #5349

Closed

emyarod mentioned this pull request Feb 18, 2020

Unable to set focus to React ComboBox component #5299

Closed

2 tasks

This was referenced Feb 25, 2020

chore(release): v10.10.0 #5432

Closed

v10.10.0 Release #5398

Closed

AlanGreene mentioned this pull request Feb 27, 2020

Flakey unit tests for CreatePipelineRun.test.js tektoncd/dashboard#907

Closed

emyarod mentioned this pull request Mar 2, 2020

feat(FloatingMenu): conditionally set focus in floating menu on menu open #5489

Merged

emyarod mentioned this pull request Mar 16, 2020

AVT 3 - Modal React Component: Android does not restrict focus to the modal #2740

Closed

tw15egan mentioned this pull request Apr 27, 2020

[Modal] focus-wrapping feature prevents user from using stacked modal #5947

Closed

2 tasks

emyarod mentioned this pull request Jul 14, 2020

get latest focus-trap-react dependencies on both carbon-components-react v9 #6467

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(components): support automatic focus sentinel #5260

feat(components): support automatic focus sentinel #5260

asudoh commented Feb 4, 2020

netlify bot commented Feb 4, 2020 •

edited

Loading

netlify bot commented Feb 4, 2020 •

edited

Loading

emyarod left a comment

joshblack commented Feb 11, 2020

abbeyhrt Feb 11, 2020

asudoh Feb 11, 2020

dakahn left a comment •

edited

Loading

asudoh commented Feb 11, 2020 •

edited

Loading

dakahn left a comment •

edited

Loading

asudoh commented Feb 11, 2020

dakahn commented Feb 11, 2020

dakahn commented Feb 11, 2020 •

edited

Loading

dakahn Feb 11, 2020

asudoh Feb 11, 2020

dakahn Feb 12, 2020 •

edited

Loading

joshblack Feb 12, 2020

asudoh commented Feb 11, 2020 •

edited

Loading

dakahn commented Feb 12, 2020

asudoh commented Feb 13, 2020

aledavila commented Feb 13, 2020

emyarod commented Feb 13, 2020

asudoh commented Feb 13, 2020

feat(components): support automatic focus sentinel #5260

feat(components): support automatic focus sentinel #5260

Conversation

asudoh commented Feb 4, 2020

Changelog

Testing / Reviewing

netlify bot commented Feb 4, 2020 • edited Loading

netlify bot commented Feb 4, 2020 • edited Loading

emyarod left a comment

Choose a reason for hiding this comment

joshblack commented Feb 11, 2020

abbeyhrt Feb 11, 2020

Choose a reason for hiding this comment

asudoh Feb 11, 2020

Choose a reason for hiding this comment

dakahn left a comment • edited Loading

Choose a reason for hiding this comment

asudoh commented Feb 11, 2020 • edited Loading

dakahn left a comment • edited Loading

Choose a reason for hiding this comment

asudoh commented Feb 11, 2020

dakahn commented Feb 11, 2020

dakahn commented Feb 11, 2020 • edited Loading

dakahn Feb 11, 2020

Choose a reason for hiding this comment

asudoh Feb 11, 2020

Choose a reason for hiding this comment

dakahn Feb 12, 2020 • edited Loading

Choose a reason for hiding this comment

joshblack Feb 12, 2020

Choose a reason for hiding this comment

asudoh commented Feb 11, 2020 • edited Loading

dakahn commented Feb 12, 2020

asudoh commented Feb 13, 2020

aledavila commented Feb 13, 2020

emyarod commented Feb 13, 2020

asudoh commented Feb 13, 2020

netlify bot commented Feb 4, 2020 •

edited

Loading

netlify bot commented Feb 4, 2020 •

edited

Loading

dakahn left a comment •

edited

Loading

asudoh commented Feb 11, 2020 •

edited

Loading

dakahn left a comment •

edited

Loading

dakahn commented Feb 11, 2020 •

edited

Loading

dakahn Feb 12, 2020 •

edited

Loading

asudoh commented Feb 11, 2020 •

edited

Loading