Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Improve accessibility (part 3) (#4405)

Browse source 
* 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
This commit is contained in:
Sorin Davidoi 2017-07-28 00:54:48 +02:00 • committed by Eugen Rochko
parent f9075577e4
commit 6884dd79ba
43 changed files with 171 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

28
app/javascript/mastodon/features/ui/components/modal_root.js
View file

@ -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>