From cb5c9f2c5ae34e019d34b121e1ee32ce4ab7c6c0 Mon Sep 17 00:00:00 2001
From: Stefan Parviainen <pafcu@iki.fi>
Date: Wed, 29 Nov 2017 21:13:48 +0100
Subject: [PATCH] Make Dialogs more accessible

Signed-off-by: Stefan Parviainen <pafcu@iki.fi>
---
 src/components/views/dialogs/BaseDialog.js     | 8 ++++++--
 src/components/views/dialogs/QuestionDialog.js | 1 +
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js
index 295bb21ea1..aec9af4e98 100644
--- a/src/components/views/dialogs/BaseDialog.js
+++ b/src/components/views/dialogs/BaseDialog.js
@@ -45,6 +45,10 @@ export default React.createClass({
 
         // children should be the content of the dialog
         children: React.PropTypes.node,
+
+        // Id of content element
+        // If provided, this is used to add a aria-describedby attribute
+        contentId: React.PropTypes.string
     },
 
     _onKeyDown: function(e) {
@@ -69,13 +73,13 @@ export default React.createClass({
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         return (
-            <div onKeyDown={this._onKeyDown} className={this.props.className}>
+            <div onKeyDown={this._onKeyDown} className={this.props.className} role="dialog" aria-labelledby='mx_BaseDialog_title' aria-describedby={this.props.contentId}>
                 <AccessibleButton onClick={this._onCancelClick}
                     className="mx_Dialog_cancelButton"
                 >
                     <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
                 </AccessibleButton>
-                <div className='mx_Dialog_title'>
+                <div className='mx_Dialog_title' id='mx_BaseDialog_title'>
                     { this.props.title }
                 </div>
                 { this.props.children }
diff --git a/src/components/views/dialogs/QuestionDialog.js b/src/components/views/dialogs/QuestionDialog.js
index 339b284e2f..db20fd00ed 100644
--- a/src/components/views/dialogs/QuestionDialog.js
+++ b/src/components/views/dialogs/QuestionDialog.js
@@ -66,6 +66,7 @@ export default React.createClass({
             <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished}
                 onEnterPressed={this.onOk}
                 title={this.props.title}
+                contentId='mx_Dialog_content'
             >
                 <div className="mx_Dialog_content">
                     { this.props.description }