mirror of https://github.com/vector-im/riot-web
Move aria-hidden management from the BaseDialog component to the Modal
parent
9f5857a7cc
commit
20c485d85e
14
src/Modal.js
14
src/Modal.js
|
@ -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 : '')}>
|
||||||
|
|
|
@ -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();
|
||||||
|
|
Loading…
Reference in New Issue