[RFC] feat(Accessibility): Add focus trap zone #239

sophieH29 · 2018-09-17T10:56:28Z

This PR introduces FocusTrapZone.

FocusTrapZone is taken from ui-fabric library as FocusZone, and was changed a bit to be consistent with a Stardust library.

Notes:

FocusTrapZone is only used in a Portal component and is diabled by default.
FocusTrapZone will wrap a Portal component, in case focusTrap is set to true
to configure FocusTrapZone, additional prop focusTrapZoneProps should be passed to Portal component. Later, in can be configered through accessibility behaviors of the components which will use Portal, like Popup.
if FocusTrapZone is enabled, by default it will have isClickableOutsideFocusTrap prop set to true.
on componentDidMount, FocusTrapZone will hide all other elements in the body from accessibility tree, by setting attribute aria-hidden=true, and will remove it on componentWillUnmount

…at/acc-focuszone-in-rendercomponent

…in-rendercomponent

…b.com/stardust-ui/react into feat/acc-focuszone-in-rendercomponent

…in-rendercomponent

…at/popup-simple

…/react into feat/focus-trap-zone

src/components/Portal/Portal.tsx

src/lib/accessibility/FocusZone/CHANGELOG.md

src/lib/accessibility/FocusZone/FocusTrapZone.tsx

kuzhelov

please, see comments

kuzhelov · 2018-10-23T09:20:03Z

docs/src/examples/components/Portal/Types/PortalExampleFocusTrapped.shorthand.tsx

+        <Button content={btnContent} onClick={this.openPortal} />
+        <Portal
+          trapFocus={{
+            // When 'false', all clicks outside the Portal will be caught and not handled.


kuzhelov · 2018-10-23T10:02:07Z

src/components/Portal/Portal.tsx


    return (
      open && (
        <Ref innerRef={this.handlePortalRef}>
          <PortalInner onMount={this.handleMount} onUnmount={this.handleUnmount}>
-            {childrenExist(children) ? children : content}
+            {trapFocus ? (
+              <FocusTrapZone {...focusTrapZoneProps}>{contentToRender}</FocusTrapZone>


kuzhelov · 2018-10-23T10:03:27Z

src/lib/accessibility/FocusZone/FocusTrapZone.tsx

+  private createRef = elem => (this._root.current = ReactDOM.findDOMNode(elem) as HTMLElement)
+
+  static propTypes = {
+    as: customPropTypes.as,


wouldn't we provide any descriptions for these? Thos will be helpful even from the dev perspective

Descriptions for props is provided here FocusTrapZone.types.tsx. Do you think we should duplicate it?

kuzhelov · 2018-10-23T10:07:47Z

src/lib/accessibility/FocusZone/FocusTrapZone.tsx

+    }
+  }
+
+  private _findElementAndFocusAsync = () => {


kuzhelov · 2018-10-23T10:13:15Z

src/lib/accessibility/FocusZone/FocusTrapZone.tsx

+  private _unsubscribeFromEvents = () => {
+    const { forceFocusInsideTrap, isClickableOutsideFocusTrap } = this.props
+    if (forceFocusInsideTrap) {
+      eventStack.unsub('focus', this._handleOutsideFocus, {


not related to this PR, but this is so prone to accidental mistakes like in the following cases:

Case 1

eventStack.sub('focus', this._handleOutsideFocus, { target: window }) ... // nothing is unsubscribed, by default `document` is used as a target eventStack.unsub('focus', e => this._handleOutsideFocus(e))

Case 2

eventStack.sub('focus', e => this._handleOutsideFocus(e)) ... // oops, nothing is unsubscribed eventStack.unsub('focus', e => this._handleOutsideFocus(e))

Case 3

private _handleOutsideFocus(e) { ... // oops, I am not 'this' here (thoughts of the type's instance) this.handle(e) } ... eventStack.sub('focus', this._handleOutsideFocus)

kuzhelov · 2018-10-23T10:18:01Z

src/lib/accessibility/FocusZone/FocusTrapZone.tsx

+  }
+
+  private _hideContentFromAccessibilityTree = () => {
+    const bodyChildren = (document.body && document.body.children) || []


lets explicitly put in comments somewhere (probably, in comments to FocusTrapZone class) the fact that this is a guy who is able to work in browser environment only

kuzhelov · 2018-10-23T10:21:05Z

src/lib/accessibility/FocusZone/FocusTrapZone.tsx

+    if (bodyChildren.length && !document.body.contains(this._root.current)) {
+      // In case popup render options will change
+      console.warn(
+        'Body does not contain trap zone element as expected. If it is done intentionally, please, make sure to update FocusTrapZone.',


still, this message is a bit confusing - as we need just to ask client to use ensure that trap zone element is placed inside body. Lets express exactly the same thought in the warning message:

Body does not contain trap zone element as expected - ensure that trapped DOM element is a child of .

kuzhelov · 2018-10-23T10:27:47Z

src/lib/accessibility/FocusZone/focusUtilities.ts

+
+    if (win) {
+      // element.focus() is a no-op if the element is no longer in the DOM, meaning this is always safe
+      win.requestAnimationFrame(() => {


seems that setTimeout would be enough to achieve this goal - why we are using animation frames?

as an additional benefit of this approach - we might use handler object returned from this method to avoid potential situations where callback will be called multiple times (as multiple subscriptions might be made)

kuzhelov · 2018-10-23T10:36:31Z

src/lib/accessibility/types.ts

 export type KeyActions = { [partName: string]: { [actionName: string]: KeyAction } }
 export interface AccessibilityDefinition {
  attributes?: AccessibilityAttributesBySlot
  keyActions?: KeyActions
  handledProps?: (keyof AccessibilityAttributes)[]
  focusZone?: FocusZoneDefinition
+  focusTrapZone?: FocusTrapZoneDefinition


note that this becomes harder for the client to immediately get an idea of why these two are separated and what, actually, drives this division - as both are related to focus handling aspects. Maybe we should take it as a note for the future and address this (API interface) problem

kuzhelov

👍

tomasiser and others added 30 commits August 20, 2018 16:20

Add @uifabric/utilities

faa40f4

customPropTypes fix for @types

41f022d

FocusZone in renderComponent

b486711

Fixed handlesAccessibility unit test for FocusZone wrap

d445a4c

Fixed isConformant.tsx unit tests for FocusZone

4889064

Merge branch 'master' of https://github.com/stardust-ui/react into fe…

ff124af

…at/acc-focuszone-in-rendercomponent

Removed debug logging, added circular navigation to menu

9356364

Fix menu props and add constant

3d63a14

FocusZone unit tests

e9f1cf1

Improved typing of a function

518e3f8

Merge remote-tracking branch 'origin/master' into feat/acc-focuszone-…

59a05af

…in-rendercomponent

Merged latest FocusZone RTL fix and added CHANGELOG.md

d4f3a21

Merge remote-tracking branch 'origin/master' into feat/acc-focuszone-…

d30e2ae

…in-rendercomponent

Merge branch 'master' into feat/acc-focuszone-in-rendercomponent

9ae3071

Got rid of Fabric utilities dependency

b8bc7da

More cleanup

e073afe

Added PropTypes, fixed unit tests

a07c290

Renamed props and refactored unit tests

f3e0f19

Typo in test

0e6825d

Temporary fix for customPropTypes.as not working

772df90

Updated FocusZone CHANGELOG

441c135

Merge branch 'feat/acc-focuszone-in-rendercomponent' of https://githu…

0e01d04

…b.com/stardust-ui/react into feat/acc-focuszone-in-rendercomponent

Strict type

10f7aff

Merge remote-tracking branch 'origin/master' into feat/acc-focuszone-…

25092d4

…in-rendercomponent

Added isRtl, moved constants

1676c56

feat(portal): simple base implementation

50bda74

addressed PR comments

d0df7ed

feat(popup): simple base implementation

f89f9ec

Merge branch 'master' of https://github.com/stardust-ui/react into fe…

01710c7

…at/popup-simple

addressed comments

7b9e89e

Sofiya Huts and others added 7 commits October 17, 2018 10:44

Make improvements after CR comments

68b9137

Merge branch 'master' into feat/focus-trap-zone

90307e3

Make improvements after CR comments

3737ffb

Merge branch 'feat/focus-trap-zone' of https://github.com/stardust-ui…

7a3c913

…/react into feat/focus-trap-zone

Merge latest master into current branch

5d0b138

Improvements after CR, update styled for Portal examples

d7a0e6d

small improvement

08497bc

kuzhelov reviewed Oct 22, 2018

View reviewed changes

Sofiya Huts and others added 5 commits October 22, 2018 16:50

Improvements after CR

980935e

Update changelog

86e186b

Merge branch 'master' into feat/focus-trap-zone

27bc75a

Merge branch 'master' into feat/focus-trap-zone

9bffdf7

Merge branch 'master' into feat/focus-trap-zone

6443f0a

kuzhelov reviewed Oct 23, 2018

View reviewed changes

Rename IFocusTrapZoneProps -> FocusTrapZoneProps

ad58d48

kuzhelov reviewed Oct 23, 2018

View reviewed changes

src/lib/accessibility/FocusZone/FocusTrapZone.tsx

}

}

private _findElementAndFocusAsync = () => {

Copy link

Contributor

kuzhelov Oct 23, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

kuzhelov reviewed Oct 23, 2018

View reviewed changes

kuzhelov approved these changes Oct 23, 2018

View reviewed changes

kuzhelov added ready for merge and removed 🚀 ready for review labels Oct 23, 2018

Improve descriptions

0472f3b

sophieH29 merged commit 5ba260d into master Oct 23, 2018

sophieH29 deleted the feat/focus-trap-zone branch October 23, 2018 13:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[RFC] feat(Accessibility): Add focus trap zone #239

[RFC] feat(Accessibility): Add focus trap zone #239

sophieH29 commented Sep 17, 2018 •

edited

kuzhelov left a comment

kuzhelov Oct 23, 2018

kuzhelov Oct 23, 2018

kuzhelov Oct 23, 2018 •

edited

sophieH29 Oct 23, 2018 •

edited

kuzhelov Oct 23, 2018

kuzhelov Oct 23, 2018 •

edited

kuzhelov Oct 23, 2018

kuzhelov Oct 23, 2018

kuzhelov Oct 23, 2018

kuzhelov Oct 23, 2018

kuzhelov Oct 23, 2018

kuzhelov left a comment

[RFC] feat(Accessibility): Add focus trap zone #239

[RFC] feat(Accessibility): Add focus trap zone #239

Conversation

sophieH29 commented Sep 17, 2018 • edited

kuzhelov left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kuzhelov Oct 23, 2018 • edited

Choose a reason for hiding this comment

sophieH29 Oct 23, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kuzhelov Oct 23, 2018 • edited

Choose a reason for hiding this comment

Case 1

Case 2

Case 3

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kuzhelov left a comment

Choose a reason for hiding this comment

sophieH29 commented Sep 17, 2018 •

edited

kuzhelov Oct 23, 2018 •

edited

sophieH29 Oct 23, 2018 •

edited

kuzhelov Oct 23, 2018 •

edited