Buttonified almost everything. Stylesheet is broken.

src/components/views/avatars/BaseAvatar.js

@@ -138,7 +138,7 @@ module.exports = React.createClass({
 
         const {
             name, idName, title, url, urls, width, height, resizeMethod,
-            defaultToInitialLetter,
+            defaultToInitialLetter, onClick,
             ...otherProps
         } = this.props;
 
@@ -156,12 +156,24 @@ module.exports = React.createClass({
                 </span>
             );
         }
-        return (
-            <img className="mx_BaseAvatar mx_BaseAvatar_image" src={imageUrl}
-                onError={this.onError}
-                width={width} height={height}
-                title={title} alt=""
-                {...otherProps} />
-        );
+        if (onClick != null) {
+            return (
+                <button className="mx_BaseAvatar" onClick={onClick}>
+                    <img className="mx_BaseAvatar_image" src={imageUrl}
+                        onError={this.onError}
+                        width={width} height={height}
+                        title={title} alt=""
+                        {...otherProps} />
+                </button>
+            );
+        } else {
+            return (
+                <img className="mx_BaseAvatar mx_BaseAvatar_image" src={imageUrl}
+                    onError={this.onError}
+                    width={width} height={height}
+                    title={title} alt=""
+                    {...otherProps} />
+            );
+        }
     }
 });

src/components/views/rooms/EntityTile.js

@@ -152,7 +152,7 @@ module.exports = React.createClass({
         var av = this.props.avatarJsx || <BaseAvatar name={this.props.name} width={36} height={36} />;
 
         return (
-            <div className={mainClassName} title={ this.props.title }
+            <button className={mainClassName} title={ this.props.title }
                     onClick={ this.props.onClick } onMouseEnter={ this.mouseEnter }
                     onMouseLeave={ this.mouseLeave }>
                 <div className="mx_EntityTile_avatar">
@@ -161,7 +161,7 @@ module.exports = React.createClass({
                 </div>
                 { nameEl }
                 { inviteButton }
-            </div>
+            </button>
         );
     }
 });

src/components/views/rooms/MemberInfo.js

@@ -612,7 +612,7 @@ module.exports = WithMatrixClient(React.createClass({
                 mx_MemberInfo_createRoom_label: true,
                 mx_RoomTile_name: true,
             });
-            const startNewChat = <div
+            const startNewChat = <button
                 className="mx_MemberInfo_createRoom"
                 onClick={this.onNewDMClick}
             >
@@ -620,7 +620,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>
-            </div>
+            </button>
 
             startChat = <div>
                 <h3>Direct chats</h3>
@@ -635,26 +635,26 @@ module.exports = WithMatrixClient(React.createClass({
         }
 
         if (this.state.can.kick) {
-            kickButton = <div className="mx_MemberInfo_field" onClick={this.onKick}>
+            kickButton = <button className="mx_MemberInfo_field" onClick={this.onKick}>
                 { this.props.member.membership === "invite" ? "Disinvite" : "Kick" }
-            </div>;
+            </button>;
         }
         if (this.state.can.ban) {
-            banButton = <div className="mx_MemberInfo_field" onClick={this.onBan}>
+            banButton = <button className="mx_MemberInfo_field" onClick={this.onBan}>
                 Ban
-            </div>;
+            </button>;
         }
         if (this.state.can.mute) {
             var muteLabel = this.state.muted ? "Unmute" : "Mute";
-            muteButton = <div className="mx_MemberInfo_field" onClick={this.onMuteToggle}>
+            muteButton = <button className="mx_MemberInfo_field" onClick={this.onMuteToggle}>
                 {muteLabel}
-            </div>;
+            </button>;
         }
         if (this.state.can.toggleMod) {
             var giveOpLabel = this.state.isTargetMod ? "Revoke Moderator" : "Make Moderator";
-            giveModButton = <div className="mx_MemberInfo_field" onClick={this.onModToggle}>
+            giveModButton = <button className="mx_MemberInfo_field" onClick={this.onModToggle}>
                 {giveOpLabel}
-            </div>
+            </button>
         }
 
         // 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 +682,7 @@ module.exports = WithMatrixClient(React.createClass({
         const EmojiText = sdk.getComponent('elements.EmojiText');
         return (
             <div className="mx_MemberInfo">
-                <img className="mx_MemberInfo_cancel" src="img/cancel.svg" width="18" height="18" onClick={this.onCancel}/>
+                <button className="mx_MemberInfo_cancel" onClick={this.onCancel}> <img src="img/cancel.svg" width="18" height="18"/></button>
                 <div className="mx_MemberInfo_avatar">
                     <MemberAvatar onClick={this.onMemberAvatarClick} member={this.props.member} width={48} height={48} />
                 </div>