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

src/Modal.js

@@ -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
-                // If there is no modal to render, make all of Riot available
+            // to screen reader users again
-                // to screen reader users again
+            dis.dispatch({
-                applicationNode.setAttribute('aria-hidden', 'false');
+                action: 'aria_unhide_main_app',
-            }
+            });
             ReactDOM.unmountComponentAtNode(this.getOrCreateContainer());
             return;
         }
 
-        if (applicationNode) {
+        // Hide the content outside the modal to screen reader users
-            // 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
-            // so they won't be able to navigate into it and act on it using
+        // screen reader specific features
-            // screen reader specific features
+        dis.dispatch({
-            applicationNode.setAttribute('aria-hidden', 'true');
+            action: 'aria_hide_main_app',
-        }
+        });
 
         const modal = this._modals[0];
         const dialog = (

src/components/structures/LoggedInView.js

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

src/components/structures/MatrixChat.js

@@ -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;
         }
     },