From 8d79716421253002ae3a640ad7f6dcf77d885e3e Mon Sep 17 00:00:00 2001
From: Jani Mustonen <janijohannes@kapsi.fi>
Date: Fri, 6 Jan 2017 16:41:35 +0200
Subject: [PATCH] Turned the links to buttons to comply with MDN's
 recommendations

---
 src/components/structures/UserSettings.js     |  4 ++--
 .../views/dialogs/ChatInviteDialog.js         |  4 ++--
 src/components/views/rooms/RoomHeader.js      | 20 +++++++++----------
 src/components/views/rooms/RoomTile.js        |  4 ++--
 .../views/rooms/SimpleRoomHeader.js           |  2 +-
 .../views/settings/ChangePassword.js          |  4 ++--
 6 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index cd07a91475..b104352096 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -663,9 +663,9 @@ module.exports = React.createClass({
 
                 <div className="mx_UserSettings_section">
 
-                    <a tabindex="0" className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
+                    <button className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
                         Sign out
-                    </a>
+                    </button>
 
                     {accountJsx}
                 </div>
diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index 5c6c627d58..fe33ea6d1c 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -409,9 +409,9 @@ module.exports = React.createClass({
                 <div className="mx_Dialog_title">
                     {this.props.title}
                 </div>
-                <a tabindex="0" className="mx_ChatInviteDialog_cancel" onClick={this.onCancel} >
+                <button className="mx_ChatInviteDialog_cancel" onClick={this.onCancel} >
                     <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
-                </a>
+                </button>
                 <div className="mx_ChatInviteDialog_label">
                     <label htmlFor="textinput">{ this.props.description }</label>
                 </div>
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index bfcaa6b172..92cc6c64fd 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -182,8 +182,8 @@ module.exports = React.createClass({
                 'm.room.name', user_id
             );
 
-            save_button = <a tabindex="0" className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</a>
-            cancel_button = <a tabindex="0" className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </a>
+            save_button = <button className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</button>
+            cancel_button = <button className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </button>
         }
 
         if (this.props.saving) {
@@ -275,9 +275,9 @@ module.exports = React.createClass({
         var settings_button;
         if (this.props.onSettingsClick) {
             settings_button =
-                <a tabindex="0" className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title="Settings">
+                <button className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title="Settings">
                     <TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
-                </a>;
+                </button>;
         }
 
 //        var leave_button;
@@ -291,17 +291,17 @@ module.exports = React.createClass({
         var forget_button;
         if (this.props.onForgetClick) {
             forget_button =
-                <a tabindex="0" className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title="Forget room">
+                <button className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title="Forget room">
                     <TintableSvg src="img/leave.svg" width="26" height="20"/>
-                </a>;
+                </button>;
         }
 
         var rightPanel_buttons;
         if (this.props.collapsedRhs) {
             rightPanel_buttons =
-                <a tabindex="0" className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title="<">
+                <button className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title="<">
                     <TintableSvg src="img/minimise.svg" width="10" height="16"/>
-                </a>
+                </button>
         }
 
         var right_row;
@@ -310,9 +310,9 @@ module.exports = React.createClass({
                 <div className="mx_RoomHeader_rightRow">
                     { settings_button }
                     { forget_button }
-                    <a tabindex="0" className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
+                    <button className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
                         <TintableSvg src="img/icons-search.svg" width="35" height="35"/>
-                    </a>
+                    </button>
                     { rightPanel_buttons }
                 </div>;
         }
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index fce2868d50..6cd9795bdc 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -287,7 +287,7 @@ module.exports = React.createClass({
         var connectDropTarget = this.props.connectDropTarget;
 
         let ret = (
-            <a tabindex="0" className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+            <button className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
                 <div className={avatarClasses}>
                     <div className="mx_RoomTile_avatar_menu" onClick={this.onAvatarClicked}>
                         <div className={avatarContainerClasses}>
@@ -302,7 +302,7 @@ module.exports = React.createClass({
                 </div>
                 {/* { incomingCallBox } */}
                 { tooltip }
-            </a>
+            </button>
         );
 
         if (connectDropTarget) ret = connectDropTarget(ret);
diff --git a/src/components/views/rooms/SimpleRoomHeader.js b/src/components/views/rooms/SimpleRoomHeader.js
index 84c6802b3d..3c08fac821 100644
--- a/src/components/views/rooms/SimpleRoomHeader.js
+++ b/src/components/views/rooms/SimpleRoomHeader.js
@@ -44,7 +44,7 @@ module.exports = React.createClass({
 
         var cancelButton;
         if (this.props.onCancelClick) {
-            cancelButton = <a tabindex="0" className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </a>
+            cancelButton = <button className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </button>
         }
 
         var showRhsButton;
diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js
index 74658a09e5..84f049fdad 100644
--- a/src/components/views/settings/ChangePassword.js
+++ b/src/components/views/settings/ChangePassword.js
@@ -136,9 +136,9 @@ module.exports = React.createClass({
                                 <input id="password2" type="password" ref="confirm_input" />
                             </div>
                         </div>
-                        <a tabindex="0" className={buttonClassName} onClick={this.onClickChange}>
+                        <button className={buttonClassName} onClick={this.onClickChange}>
                             Change Password
-                        </a>
+                        </button>
                     </div>
                 );
             case this.Phases.Uploading: