From ded35e43a04cf01c94f4b30f9c0b9f58d2ba6db2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20V=C3=A1gner?= <pvdeejay@gmail.com>
Date: Tue, 2 Oct 2018 13:55:24 +0200
Subject: [PATCH 1/3] A11y: repurpose more divs into AccessibleButtons. With
 this more of the controls that look like buttons can be operated via the
 keyboard and navigated to by screen reader users. This includes editor
 buttons such as File upload, Audio / Video call, Right pannel hide button,
 Jump to the bottom timeline button, and some more buttons found in the user
 settings. Also I have added alt texts to some images that in turn label
 buttons which these happen to be packed in and removed some untranslated alt
 texts from decorative non-actionable images that might add more verbosity
 when talking about screen reader user experience.

---
 src/components/structures/RightPanel.js       |  7 +++--
 src/components/structures/RoomStatusBar.js    | 11 +++++---
 src/components/structures/UserSettings.js     | 28 +++++++++----------
 src/components/views/elements/AppWarning.js   |  2 +-
 src/components/views/globals/CookieBar.js     |  4 +--
 src/components/views/globals/MatrixToolbar.js |  4 +--
 src/components/views/globals/NewVersionBar.js |  2 +-
 .../views/globals/PasswordNagBar.js           |  2 +-
 .../views/globals/UpdateCheckBar.js           |  6 ++--
 src/components/views/rooms/AppsDrawer.js      |  7 ++---
 src/components/views/rooms/MemberInfo.js      |  2 +-
 src/components/views/rooms/MessageComposer.js | 23 +++++++--------
 src/components/views/settings/DevicesPanel.js |  5 ++--
 src/components/views/voip/CallView.js         |  5 ++--
 14 files changed, 57 insertions(+), 51 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 86870718e8e..9017447a343 100644
--- 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
index fec59aadd57..4f9ac153f5e 100644
--- 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
index 68009a74a87..7b79eebbb66 100644
--- 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;
 
@@ -1233,10 +1233,10 @@ module.exports = React.createClass({
                             value={this.presentableTextForThreepid(val)} disabled
                         />
                     </div>
-                    <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
+                    <AccessibleButton className="mx_UserSettings_threepidButton mx_filterFlipColor">
                         <img src="img/cancel-small.svg" width="14" height="14" alt={_t("Remove")}
                             onClick={onRemoveClick} />
-                    </div>
+                    </AccessibleButton>
                 </div>
             );
         });
@@ -1258,9 +1258,9 @@ module.exports = React.createClass({
                             blurToCancel={false}
                             onValueChanged={this._onAddEmailEditFinished} />
                     </div>
-                    <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
+                    <AccessibleButton className="mx_UserSettings_threepidButton mx_filterFlipColor">
                          <img src="img/plus.svg" width="14" height="14" alt={_t("Add")} onClick={this._addEmail} />
-                    </div>
+                    </AccessibleButton>
                 </div>
             );
         }
@@ -1328,25 +1328,25 @@ 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" />
                         </div>
-                        <div className="mx_UserSettings_avatarPicker_edit">
+                        <AccessibleButton className="mx_UserSettings_avatarPicker_edit">
                             <label htmlFor="avatarInput" ref="file_label">
                                 <img src="img/camera.svg" className="mx_filterFlipColor"
                                     alt={_t("Upload avatar")} title={_t("Upload avatar")}
                                     width="17" height="15" />
                             </label>
                             <input id="avatarInput" type="file" onChange={this.onAvatarSelected} />
-                        </div>
+                        </AccessibleButton>
                     </div>
                 </div>
 
@@ -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
index f4015ae5b70..60809f5ca1c 100644
--- a/src/components/views/elements/AppWarning.js
+++ b/src/components/views/elements/AppWarning.js
@@ -6,7 +6,7 @@ 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
index a63a163dd15..3dc618edf5c 100644
--- 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
index f85a30bcdfb..45feede5a08 100644
--- 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
index 527df5f8641..1bd0bde5263 100644
--- 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
index 4233363b954..5e3da3ad6d8 100644
--- 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
index 53801311d8c..e499ddab314 100644
--- 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
index e6fe445b451..77d912ef2ae 100644
--- 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
index e6e63500839..ff5f41c7d10 100644
--- 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
index c5e389aa069..66f3fdaa974 100644
--- 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/settings/DevicesPanel.js b/src/components/views/settings/DevicesPanel.js
index f0fec2cf63c..25850819bd5 100644
--- a/src/components/views/settings/DevicesPanel.js
+++ b/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 (
diff --git a/src/components/views/voip/CallView.js b/src/components/views/voip/CallView.js
index 47e8ae22db9..1a84d23f9bb 100644
--- a/src/components/views/voip/CallView.js
+++ b/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>
             );
         }
 

From e05ae29146d2fe13208cbc50ea2657593aaa5582 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20V=C3=A1gner?= <pvdeejay@gmail.com>
Date: Tue, 2 Oct 2018 20:19:21 +0200
Subject: [PATCH 2/3] Also fix accessibility of sticker buttons

---
 src/components/views/rooms/Stickerpicker.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js
index 841cfb9b03a..40b17682826 100644
--- 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,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}

From 2b394c18697457772e59d32a74edd270b70cba49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20V=C3=A1gner?= <pvdeejay@gmail.com>
Date: Tue, 2 Oct 2018 20:32:54 +0200
Subject: [PATCH 3/3] Address review comments and fix lint errors

---
 src/components/structures/UserSettings.js   | 16 ++++++++--------
 src/components/views/elements/AppWarning.js |  1 -
 src/components/views/globals/CookieBar.js   |  2 +-
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 7b79eebbb66..129278907f2 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -1233,10 +1233,10 @@ module.exports = React.createClass({
                             value={this.presentableTextForThreepid(val)} disabled
                         />
                     </div>
-                    <AccessibleButton className="mx_UserSettings_threepidButton mx_filterFlipColor">
-                        <img src="img/cancel-small.svg" width="14" height="14" alt={_t("Remove")}
+                    <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
+                        <AccessibleButton element="img" src="img/cancel-small.svg" width="14" height="14" alt={_t("Remove")}
                             onClick={onRemoveClick} />
-                    </AccessibleButton>
+                    </div>
                 </div>
             );
         });
@@ -1258,9 +1258,9 @@ module.exports = React.createClass({
                             blurToCancel={false}
                             onValueChanged={this._onAddEmailEditFinished} />
                     </div>
-                    <AccessibleButton className="mx_UserSettings_threepidButton mx_filterFlipColor">
-                         <img src="img/plus.svg" width="14" height="14" alt={_t("Add")} onClick={this._addEmail} />
-                    </AccessibleButton>
+                    <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
+                         <AccessibleButton element="img" src="img/plus.svg" width="14" height="14" alt={_t("Add")} onClick={this._addEmail} />
+                    </div>
                 </div>
             );
         }
@@ -1339,14 +1339,14 @@ module.exports = React.createClass({
                             <ChangeAvatar ref="changeAvatar" initialAvatarUrl={avatarUrl}
                                 showUploadSection={false} className="mx_UserSettings_avatarPicker_img" />
                         </div>
-                        <AccessibleButton className="mx_UserSettings_avatarPicker_edit">
+                        <div className="mx_UserSettings_avatarPicker_edit">
                             <label htmlFor="avatarInput" ref="file_label">
                                 <img src="img/camera.svg" className="mx_filterFlipColor"
                                     alt={_t("Upload avatar")} title={_t("Upload avatar")}
                                     width="17" height="15" />
                             </label>
                             <input id="avatarInput" type="file" onChange={this.onAvatarSelected} />
-                        </AccessibleButton>
+                        </div>
                     </div>
                 </div>
 
diff --git a/src/components/views/elements/AppWarning.js b/src/components/views/elements/AppWarning.js
index 60809f5ca1c..38d3476d537 100644
--- a/src/components/views/elements/AppWarning.js
+++ b/src/components/views/elements/AppWarning.js
@@ -1,6 +1,5 @@
 import React from 'react'; // eslint-disable-line no-unused-vars
 import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
 
 const AppWarning = (props) => {
     return (
diff --git a/src/components/views/globals/CookieBar.js b/src/components/views/globals/CookieBar.js
index 3dc618edf5c..deb1cbffa8d 100644
--- a/src/components/views/globals/CookieBar.js
+++ b/src/components/views/globals/CookieBar.js
@@ -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" alt={_t('Close')}/>
+                    <img src="img/cancel.svg" width="18" height="18" alt={_t('Close')} />
                 </AccessibleButton>
             </div>
         );