WIP

packages/client/src/admin/users/ProfilePhoto.tsx

@@ -3,6 +3,7 @@ import { Maybe } from "graphql/jsutils/Maybe";
 import React from "react";
 import Gravatar from "react-gravatar";
 import md5 from "md5";
+import clsx from "clsx";
 
 // const supportsSrcSet = "srcset" in document.createElement("img");
 
@@ -33,9 +34,15 @@ export default function ProfilePhoto({
     : `url("http://www.gravatar.com/avatar/${hash}?d=retro&r=g&s=200")`;
   return (
     <div
-      className={`w-full h-full inline-block ${
-        square ? "rounded-sm" : "rounded-full"
-      } ${border ? "border-2 shadow bg-white border-white" : ""}`}
+      role="img"
+      aria-label={
+        fullname || email || canonicalEmail ? "User photo" : undefined
+      }
+      className={clsx(
+        `w-full h-full inline-block`,
+        square ? "rounded-sm" : "rounded-full",
+        border ? "border-2 shadow bg-white border-white" : ""
+      )}
       style={{
         backgroundImage: bg,
         backgroundSize: "cover",

packages/client/src/components/Button.tsx

@@ -1,5 +1,11 @@
 // import Color from "color";
-import React, { CSSProperties, useState, useEffect } from "react";
+import React, {
+  CSSProperties,
+  useState,
+  useEffect,
+  DetailedHTMLProps,
+  ButtonHTMLAttributes,
+} from "react";
 import { Link, useHistory } from "react-router-dom";
 import { colord } from "colord";
 import { ChevronDownIcon } from "@heroicons/react/outline";
@@ -39,6 +45,7 @@ export interface ButtonProps {
   segmentItems?: string[];
   onSegmentClick?: (index: number) => void;
   "data-cy"?: string;
+  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
 }
 
 export default function Button(props: ButtonProps) {
@@ -184,6 +191,7 @@ export default function Button(props: ButtonProps) {
           className={`${buttonClassName} ${props.buttonClassName}`}
           style={style}
           data-cy={cyLabel}
+          {...props.buttonProps}
         >
           {label}
           {props.loading && spinner}