From d7a9ece35eabab6d2f50fd6f0fab630fa8eda2c9 Mon Sep 17 00:00:00 2001 From: Fernando Souza Date: Sat, 15 May 2021 19:01:39 -0300 Subject: [PATCH 1/6] Fix conflicts --- packages/components/src/modal/frame.js | 40 ++++++++++++++++++++++++++ packages/components/src/modal/index.js | 2 +- 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/packages/components/src/modal/frame.js b/packages/components/src/modal/frame.js index c1cbfd2d79a0b..18c4edcd99ef8 100644 --- a/packages/components/src/modal/frame.js +++ b/packages/components/src/modal/frame.js @@ -78,6 +78,46 @@ class ModalFrame extends Component { constructor() { super( ...arguments ); this.handleFocusOutside = this.handleFocusOutside.bind( this ); +<<<<<<< HEAD +======= + this.focusFirstTabbable = this.focusFirstTabbable.bind( this ); + this.focusOnMount = this.focusOnMount.bind( this ); + } + + /** + * Focuses the container or first tabbable element based on props.focusOnMount. + */ + componentDidMount() { + // Focus on mount + if ( this.props.focusOnMount ) { + this.focusOnMount(); + } + } + + /** + * Handle focus on mount. + */ + + focusOnMount() { + if ( this.props.focusOnMount === 'firstElement' ) { + this.focusFirstTabbable(); + } else { + this.containerRef.current.focus(); + } + } + + /** + * Focuses the first tabbable element. + */ + focusFirstTabbable() { + const tabbables = focus.tabbable.find( this.containerRef.current ); + if ( tabbables.length ) { + tabbables[ 0 ].focus(); + } else { + this.containerRef.current.focus(); + } + return true; +>>>>>>> 93e0cff0be (Allow the focusOnMount prop to be either boolean or string) } /** diff --git a/packages/components/src/modal/index.js b/packages/components/src/modal/index.js index 2144972d42f18..d5ea4989bffd3 100644 --- a/packages/components/src/modal/index.js +++ b/packages/components/src/modal/index.js @@ -159,7 +159,7 @@ Modal.defaultProps = { bodyOpenClassName: 'modal-open', role: 'dialog', title: null, - focusOnMount: true, + focusOnMount: 'firstElement', shouldCloseOnEsc: true, shouldCloseOnClickOutside: true, isDismissible: true, From c391b685d2b022fc7c3c9dc14a0de3316cdfb881 Mon Sep 17 00:00:00 2001 From: Fernando Souza Date: Sun, 2 Feb 2020 17:25:31 -0300 Subject: [PATCH 2/6] Fix conflicts with trunk --- packages/components/src/modal/frame.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/src/modal/frame.js b/packages/components/src/modal/frame.js index 18c4edcd99ef8..ad02f3439e974 100644 --- a/packages/components/src/modal/frame.js +++ b/packages/components/src/modal/frame.js @@ -103,7 +103,7 @@ class ModalFrame extends Component { this.focusFirstTabbable(); } else { this.containerRef.current.focus(); - } + } } /** @@ -116,8 +116,11 @@ class ModalFrame extends Component { } else { this.containerRef.current.focus(); } +<<<<<<< HEAD return true; >>>>>>> 93e0cff0be (Allow the focusOnMount prop to be either boolean or string) +======= +>>>>>>> d44204c5c8 (Remove added return from focusFirstTabbable) } /** From c5bacb6ed697e461b95507471135c364c0fa6708 Mon Sep 17 00:00:00 2001 From: Fernando Souza Date: Sun, 2 Feb 2020 19:02:00 -0300 Subject: [PATCH 3/6] Remove empty line --- packages/components/src/modal/frame.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/modal/frame.js b/packages/components/src/modal/frame.js index ad02f3439e974..02839e5938fb9 100644 --- a/packages/components/src/modal/frame.js +++ b/packages/components/src/modal/frame.js @@ -97,7 +97,6 @@ class ModalFrame extends Component { /** * Handle focus on mount. */ - focusOnMount() { if ( this.props.focusOnMount === 'firstElement' ) { this.focusFirstTabbable(); From 589a38b3b52ec242cb1a8aaf12cb16e2013b1594 Mon Sep 17 00:00:00 2001 From: Fernando Souza Date: Thu, 13 Feb 2020 14:17:11 -0300 Subject: [PATCH 4/6] clarify conditional for focusOnMount prop evaluation --- packages/components/src/modal/README.md | 10 ++++++---- packages/components/src/modal/frame.js | 3 ++- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/components/src/modal/README.md b/packages/components/src/modal/README.md index f3979663f78bd..3cf9a130abcf7 100644 --- a/packages/components/src/modal/README.md +++ b/packages/components/src/modal/README.md @@ -195,11 +195,13 @@ If this property is added, it will be added to the modal content `div` as `aria- #### focusOnMount -If this property is true, it will focus the first tabbable element rendered in the modal. +By default, the *first tabblable element* in the modal will receive focus when it mounts. This is the same as setting `focusOnMount` to `"firstElement"`. If you want to focus the container instead, you can set `focusOnMount` to `"container"` or true. -- Type: `boolean` -- Required: No -- Default: true +Set this prop to `false` to not focus on mount. + +- Type: `String` or `Boolean` +- Required: No +- Default: `firstElement` #### shouldCloseOnEsc diff --git a/packages/components/src/modal/frame.js b/packages/components/src/modal/frame.js index 02839e5938fb9..17477d3cebadb 100644 --- a/packages/components/src/modal/frame.js +++ b/packages/components/src/modal/frame.js @@ -100,7 +100,8 @@ class ModalFrame extends Component { focusOnMount() { if ( this.props.focusOnMount === 'firstElement' ) { this.focusFirstTabbable(); - } else { + } + if ( this.props.focusOnMount === 'container' || this.props.focusOnMount === true ) { this.containerRef.current.focus(); } } From fa9fa163dc99525ad71a4519fb1ac214a42c9889 Mon Sep 17 00:00:00 2001 From: Fernando Souza Date: Thu, 13 Feb 2020 14:22:02 -0300 Subject: [PATCH 5/6] include linebreak --- packages/components/src/modal/frame.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/components/src/modal/frame.js b/packages/components/src/modal/frame.js index 17477d3cebadb..bb6d27b683557 100644 --- a/packages/components/src/modal/frame.js +++ b/packages/components/src/modal/frame.js @@ -101,7 +101,10 @@ class ModalFrame extends Component { if ( this.props.focusOnMount === 'firstElement' ) { this.focusFirstTabbable(); } - if ( this.props.focusOnMount === 'container' || this.props.focusOnMount === true ) { + if ( + this.props.focusOnMount === 'container' || + this.props.focusOnMount === true + ) { this.containerRef.current.focus(); } } From 5db2fc46ef3dd8ac46012c4f90df01ef1962febc Mon Sep 17 00:00:00 2001 From: Fernando Souza Date: Thu, 13 Feb 2020 14:23:40 -0300 Subject: [PATCH 6/6] Include modal component stories update --- packages/components/src/modal/stories/index.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/components/src/modal/stories/index.js b/packages/components/src/modal/stories/index.js index 1d6b4acc48d0b..fa1210913b7c9 100644 --- a/packages/components/src/modal/stories/index.js +++ b/packages/components/src/modal/stories/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { boolean, text } from '@storybook/addon-knobs'; +import { boolean, text, select } from '@storybook/addon-knobs'; /** * Internal dependencies @@ -42,7 +42,12 @@ export const _default = () => { const title = text( 'title', 'Title' ); const icon = text( 'icon', '' ); const isDismissible = boolean( 'isDismissible', true ); - const focusOnMount = boolean( 'focusOnMount', true ); + const focusOnMount = select( 'focusOnMount', { + firstElement: 'firstElement', + container: 'container', + true: true, + false: false, + } ); const shouldCloseOnEsc = boolean( 'shouldCloseOnEsc', true ); const shouldCloseOnClickOutside = boolean( 'shouldCloseOnClickOutside',