mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 19:56:47 +03:00
Code Issues Projects Releases Packages Wiki Activity

Reimplement setting aria-hidden on the main app node by dispatching actions rather than assuming we can find and manipulate the node directly

Browse source
This commit is contained in:
Peter Vágner 2018-02-08 22:51:07 +01:00
parent 8f97e9479d
commit 410570936a
3 changed files with 27 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/Modal.js
View file

@ -22,6 +22,7 @@ const ReactDOM = require('react-dom');
import PropTypes from 'prop-types';
import Analytics from './Analytics';
import sdk from './index';
import dis from './dispatcher';
const DIALOG_CONTAINER_ID = "mx_Dialog_Container";
@ -187,24 +188,22 @@ class ModalManager {
}
_reRender() {
// Retrieve the root node of the Riot application outside the modal
let applicationNode = document.getElementById('matrixchat');
if (this._modals.length == 0) {
if (applicationNode) {
// If there is no modal to render, make all of Riot available
// to screen reader users again
applicationNode.setAttribute('aria-hidden', 'false');
}
// If there is no modal to render, make all of Riot available
// to screen reader users again
dis.dispatch({
action: 'aria_unhide_main_app',
});
ReactDOM.unmountComponentAtNode(this.getOrCreateContainer());
return;
}
if (applicationNode) {
// Hide the content outside the modal to screen reader users
// so they won't be able to navigate into it and act on it using
// screen reader specific features
applicationNode.setAttribute('aria-hidden', 'true');
}
// Hide the content outside the modal to screen reader users
// so they won't be able to navigate into it and act on it using
// screen reader specific features
dis.dispatch({
action: 'aria_hide_main_app',
});
const modal = this._modals[0];
const dialog = (

2
src/components/structures/LoggedInView.js
View file

@ -327,7 +327,7 @@ const LoggedInView = React.createClass({
}
return (
<div className='mx_MatrixChat_wrapper'>
<div className='mx_MatrixChat_wrapper' aria-hidden={this.props.hideToSRUsers}>
{ topBar }
<div className={bodyClasses}>
{ SettingsStore.isFeatureEnabled("feature_tag_panel") ? <TagPanel /> : <div /> }

14
src/components/structures/MatrixChat.js
View file

@ -171,6 +171,10 @@ export default React.createClass({
register_hs_url: null,
register_is_url: null,
register_id_sid: null,
// When showing Modal dialogs we need to set aria-hidden on the root app element
// and disable it when there are no dialogs
hideToSRUsers: false,
};
return s;
},
@ -608,6 +612,16 @@ export default React.createClass({
case 'send_event':
this.onSendEvent(payload.room_id, payload.event);
break;
case 'aria_hide_main_app':
this.setState({
hideToSRUsers: true,
});
break;
case 'aria_unhide_main_app':
this.setState({
hideToSRUsers: false,
});
break;
}
},