Skip to content
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

Modal component #6261

Merged
merged 77 commits into from
Jul 4, 2018
Merged
Changes from 1 commit
Commits
Show all changes
77 commits
Select commit Hold shift + click to select a range
bf9f287
Initial implementation modal
Apr 18, 2018
aba9636
removed style prop assignment causing error
Apr 19, 2018
b0700fb
Set default mount node to #wpwrap
Apr 23, 2018
66367dd
Implemented default styling
Apr 25, 2018
aca49d0
Improved styling
Apr 25, 2018
3a5d75c
Applied code review feedback to with-focus-contain HOC
Apr 25, 2018
371e66b
Added eslint ignore for jsx-a11y/no-static-element-interactions
Apr 25, 2018
bd48b5a
Implemented withGlobalEvents HOC
Apr 25, 2018
809bfdd
withGlobalEvents HOC now forwards refs
Apr 30, 2018
47219be
Replace lodash defer with withSafeTimeout
Apr 30, 2018
9b93633
Removed unnecessary return statements
Apr 30, 2018
de29a46
Created separate styling rules
May 1, 2018
4a1b2c4
Added documentation for forwardRef function
May 1, 2018
1092fbd
Made mount location for modal configurable
May 1, 2018
44d91d3
Renamed elementId to appElementId for clarity
May 1, 2018
4aef9b6
Added noop for when no reg is provided in forwardRef
May 1, 2018
5c0568c
Fixed error in EditorProvider
May 1, 2018
887193d
Fix eslint errors
May 1, 2018
b0c4d82
Fixed incorrectly bound function
May 1, 2018
f25b989
Modal now by default mounts to the body and hides all other elements
May 2, 2018
c360742
hideApp no longer unhides elements that already had a aria-hidden=tru…
May 2, 2018
984ef8e
Improved a11y and updated documentation
May 2, 2018
6563c63
Updated documentation
May 2, 2018
59255ff
Removed forwardRef from element|
May 2, 2018
c6ee481
Changed default close label to Close dialog
May 2, 2018
17b7957
Add modal-open className to body when modal is opened
May 2, 2018
c4b433b
Added documentation to modal/index.js
May 2, 2018
cca2a0e
Removed aria-modal=true and explained why in aria-helper.js
May 2, 2018
21a722c
Documented modal/frame.js
May 2, 2018
9313ecb
Merge branch 'master' into add/modal
xyfi May 8, 2018
f487f22
Merge branch 'master' into add/modal
atimmer May 23, 2018
a66f5b8
Merge branch 'master' into add/modal
abotteram May 29, 2018
359774d
Merge branch 'add/modal' of https://github.com/WordPress/gutenberg in…
abotteram May 29, 2018
e7a8f4f
Addressed eslint issues
abotteram May 29, 2018
94a3216
Polish the visuals a bit.
Jun 6, 2018
064adbc
Merge branch 'master' into add/modal
abotteram Jun 7, 2018
832b1ac
Merge branch 'add/modal' of https://github.com/WordPress/gutenberg in…
abotteram Jun 7, 2018
6ac30dd
Disabled jsx-a11y/no-static-element-interactions in render function o…
abotteram Jun 7, 2018
349b068
Merge branch 'master' into add/modal
abotteram Jun 13, 2018
d1d2ba6
Merge branch 'master' into add/modal
abotteram Jun 18, 2018
eda32a6
Addressed CR concerns
abotteram Jun 18, 2018
dde71f2
Removed unused variable
abotteram Jun 18, 2018
ca8512a
Replaced focus.tabbables.find from @wordpress/utils with @wordpress/dom
abotteram Jun 18, 2018
afdaa2c
Merge branch 'master' into add/modal
abotteram Jun 20, 2018
b6ef31f
Fixed failing tests after updating react-test-renderer to version 16.…
abotteram Jun 20, 2018
b74d1e6
CSS Tweaks
abotteram Jun 21, 2018
dbac197
Fixed error when clicking outside of the modal
abotteram Jun 26, 2018
61ac955
Move focus to first element with tabindex=-1 on mount
abotteram Jun 26, 2018
d94e4ef
Make sure the dic the modal is renderd in is apprended to the documen…
abotteram Jun 27, 2018
6eb3886
Addressed minor codestyle issues in frame.js
abotteram Jun 27, 2018
ee6f520
Fixed bug when opening modal the second time
abotteram Jun 27, 2018
ca59960
Removed unused import
abotteram Jun 27, 2018
e2a50a1
replaced react-click-outside with internal withFocusOutside HOC
abotteram Jun 27, 2018
010f223
Merge branch 'master' into add/modal
abotteram Jul 2, 2018
9968113
Replaced withFocusContain with withConstrainedTabbing
abotteram Jul 2, 2018
5dc9b58
Replaced withFocusOutside with react-click-outside again
abotteram Jul 2, 2018
7f82944
Replaced @wordpress/utils keycodes with @wordpress/keycodes in frame.js
abotteram Jul 3, 2018
146f562
don't pass props.aria.labelledby to frame div when props.contentLabel…
abotteram Jul 3, 2018
30ab946
Added logic and tests for aria-helper to not hide (implicitely) live …
abotteram Jul 3, 2018
bd1050b
Removed isOpen props from the modal
abotteram Jul 3, 2018
d5f50d1
Removed the ability to add inline styles to the modal
abotteram Jul 3, 2018
2a0c916
Removed useless css
abotteram Jul 3, 2018
9400adc
Removed redundant z-index
abotteram Jul 3, 2018
a956732
Add full page overlay
abotteram Jul 3, 2018
0679405
Don't render h1 tag when no title is provided
abotteram Jul 3, 2018
4e3bb1a
Made modal screen-verlay full screen
abotteram Jul 3, 2018
12dd5fe
generate unique id for modal labelledby attribute
abotteram Jul 3, 2018
f607330
Replaced function scoped array liveRegionAriaRoles with file scoped c…
abotteram Jul 3, 2018
40cc3f9
Removed check whtehr forwardedRef is defined
abotteram Jul 3, 2018
0590e39
Minor JSDoc improvement
abotteram Jul 3, 2018
6f57d08
Removed styles from defaultProps
abotteram Jul 3, 2018
c547404
Documentation improvements
abotteram Jul 3, 2018
4eba6c7
don't add labelledBy attribute to modal frame when no title is present
abotteram Jul 3, 2018
9ee5b83
Don't add unique id to headingId when aria.labelledby prop is provide…
abotteram Jul 3, 2018
1a0bf75
Components: Reorder component lifecycle as first class members
aduth Jul 4, 2018
8778706
Components: Use withInstanceId to generate modal heading id
aduth Jul 4, 2018
6a43d9f
Components: Fix modal withInstanceId import reference
aduth Jul 4, 2018
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Don't add unique id to headingId when aria.labelledby prop is provide…
…d, also added aria.labelledby change logic
  • Loading branch information
abotteram committed Jul 3, 2018
commit 9ee5b83912631c5110dcd1916465c613b59083e8
25 changes: 23 additions & 2 deletions components/modal/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ class Modal extends Component {

this.prepareDOM();

this.headingId = uniqueId( props.aria.labelledby );
this.setHeadingId( props );
}

/**
Expand All @@ -48,6 +48,16 @@ class Modal extends Component {
parentElement.appendChild( this.node );
}

/**
* Sets the heading id to the aria.labelledby prop or a unique id when
* the prop is unavailable.
*
* @param {Object} props The component's props.
*/
setHeadingId( props ) {
this.headingId = props.aria.labelledby || uniqueId( 'modal-heading-' );
}

/**
* Removes the specific mounting point for this modal from the DOM.
*/
Expand All @@ -68,6 +78,17 @@ class Modal extends Component {
}
}

/**
* Updates headingId when the aria.labelledby prop has changed.
*
* @param {Object} nextProps The component's next props.
*/
componentWillReceiveProps( nextProps ) {
Copy link
Member

Choose a reason for hiding this comment

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

componentWillReceiveProps is effectively deprecated.

https://reactjs.org/docs/react-component.html#the-component-lifecycle

For this type of usage, you may consider static getDerivedStateFromProps instead:

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

However, in this case I don't think this requires state. I think we can just use the withInstanceId higher-order component.

I will make these revisions in an upcoming commit.

if ( this.props.aria.labelledby !== nextProps.aria.labelledby ) {
this.setHeadingId( nextProps );
}
}

/**
* Removes the modal's node from the DOM. Also calls closeLastModal when this is
* the last modal to be closed.
Expand Down Expand Up @@ -164,7 +185,7 @@ Modal.defaultProps = {
shouldCloseOnClickOutside: true,
/* accessibility */
aria: {
labelledby: 'modal-heading',
labelledby: null,
describedby: null,
},
};
Expand Down