Merge pull request #2194 from pvagner/more_accessible_buttons

More accessible buttons - take 2

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>

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>
         );

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

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>

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(

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>
         );

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;

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

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" />

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,7 +344,7 @@ 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"
@@ -352,18 +352,18 @@ export default class Stickerpicker extends React.Component {
                     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}

src/components/views/settings/DevicesPanel.js

@@ -164,6 +164,7 @@ export default class DevicesPanel extends React.Component {
 
     render() {
         const Spinner = sdk.getComponent("elements.Spinner");
+        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
 
         if (this.state.deviceLoadError !== undefined) {
             const classes = classNames(this.props.className, "error");
@@ -185,9 +186,9 @@ export default class DevicesPanel extends React.Component {
 
         const deleteButton = this.state.deleting ?
             <Spinner w={22} h={22} /> :
-            <div className="mx_textButton" onClick={this._onDeleteClick}>
+            <AccessibleButton className="mx_textButton" onClick={this._onDeleteClick}>
                { _t("Delete %(count)s devices", {count: this.state.selectedDevices.length}) }
-            </div>;
+            </AccessibleButton>;
 
         const classes = classNames(this.props.className, "mx_DevicesPanel");
         return (

src/components/views/voip/CallView.js

@@ -125,14 +125,15 @@ module.exports = React.createClass({
 
     render: function() {
         const VideoView = sdk.getComponent('voip.VideoView');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
         let voice;
         if (this.state.call && this.state.call.type === "voice" && this.props.showVoice) {
             const callRoom = MatrixClientPeg.get().getRoom(this.state.call.roomId);
             voice = (
-                <div className="mx_CallView_voice" onClick={this.props.onClick}>
+                <AccessibleButton className="mx_CallView_voice" onClick={this.props.onClick}>
                 { _t("Active call (%(roomName)s)", {roomName: callRoom.name}) }
-                </div>
+                </AccessibleButton>
             );
         }