Move aria-hidden management from the BaseDialog component to the Modal

pull/21833/head
Peter Vágner 2017-12-20 10:09:26 +01:00
parent 9f5857a7cc
commit 20c485d85e
2 changed files with 14 additions and 18 deletions

View File

@ -186,11 +186,25 @@ class ModalManager {
} }
_reRender() { _reRender() {
// Retrieve the root node of the Riot application outside the modal
let applicationNode = document.getElementById('matrixchat');
if (this._modals.length == 0) { 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');
}
ReactDOM.unmountComponentAtNode(this.getOrCreateContainer()); ReactDOM.unmountComponentAtNode(this.getOrCreateContainer());
return; 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');
}
const modal = this._modals[0]; const modal = this._modals[0];
const dialog = ( const dialog = (
<div className={"mx_Dialog_wrapper " + (modal.className ? modal.className : '')}> <div className={"mx_Dialog_wrapper " + (modal.className ? modal.className : '')}>

View File

@ -49,24 +49,6 @@ export default React.createClass({
contentId: React.PropTypes.string, contentId: React.PropTypes.string,
}, },
componentDidMount: function() {
// Retrieve the root node of the Riot application outside the dialog
this.applicationNode = document.getElementById('matrixchat');
if (this.applicationNode) {
// Hide the content outside the dialog to screen reader users
// so they won't be able to navigate into it and act on it using
// screen reader specific features
this.applicationNode.setAttribute('aria-hidden', 'true');
}
},
componentWillUnmount: function() {
if (this.applicationNode) {
// When dismissing the dialog, make all of Riot available to screen reader users again
this.applicationNode.setAttribute('aria-hidden', 'false');
}
},
_onKeyDown: function(e) { _onKeyDown: function(e) {
if (e.keyCode === KeyCode.ESCAPE) { if (e.keyCode === KeyCode.ESCAPE) {
e.stopPropagation(); e.stopPropagation();