From 4171675221fbea38f3f1f2c53113ebcbda38b58b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20V=C3=A1gner?= Date: Thu, 7 Dec 2017 09:44:00 +0100 Subject: [PATCH] Add some comments explaining how we are using aria-hidden property to hide content outside of the BaseDialog to screen reader users. --- src/components/views/dialogs/BaseDialog.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js index face7ee0cb..c72f45c078 100644 --- a/src/components/views/dialogs/BaseDialog.js +++ b/src/components/views/dialogs/BaseDialog.js @@ -50,14 +50,19 @@ export default React.createClass({ }, 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'); } },