Proper accessible buttons

src/components/structures/UserSettings.js

@@ -26,6 +26,7 @@ var UserSettingsStore = require('../../UserSettingsStore');
 var GeminiScrollbar = require('react-gemini-scrollbar');
 var Email = require('../../email');
 var AddThreepid = require('../../AddThreepid');
+var AccessibleButton = require('../views/elements/AccessibleButton');
 
 // if this looks like a release, use the 'version' from package.json; else use
 // the git sha.
@@ -470,9 +471,9 @@ module.exports = React.createClass({
         return <div>
             <h3>Deactivate Account</h3>
                 <div className="mx_UserSettings_section">
-                    <button className="mx_UserSettings_button danger"
+                    <AccessibleButton className="mx_UserSettings_button danger"
                         onClick={this._onDeactivateAccountClicked}>Deactivate my account
-                    </button>
+                    </AccessibleButton>
                 </div>
         </div>;
     },
@@ -492,10 +493,10 @@ module.exports = React.createClass({
             // bind() the invited rooms so any new invites that may come in as this button is clicked
             // don't inadvertently get rejected as well.
             reject = (
-                <button className="mx_UserSettings_button danger"
+                <AccessibleButton className="mx_UserSettings_button danger"
                 onClick={this._onRejectAllInvitesClicked.bind(this, invitedRooms)}>
                     Reject all {invitedRooms.length} invites
-                </button>
+                </AccessibleButton>
             );
         }
 
@@ -663,9 +664,9 @@ module.exports = React.createClass({
 
                 <div className="mx_UserSettings_section">
 
-                    <button className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
+                    <AccessibleButton className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
                         Sign out
-                    </button>
+                    </AccessibleButton>
 
                     {accountJsx}
                 </div>

src/components/views/avatars/BaseAvatar.js

@@ -19,6 +19,7 @@ limitations under the License.
 var React = require('react');
 var AvatarLogic = require("../../../Avatar");
 import sdk from '../../../index';
+var AccessibleButton = require('../elements/AccessibleButton');
 
 module.exports = React.createClass({
     displayName: 'BaseAvatar',
@@ -158,13 +159,13 @@ module.exports = React.createClass({
         }
         if (onClick != null) {
             return (
-                <button className="mx_BaseAvatar" onClick={onClick}>
+                <AccessibleButton className="mx_BaseAvatar" onClick={onClick}>
                     <img className="mx_BaseAvatar_image" src={imageUrl}
                         onError={this.onError}
                         width={width} height={height}
                         title={title} alt=""
                         {...otherProps} />
-                </button>
+                </AccessibleButton>
             );
         } else {
             return (

src/components/views/dialogs/ChatInviteDialog.js

@@ -24,6 +24,7 @@ var DMRoomMap = require('../../../utils/DMRoomMap');
 var rate_limited_func = require("../../../ratelimitedfunc");
 var dis = require("../../../dispatcher");
 var Modal = require('../../../Modal');
+var AccessibleButton = require('../elements/AccessibleButton');
 
 const TRUNCATE_QUERY_LIST = 40;
 
@@ -409,9 +410,9 @@ module.exports = React.createClass({
                 <div className="mx_Dialog_title">
                     {this.props.title}
                 </div>
-                <button className="mx_ChatInviteDialog_cancel" onClick={this.onCancel} >
+                <AccessibleButton className="mx_ChatInviteDialog_cancel" onClick={this.onCancel} >
                     <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
-                </button>
+                </AccessibleButton>
                 <div className="mx_ChatInviteDialog_label">
                     <label htmlFor="textinput">{ this.props.description }</label>
                 </div>

src/components/views/rooms/EntityTile.js

@@ -20,6 +20,7 @@ var React = require('react');
 
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 var sdk = require('../../../index');
+var AccessibleButton = require('../elements/AccessibleButton');
 
 
 var PRESENCE_CLASS = {
@@ -152,7 +153,7 @@ module.exports = React.createClass({
         var av = this.props.avatarJsx || <BaseAvatar name={this.props.name} width={36} height={36} />;
 
         return (
-            <button className={mainClassName} title={ this.props.title }
+            <AccessibleButton className={mainClassName} title={ this.props.title }
                     onClick={ this.props.onClick } onMouseEnter={ this.mouseEnter }
                     onMouseLeave={ this.mouseLeave }>
                 <div className="mx_EntityTile_avatar">
@@ -161,7 +162,7 @@ module.exports = React.createClass({
                 </div>
                 { nameEl }
                 { inviteButton }
-            </button>
+            </AccessibleButton>
         );
     }
 });

src/components/views/rooms/MemberInfo.js

@@ -35,6 +35,7 @@ var DMRoomMap = require('../../../utils/DMRoomMap');
 var Unread = require('../../../Unread');
 var Receipt = require('../../../utils/Receipt');
 var WithMatrixClient = require('../../../wrappers/WithMatrixClient');
+var AccessibleButton = require('../elements/AccessibleButton');
 
 module.exports = WithMatrixClient(React.createClass({
     displayName: 'MemberInfo',
@@ -612,7 +613,7 @@ module.exports = WithMatrixClient(React.createClass({
                 mx_MemberInfo_createRoom_label: true,
                 mx_RoomTile_name: true,
             });
-            const startNewChat = <button
+            const startNewChat = <AccessibleButton
                 className="mx_MemberInfo_createRoom"
                 onClick={this.onNewDMClick}
             >
@@ -620,7 +621,7 @@ module.exports = WithMatrixClient(React.createClass({
                     <img src="img/create-big.svg" width="26" height="26" />
                 </div>
                 <div className={labelClasses}><i>Start new chat</i></div>
-            </button>
+            </AccessibleButton>
 
             startChat = <div>
                 <h3>Direct chats</h3>
@@ -635,26 +636,26 @@ module.exports = WithMatrixClient(React.createClass({
         }
 
         if (this.state.can.kick) {
-            kickButton = <button className="mx_MemberInfo_field" onClick={this.onKick}>
+            kickButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onKick}>
                 { this.props.member.membership === "invite" ? "Disinvite" : "Kick" }
-            </button>;
+            </AccessibleButton>;
         }
         if (this.state.can.ban) {
-            banButton = <button className="mx_MemberInfo_field" onClick={this.onBan}>
+            banButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onBan}>
                 Ban
-            </button>;
+            </AccessibleButton>;
         }
         if (this.state.can.mute) {
             var muteLabel = this.state.muted ? "Unmute" : "Mute";
-            muteButton = <button className="mx_MemberInfo_field" onClick={this.onMuteToggle}>
+            muteButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onMuteToggle}>
                 {muteLabel}
-            </button>;
+            </AccessibleButton>;
         }
         if (this.state.can.toggleMod) {
             var giveOpLabel = this.state.isTargetMod ? "Revoke Moderator" : "Make Moderator";
-            giveModButton = <button className="mx_MemberInfo_field" onClick={this.onModToggle}>
+            giveModButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onModToggle}>
                 {giveOpLabel}
-            </button>
+            </AccessibleButton>
         }
 
         // TODO: we should have an invite button if this MemberInfo is showing a user who isn't actually in the current room yet
@@ -682,7 +683,7 @@ module.exports = WithMatrixClient(React.createClass({
         const EmojiText = sdk.getComponent('elements.EmojiText');
         return (
             <div className="mx_MemberInfo">
-                <button className="mx_MemberInfo_cancel" onClick={this.onCancel}> <img src="img/cancel.svg" width="18" height="18"/></button>
+                <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}> <img src="img/cancel.svg" width="18" height="18"/></AccessibleButton>
                 <div className="mx_MemberInfo_avatar">
                     <MemberAvatar onClick={this.onMemberAvatarClick} member={this.props.member} width={48} height={48} />
                 </div>

src/components/views/rooms/ReadReceiptMarker.js

@@ -192,9 +192,9 @@ module.exports = React.createClass({
                     width={14} height={14} resizeMethod="crop"
                     style={style}
                     title={title}
-                    onClick={this.props.onClick}
                 />
             </Velociraptor>
         );
+        /* onClick={this.props.onClick} */
     },
 });

src/components/views/rooms/RoomHeader.js

@@ -26,6 +26,7 @@ var rate_limited_func = require('../../../ratelimitedfunc');
 var linkify = require('linkifyjs');
 var linkifyElement = require('linkifyjs/element');
 var linkifyMatrix = require('../../../linkify-matrix');
+var AccessibleButton = require('../elements/AccessibleButton');
 
 linkifyMatrix(linkify);
 
@@ -182,8 +183,8 @@ module.exports = React.createClass({
                 'm.room.name', user_id
             );
 
-            save_button = <button className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</button>
+            save_button = <AccessibleButton className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</AccessibleButton>
-            cancel_button = <button className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </button>
+            cancel_button = <AccessibleButton className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </AccessibleButton>
         }
 
         if (this.props.saving) {
@@ -275,9 +276,9 @@ module.exports = React.createClass({
         var settings_button;
         if (this.props.onSettingsClick) {
             settings_button =
-                <button className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title="Settings">
+                <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title="Settings">
                     <TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
-                </button>;
+                </AccessibleButton>;
         }
 
 //        var leave_button;
@@ -291,17 +292,17 @@ module.exports = React.createClass({
         var forget_button;
         if (this.props.onForgetClick) {
             forget_button =
-                <button className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title="Forget room">
+                <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title="Forget room">
                     <TintableSvg src="img/leave.svg" width="26" height="20"/>
-                </button>;
+                </AccessibleButton>;
         }
 
         var rightPanel_buttons;
         if (this.props.collapsedRhs) {
             rightPanel_buttons =
-                <button className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title="<">
+                <AccessibleButton className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title="<">
                     <TintableSvg src="img/minimise.svg" width="10" height="16"/>
-                </button>
+                </AccessibleButton>
         }
 
         var right_row;
@@ -310,9 +311,9 @@ module.exports = React.createClass({
                 <div className="mx_RoomHeader_rightRow">
                     { settings_button }
                     { forget_button }
-                    <button className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
+                    <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
                         <TintableSvg src="img/icons-search.svg" width="35" height="35"/>
-                    </button>
+                    </AccessibleButton>
                     { rightPanel_buttons }
                 </div>;
         }

src/components/views/rooms/RoomTile.js

@@ -26,6 +26,7 @@ var sdk = require('../../../index');
 var ContextualMenu = require('../../structures/ContextualMenu');
 var RoomNotifs = require('../../../RoomNotifs');
 var FormattingUtils = require('../../../utils/FormattingUtils');
+var AccessibleButton = require('../elements/AccessibleButton');
 
 module.exports = React.createClass({
     displayName: 'RoomTile',
@@ -286,8 +287,10 @@ module.exports = React.createClass({
         var connectDragSource = this.props.connectDragSource;
         var connectDropTarget = this.props.connectDropTarget;
 
+        
         let ret = (
-            <button className={classes} tabIndex="0" onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+            <div> { /* Only native elements can be wrapped in a DnD object. */}
+            <AccessibleButton className={classes} tabIndex="0" 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 +305,8 @@ module.exports = React.createClass({
                 </div>
                 {/* { incomingCallBox } */}
                 { tooltip }
-            </button>
+            </AccessibleButton>
+            </div>
         );
 
         if (connectDropTarget) ret = connectDropTarget(ret);

src/components/views/rooms/SimpleRoomHeader.js

@@ -19,6 +19,7 @@ limitations under the License.
 var React = require('react');
 var sdk = require('../../../index');
 var dis = require("../../../dispatcher");
+var AccessibleButton = require('../elements/AccessibleButton');
 
 /*
  * A stripped-down room header used for things like the user settings
@@ -44,7 +45,7 @@ module.exports = React.createClass({
 
         var cancelButton;
         if (this.props.onCancelClick) {
-            cancelButton = <button className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </button>
+            cancelButton = <AccessibleButton className="mx_RoomHeader_cancelButton" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" alt="Cancel"/> </AccessibleButton>
         }
 
         var showRhsButton;

src/components/views/settings/ChangePassword.js

@@ -19,6 +19,7 @@ limitations under the License.
 var React = require('react');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var sdk = require("../../../index");
+var AccessibleButton = require('../elements/AccessibleButton');
 
 module.exports = React.createClass({
     displayName: 'ChangePassword',
@@ -136,9 +137,9 @@ module.exports = React.createClass({
                                 <input id="password2" type="password" ref="confirm_input" />
                             </div>
                         </div>
-                        <button className={buttonClassName} onClick={this.onClickChange}>
+                        <AccessibleButton className={buttonClassName} onClick={this.onClickChange}>
                             Change Password
-                        </button>
+                        </AccessibleButton>
                     </div>
                 );
             case this.Phases.Uploading: