diff options
author | Sorin Davidoi <sorin.davidoi@gmail.com> | 2017-07-28 00:54:48 +0200 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-07-28 00:54:48 +0200 |
commit | 6884dd79ba8909e17cc6d48e658775fcf7f87890 (patch) | |
tree | 064469f65a0f99679af0890fc0d5131427330d8f /app/javascript/mastodon/features/ui/components/modal_root.js | |
parent | f9075577e4929ec796339331408d857015411ebd (diff) |
Improve accessibility (part 3) (#4405)
* fix(compose): Add aria-label for the navigation links * fix(search): Add input label * fix(navigation_bar): Link description * fix(autosuggest_textarea): Add input label * fix(compose_form): Add input label * fix(upload_button): Add input label * fix(account/header): Add link content * fix(column_header): Use h1 tag * fix(column_header): Labels move buttons moving column * fix(settings_text): Add label to input * fix(column_header): Remove role from h1 * fix(modal_root): Use role=dialog * fix(modal_root): Focus restauration * fix(modal_root): Apply inert to sibligs * fix(column_header): Add role=button * chore(eslint): Disable jsx-a11y/label-has-for
Diffstat (limited to 'app/javascript/mastodon/features/ui/components/modal_root.js')
-rw-r--r-- | app/javascript/mastodon/features/ui/components/modal_root.js | 28 |
1 files changed, 26 insertions, 2 deletions
diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js index 4a917e0a3..3ca19e4d5 100644 --- a/app/javascript/mastodon/features/ui/components/modal_root.js +++ b/app/javascript/mastodon/features/ui/components/modal_root.js @@ -44,10 +44,34 @@ export default class ModalRoot extends React.PureComponent { window.addEventListener('keyup', this.handleKeyUp, false); } + componentWillReceiveProps (nextProps) { + if (!!nextProps.type && !this.props.type) { + this.activeElement = document.activeElement; + + this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true)); + } + } + + componentDidUpdate (prevProps) { + if (!this.type && !!prevProps.type) { + this.getSiblings().forEach(sibling => sibling.removeAttribute('inert')); + this.activeElement.focus(); + this.activeElement = null; + } + } + componentWillUnmount () { window.removeEventListener('keyup', this.handleKeyUp); } + getSiblings = () => { + return Array(...this.node.parentElement.childNodes).filter(node => node !== this.node); + } + + setRef = ref => { + this.node = ref; + } + willEnter () { return { opacity: 0, scale: 0.98 }; } @@ -86,11 +110,11 @@ export default class ModalRoot extends React.PureComponent { willLeave={this.willLeave} > {interpolatedStyles => - <div className='modal-root'> + <div className='modal-root' ref={this.setRef}> {interpolatedStyles.map(({ key, data: { type, props }, style }) => ( <div key={key} style={{ pointerEvents: visible ? 'auto' : 'none' }}> <div role='presentation' className='modal-root__overlay' style={{ opacity: style.opacity }} onClick={onClose} /> - <div className='modal-root__container' style={{ opacity: style.opacity, transform: `translateZ(0px) scale(${style.scale})` }}> + <div role='dialog' className='modal-root__container' style={{ opacity: style.opacity, transform: `translateZ(0px) scale(${style.scale})` }}> <BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading} error={this.renderError} renderDelay={200}> {(SpecificComponent) => <SpecificComponent {...props} onClose={onClose} />} </BundleContainer> |