Keyboard shortcuts and accessibility

ts/components/Avatar.tsx

@@ -133,7 +133,17 @@ export class Avatar extends React.Component<Props, State> {
       throw new Error(`Size ${size} is not supported!`);
     }
 
-    const role = onClick ? 'button' : undefined;
+    let contents;
+
+    if (onClick) {
+      contents = (
+        <button className="module-avatar-button" onClick={onClick}>
+          {hasImage ? this.renderImage() : this.renderNoImage()}
+        </button>
+      );
+    } else {
+      contents = hasImage ? this.renderImage() : this.renderNoImage();
+    }
 
     return (
       <div
@@ -141,14 +151,11 @@ export class Avatar extends React.Component<Props, State> {
           'module-avatar',
           `module-avatar--${size}`,
           hasImage ? 'module-avatar--with-image' : 'module-avatar--no-image',
-          !hasImage ? `module-avatar--${color}` : null,
-          onClick ? 'module-avatar--with-click' : null
+          !hasImage ? `module-avatar--${color}` : null
         )}
         ref={innerRef}
-        role={role}
-        onClick={onClick}
       >
-        {hasImage ? this.renderImage() : this.renderNoImage()}
+        {contents}
       </div>
     );
   }