Turned buttons from divs to links. Makes it possible for screen readers and hotkeys to recognize the buttons.

src/components/structures/UserSettings.js

@@ -663,9 +663,9 @@ module.exports = React.createClass({
 
                 <div className="mx_UserSettings_section">
 
-                    <div className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
+                    <a tabindex="0" className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
                         Sign out
-                    </div>
+                    </a>
 
                     {accountJsx}
                 </div>

src/components/views/dialogs/ChatInviteDialog.js

@@ -409,9 +409,9 @@ module.exports = React.createClass({
                 <div className="mx_Dialog_title">
                     {this.props.title}
                 </div>
-                <div className="mx_ChatInviteDialog_cancel" onClick={this.onCancel} >
+                <a tabindex="0" className="mx_ChatInviteDialog_cancel" onClick={this.onCancel} >
                     <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
-                </div>
+                </a>
                 <div className="mx_ChatInviteDialog_label">
                     <label htmlFor="textinput">{ this.props.description }</label>
                 </div>

src/components/views/rooms/RoomHeader.js

@@ -182,8 +182,8 @@ module.exports = React.createClass({
                 'm.room.name', user_id
             );
 
-            save_button = <div className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</div>
+            save_button = <a tabindex="0" className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</a>
-            cancel_button = <div className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </div>
+            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>
         }
 
         if (this.props.saving) {
@@ -275,9 +275,9 @@ module.exports = React.createClass({
         var settings_button;
         if (this.props.onSettingsClick) {
             settings_button =
-                <div className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title="Settings">
+                <a tabindex="0" className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title="Settings">
                     <TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
-                </div>;
+                </a>;
         }
 
 //        var leave_button;
@@ -291,17 +291,17 @@ module.exports = React.createClass({
         var forget_button;
         if (this.props.onForgetClick) {
             forget_button =
-                <div className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title="Forget room">
+                <a tabindex="0" className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title="Forget room">
                     <TintableSvg src="img/leave.svg" width="26" height="20"/>
-                </div>;
+                </a>;
         }
 
         var rightPanel_buttons;
         if (this.props.collapsedRhs) {
             rightPanel_buttons =
-                <div className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title="<">
+                <a tabindex="0" className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title="<">
                     <TintableSvg src="img/minimise.svg" width="10" height="16"/>
-                </div>
+                </a>
         }
 
         var right_row;
@@ -310,9 +310,9 @@ module.exports = React.createClass({
                 <div className="mx_RoomHeader_rightRow">
                     { settings_button }
                     { forget_button }
-                    <div className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
+                    <a tabindex="0" className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
                         <TintableSvg src="img/icons-search.svg" width="35" height="35"/>
-                    </div>
+                    </a>
                     { rightPanel_buttons }
                 </div>;
         }

src/components/views/rooms/RoomTile.js

@@ -287,7 +287,7 @@ module.exports = React.createClass({
         var connectDropTarget = this.props.connectDropTarget;
 
         let ret = (
-            <div className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+            <a tabindex="0" 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 }
-            </div>
+            </a>
         );
 
         if (connectDropTarget) ret = connectDropTarget(ret);

src/components/views/rooms/SimpleRoomHeader.js

@@ -44,7 +44,7 @@ module.exports = React.createClass({
 
         var cancelButton;
         if (this.props.onCancelClick) {
-            cancelButton = <div className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </div>
+            cancelButton = <a tabindex="0" className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </a>
         }
 
         var showRhsButton;

src/components/views/settings/ChangePassword.js

@@ -136,9 +136,9 @@ module.exports = React.createClass({
                                 <input id="password2" type="password" ref="confirm_input" />
                             </div>
                         </div>
-                        <div className={buttonClassName} onClick={this.onClickChange}>
+                        <a tabindex="0" className={buttonClassName} onClick={this.onClickChange}>
                             Change Password
-                        </div>
+                        </a>
                     </div>
                 );
             case this.Phases.Uploading: