Merge pull request #2194 from pvagner/more_accessible_buttons

More accessible buttons - take 2
matrix-org · Oct 9, 2018 · 41bc42e · 41bc42e
2 parents a16e92e + 2b394c1
commit 41bc42e
Show file tree

Hide file tree

Showing 15 changed files with 60 additions and 55 deletions.
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
@@ -51,6 +51,7 @@ class HeaderButton extends React.Component {
 
         return <AccessibleButton
             aria-label={this.props.title}
+            aria-expanded={this.props.isHighlighted}
             title={this.props.title}
             className="mx_RightPanel_headerButton"
             onClick={this.onClick} >
@@ -345,11 +346,11 @@ module.exports = React.createClass({
             // being put in the RoomHeader or GroupView header, so only show the minimise
             // button on these 2 screens or you won't be able to re-expand the panel.
             headerButtons.push(
-                <div className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" key="_minimizeButton"
+                <AccessibleButton className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" key="_minimizeButton"
                     title={_t("Hide panel")} aria-label={_t("Hide panel")} onClick={this.onCollapseClick}
                 >
-                    <TintableSvg src="img/minimise.svg" width="10" height="16" />
-                </div>,
+                    <TintableSvg src="img/minimise.svg" width="10" height="16" alt="" />
+                </AccessibleButton>,
             );
         }
 

diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
@@ -223,14 +223,15 @@ module.exports = React.createClass({
             );
         }
 
+            const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
         if (!this.props.atEndOfLiveTimeline) {
             return (
-                <div className="mx_RoomStatusBar_scrollDownIndicator"
+                <AccessibleButton className="mx_RoomStatusBar_scrollDownIndicator"
                         onClick={this.props.onScrollToBottomClick}>
                     <img src="img/scrolldown.svg" width="24" height="24"
                         alt={_t("Scroll to bottom of page")}
                         title={_t("Scroll to bottom of page")} />
-                </div>
+                </AccessibleButton>
             );
         }
 
@@ -385,7 +386,7 @@ module.exports = React.createClass({
         }
 
         return <div className="mx_RoomStatusBar_connectionLostBar">
-            <img src="img/warning.svg" width="24" height="23" title={_t("Warning")} alt={_t("Warning")} />
+            <img src="img/warning.svg" width="24" height="23" title={_t("Warning")} alt="" />
             <div>
                 <div className="mx_RoomStatusBar_connectionLostBar_title">
                     { title }
@@ -485,7 +486,9 @@ module.exports = React.createClass({
                 <div className="mx_RoomStatusBar_indicator">
                     { indicator }
                 </div>
-                { content }
+                <div role="alert">
+                    { content }
+                </div>
             </div>
         );
     },

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
@@ -831,9 +831,9 @@ module.exports = React.createClass({
                 <br />
                 { _t('Privacy is important to us, so we don\'t collect any personal'
                     + ' or identifiable data for our analytics.') }
-                <div className="mx_UserSettings_advanced_spoiler" onClick={Analytics.showDetailsModal}>
+                <AccessibleButton className="mx_UserSettings_advanced_spoiler" onClick={Analytics.showDetailsModal}>
                     { _t('Learn more about how we use analytics.') }
-                </div>
+                </AccessibleButton>
                 { ANALYTICS_SETTINGS.map( this._renderDeviceSetting ) }
             </div>
         </div>;
@@ -1065,9 +1065,9 @@ module.exports = React.createClass({
     _renderWebRtcDeviceSettings: function() {
         if (this.state.mediaDevices === false) {
             return (
-                <p className="mx_UserSettings_link" onClick={this._requestMediaPermissions}>
+                <AccessibleButton element="p" className="mx_UserSettings_link" onClick={this._requestMediaPermissions}>
                     { _t('Missing Media Permissions, click here to request.') }
-                </p>
+                </AccessibleButton>
             );
         } else if (!this.state.mediaDevices) return;
 
@@ -1234,7 +1234,7 @@ module.exports = React.createClass({
                         />
                     </div>
                     <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
-                        <img src="img/cancel-small.svg" width="14" height="14" alt={_t("Remove")}
+                        <AccessibleButton element="img" src="img/cancel-small.svg" width="14" height="14" alt={_t("Remove")}
                             onClick={onRemoveClick} />
                     </div>
                 </div>
@@ -1259,7 +1259,7 @@ module.exports = React.createClass({
                             onValueChanged={this._onAddEmailEditFinished} />
                     </div>
                     <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
-                         <img src="img/plus.svg" width="14" height="14" alt={_t("Add")} onClick={this._addEmail} />
+                         <AccessibleButton element="img" src="img/plus.svg" width="14" height="14" alt={_t("Add")} onClick={this._addEmail} />
                     </div>
                 </div>
             );
@@ -1328,13 +1328,13 @@ module.exports = React.createClass({
                     </div>
 
                     <div className="mx_UserSettings_avatarPicker">
-                        <div className="mx_UserSettings_avatarPicker_remove" onClick={this.onAvatarRemoveClick}>
+                        <AccessibleButton className="mx_UserSettings_avatarPicker_remove" onClick={this.onAvatarRemoveClick}>
                             <img src="img/cancel.svg"
                                 width="15" height="15"
                                 className="mx_filterFlipColor"
                                 alt={_t("Remove avatar")}
                                 title={_t("Remove avatar")} />
-                        </div>
+                        </AccessibleButton>
                         <div onClick={this.onAvatarPickerClick} className="mx_UserSettings_avatarPicker_imgContainer">
                             <ChangeAvatar ref="changeAvatar" initialAvatarUrl={avatarUrl}
                                 showUploadSection={false} className="mx_UserSettings_avatarPicker_img" />
@@ -1395,11 +1395,11 @@ module.exports = React.createClass({
                     </div>
                     <div className="mx_UserSettings_advanced">
                         { _t('Access Token:') + ' ' }
-                        <span className="mx_UserSettings_advanced_spoiler"
+                        <AccessibleButton element="span" className="mx_UserSettings_advanced_spoiler"
                                 onClick={this._showSpoiler}
                                 data-spoiler={MatrixClientPeg.get().getAccessToken()}>
                             &lt;{ _t("click to reveal") }&gt;
-                        </span>
+                        </AccessibleButton>
                     </div>
                     <div className="mx_UserSettings_advanced">
                         { _t("Homeserver is") } { MatrixClientPeg.get().getHomeserverUrl() }

diff --git a/src/components/views/elements/AppWarning.js b/src/components/views/elements/AppWarning.js
@@ -1,12 +1,11 @@
 import React from 'react'; // eslint-disable-line no-unused-vars
 import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
 
 const AppWarning = (props) => {
     return (
         <div className='mx_AppPermissionWarning'>
             <div className='mx_AppPermissionWarningImage'>
-                <img src='img/warning.svg' alt={_t('Warning!')} />
+                <img src='img/warning.svg' alt='' />
             </div>
             <div className='mx_AppPermissionWarningText'>
                 <span className='mx_AppPermissionWarningTextLabel'>{ props.errorMsg }</span>

diff --git a/src/components/views/globals/CookieBar.js b/src/components/views/globals/CookieBar.js
@@ -51,7 +51,7 @@ export default class CookieBar extends React.Component {
         const toolbarClasses = "mx_MatrixToolbar";
         return (
             <div className={toolbarClasses}>
-                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="Warning" />
+                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="" />
                 <div className="mx_MatrixToolbar_content">
                     { this.props.policyUrl ? _t(
                         "Please help improve Riot.im by sending <UsageDataLink>anonymous usage data</UsageDataLink>. " +
@@ -95,7 +95,7 @@ export default class CookieBar extends React.Component {
                     { _t("Yes, I want to help!") }
                 </AccessibleButton>
                 <AccessibleButton className="mx_MatrixToolbar_close" onClick={this.onReject}>
-                    <img src="img/cancel.svg" width="18" height="18" />
+                    <img src="img/cancel.svg" width="18" height="18" alt={_t('Close')} />
                 </AccessibleButton>
             </div>
         );

diff --git a/src/components/views/globals/MatrixToolbar.js b/src/components/views/globals/MatrixToolbar.js
@@ -35,11 +35,11 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_MatrixToolbar">
-                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="Warning"/>
+                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" />
                 <div className="mx_MatrixToolbar_content">
                    { _t('You are not receiving desktop notifications') } <a className="mx_MatrixToolbar_link" onClick={ this.onClick }> { _t('Enable them now') }</a>
                 </div>
-                <AccessibleButton className="mx_MatrixToolbar_close" onClick={ this.hideToolbar } ><img src="img/cancel.svg" width="18" height="18" /></AccessibleButton>
+                <AccessibleButton className="mx_MatrixToolbar_close" onClick={ this.hideToolbar } ><img src="img/cancel.svg" width="18" height="18" alt={_t('Close')}/></AccessibleButton>
             </div>
         );
     },

diff --git a/src/components/views/globals/NewVersionBar.js b/src/components/views/globals/NewVersionBar.js
@@ -96,7 +96,7 @@ export default React.createClass({
         }
         return (
             <div className="mx_MatrixToolbar">
-                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="Warning"/>
+                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" />
                 <div className="mx_MatrixToolbar_content">
                     {_t("A new version of Riot is available.")}
                 </div>

diff --git a/src/components/views/globals/PasswordNagBar.js b/src/components/views/globals/PasswordNagBar.js
@@ -34,7 +34,7 @@ export default React.createClass({
                     src="img/warning.svg"
                     width="24"
                     height="23"
-                    alt="Warning"
+                    alt=""
                 />
                 <div className="mx_MatrixToolbar_content">
                     { _t(

diff --git a/src/components/views/globals/UpdateCheckBar.js b/src/components/views/globals/UpdateCheckBar.js
@@ -71,9 +71,9 @@ export default React.createClass({
 
         let image;
         if (doneStatuses.includes(this.props.status)) {
-            image = <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt={warning}/>;
+            image = <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="" />;
         } else {
-            image = <img className="mx_MatrixToolbar_warning" src="img/spinner.gif" width="24" height="23" alt={message}/>;
+            image = <img className="mx_MatrixToolbar_warning" src="img/spinner.gif" width="24" height="23" alt="" />;
         }
 
         return (
@@ -83,7 +83,7 @@ export default React.createClass({
                     {message}
                 </div>
                 <AccessibleButton className="mx_MatrixToolbar_close" onClick={this.hideToolbar}>
-                    <img src="img/cancel.svg" width="18" height="18" />
+                    <img src="img/cancel.svg" width="18" height="18" alt={_t('Close')}/>
                 </AccessibleButton>
             </div>
         );

diff --git a/src/components/views/rooms/AppsDrawer.js b/src/components/views/rooms/AppsDrawer.js
@@ -30,6 +30,7 @@ import ScalarMessaging from '../../../ScalarMessaging';
 import { _t } from '../../../languageHandler';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import WidgetEchoStore from "../../../stores/WidgetEchoStore";
+import AccessibleButton from '../elements/AccessibleButton';
 
 // The maximum number of widgets that can be added in a room
 const MAX_WIDGETS = 2;
@@ -193,17 +194,15 @@ module.exports = React.createClass({
         if (this.props.showApps &&
             this._canUserModify()
         ) {
-            addWidget = <div
+            addWidget = <AccessibleButton
                 onClick={this.onClickAddWidget}
-                role='button'
-                tabIndex='0'
                 className={this.state.apps.length<2 ?
                     'mx_AddWidget_button mx_AddWidget_button_full_width' :
                     'mx_AddWidget_button'
                 }
                 title={_t('Add a widget')}>
                 [+] { _t('Add a widget') }
-            </div>;
+            </AccessibleButton>;
         }
 
         let spinner;

diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js
@@ -935,7 +935,7 @@ module.exports = withMatrixClient(React.createClass({
             <div className="mx_MemberInfo">
                 <GeminiScrollbarWrapper autoshow={true}>
                     <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}>
-                        <img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" />
+                        <img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" alt={_t('Close')} />
                     </AccessibleButton>
                     <div className="mx_MemberInfo_avatar">
                         <MemberAvatar onClick={this.onMemberAvatarClick} member={this.props.member} width={48} height={48} />

diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
@@ -292,21 +292,22 @@ export default class MessageComposer extends React.Component {
         let videoCallButton;
         let hangupButton;
 
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         // Call buttons
         if (this.props.callState && this.props.callState !== 'ended') {
             hangupButton =
-                <div key="controls_hangup" className="mx_MessageComposer_hangup" onClick={this.onHangupClick}>
+                <AccessibleButton key="controls_hangup" className="mx_MessageComposer_hangup" onClick={this.onHangupClick}>
                     <img src="img/hangup.svg" alt={_t('Hangup')} title={_t('Hangup')} width="25" height="26" />
-                </div>;
+                </AccessibleButton>;
         } else {
             callButton =
-                <div key="controls_call" className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick} title={_t('Voice call')}>
+                <AccessibleButton key="controls_call" className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick} title={_t('Voice call')}>
                     <TintableSvg src="img/icon-call.svg" width="35" height="35" />
-                </div>;
+                </AccessibleButton>;
             videoCallButton =
-                <div key="controls_videocall" className="mx_MessageComposer_videocall" onClick={this.onCallClick} title={_t('Video call')}>
+                <AccessibleButton key="controls_videocall" className="mx_MessageComposer_videocall" onClick={this.onCallClick} title={_t('Video call')}>
                     <TintableSvg src="img/icons-video.svg" width="35" height="35" />
-                </div>;
+                </AccessibleButton>;
         }
 
         const canSendMessages = !this.state.tombstone &&
@@ -317,18 +318,19 @@ export default class MessageComposer extends React.Component {
             // check separately for whether we can call, but this is slightly
             // complex because of conference calls.
             const uploadButton = (
-                <div key="controls_upload" className="mx_MessageComposer_upload"
+                <AccessibleButton key="controls_upload" className="mx_MessageComposer_upload"
                         onClick={this.onUploadClick} title={_t('Upload file')}>
                     <TintableSvg src="img/icons-upload.svg" width="35" height="35" />
                     <input ref="uploadInput" type="file"
                         style={uploadInputStyle}
                         multiple
                         onChange={this.onUploadFileSelected} />
-                </div>
+                </AccessibleButton>
             );
 
             const formattingButton = this.state.inputState.isRichTextEnabled ? (
-                <img className="mx_MessageComposer_formatting"
+                <AccessibleButton element="img" className="mx_MessageComposer_formatting"
+                     alt={_t("Show Text Formatting Toolbar")}
                      title={_t("Show Text Formatting Toolbar")}
                      src="img/button-text-formatting.svg"
                      onClick={this.onToggleFormattingClicked}
@@ -372,7 +374,6 @@ export default class MessageComposer extends React.Component {
         } else if (this.state.tombstone) {
             const replacementRoomId = this.state.tombstone.getContent()['replacement_room'];
 
-            const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
             controls.push(<div className="mx_MessageComposer_replaced_wrapper">
                 <div className="mx_MessageComposer_replaced_valign">
                     <img className="mx_MessageComposer_roomReplaced_icon" src="img/room_replaced.svg" />
@@ -423,7 +424,7 @@ export default class MessageComposer extends React.Component {
                              onMouseDown={this.onToggleMarkdownClicked}
                             className="mx_MessageComposer_formatbar_markdown mx_filterFlipColor"
                             src={`img/button-md-${!this.state.inputState.isRichTextEnabled}.png`} />
-                        <img title={_t("Hide Text Formatting Toolbar")}
+                        <AccessibleButton element="img" title={_t("Hide Text Formatting Toolbar")}
                              onClick={this.onToggleFormattingClicked}
                              className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor"
                              src="img/icon-text-cancel.svg" />

diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js
@@ -151,8 +151,8 @@ export default class Stickerpicker extends React.Component {
             <AccessibleButton onClick={this._launchManageIntegrations}
                 className='mx_Stickers_contentPlaceholder'>
                 <p>{ _t("You don't currently have any stickerpacks enabled") }</p>
-                <p className='mx_Stickers_addLink'>Add some now</p>
-                <img src='img/stickerpack-placeholder.png' alt={_t('Add a stickerpack')} />
+                <p className='mx_Stickers_addLink'>{ _t("Add some now") }</p>
+                <img src='img/stickerpack-placeholder.png' alt="" />
             </AccessibleButton>
         );
     }
@@ -344,26 +344,26 @@ export default class Stickerpicker extends React.Component {
         if (this.state.showStickers) {
             // Show hide-stickers button
             stickersButton =
-                <div
+                <AccessibleButton
                     id='stickersButton'
                     key="controls_hide_stickers"
                     className="mx_MessageComposer_stickers mx_Stickers_hideStickers"
                     onClick={this._onHideStickersClick}
                     ref='target'
                     title={_t("Hide Stickers")}>
                     <TintableSvg src="img/icons-hide-stickers.svg" width="35" height="35" />
-                </div>;
+                </AccessibleButton>;
         } else {
             // Show show-stickers button
             stickersButton =
-                <div
+                <AccessibleButton
                     id='stickersButton'
-                    key="constrols_show_stickers"
+                    key="controls_show_stickers"
                     className="mx_MessageComposer_stickers"
                     onClick={this._onShowStickersClick}
                     title={_t("Show Stickers")}>
                     <TintableSvg src="img/icons-show-stickers.svg" width="35" height="35" />
-                </div>;
+                </AccessibleButton>;
         }
         return <div>
             {stickersButton}