OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Make Dialogs more accessible 

Signed-off-by: Stefan Parviainen <pafcu@iki.fi>
pull/21833/head
Stefan Parviainen 2017-11-29 21:13:48 +01:00
parent 7118f7a38f
commit cb5c9f2c5a
2 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/views/dialogs/BaseDialog.js
View File

@ -45,6 +45,10 @@ export default React.createClass({
// children should be the content of the dialog // children should be the content of the dialog
children: React.PropTypes.node, 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) { _onKeyDown: function(e) {
@ -69,13 +73,13 @@ export default React.createClass({
const TintableSvg = sdk.getComponent("elements.TintableSvg"); const TintableSvg = sdk.getComponent("elements.TintableSvg");
return ( 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} <AccessibleButton onClick={this._onCancelClick}
className="mx_Dialog_cancelButton" className="mx_Dialog_cancelButton"
> >
<TintableSvg src="img/icons-close-button.svg" width="35" height="35" /> <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
</AccessibleButton> </AccessibleButton>
<div className='mx_Dialog_title'> <div className='mx_Dialog_title' id='mx_BaseDialog_title'>
{ this.props.title } { this.props.title }
</div> </div>
{ this.props.children } { this.props.children }

1
src/components/views/dialogs/QuestionDialog.js
View File

@ -66,6 +66,7 @@ export default React.createClass({
<BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished} <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished}
onEnterPressed={this.onOk} onEnterPressed={this.onOk}
title={this.props.title} title={this.props.title}
contentId='mx_Dialog_content'
> >
<div className="mx_Dialog_content"> <div className="mx_Dialog_content">
{ this.props.description } { this.props.description }