fix: prevent alt text from appearing if OIDC icon fail to load (#10792)

Parkreiner · web-flow · commit df4f34ac156a · 2023-11-20T10:51:25.000-05:00
* fix: update alt text issue
diff --git a/site/src/pages/LoginPage/OAuthSignInForm.tsx b/site/src/pages/LoginPage/OAuthSignInForm.tsx
@@ -2,26 +2,27 @@ import Button from "@mui/material/Button";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import KeyIcon from "@mui/icons-material/VpnKey";
 import Box from "@mui/material/Box";
-import { type FC } from "react";
+import { useId, type FC } from "react";
 import { Language } from "./SignInForm";
 import { type AuthMethods } from "api/typesGenerated";
+import { visuallyHidden } from "@mui/utils";
 
 type OAuthSignInFormProps = {
   isSigningIn: boolean;
   redirectTo: string;
   authMethods?: AuthMethods;
 };
 
+const iconStyles = {
+  width: 16,
+  height: 16,
+};
+
 export const OAuthSignInForm: FC<OAuthSignInFormProps> = ({
   isSigningIn,
   redirectTo,
   authMethods,
 }) => {
-  const iconStyles = {
-    width: 16,
-    height: 16,
-  };
-
   return (
     <Box display="grid" gap="16px">
       {authMethods?.github.enabled && (
@@ -51,11 +52,7 @@ export const OAuthSignInForm: FC<OAuthSignInFormProps> = ({
           size="xlarge"
           startIcon={
             authMethods.oidc.iconUrl ? (
-              <img
-                alt="Open ID Connect icon"
-                src={authMethods.oidc.iconUrl}
-                css={iconStyles}
-              />
+              <OidcIcon iconUrl={authMethods.oidc.iconUrl} />
             ) : (
               <KeyIcon css={iconStyles} />
             )
@@ -70,3 +67,24 @@ export const OAuthSignInForm: FC<OAuthSignInFormProps> = ({
     </Box>
   );
 };
+
+type OidcIconProps = {
+  iconUrl: string;
+};
+
+function OidcIcon({ iconUrl }: OidcIconProps) {
+  const hookId = useId();
+  const oidcId = `${hookId}-oidc`;
+
+  // Even if the URL is defined, there is a chance that the request for the
+  // image fails. Have to use blank alt text to avoid button from getting ugly
+  // if that happens, but also still need a way to inject accessible text
+  return (
+    <>
+      <img alt="" src={iconUrl} css={iconStyles} aria-labelledby={oidcId} />
+      <div id={oidcId} css={{ ...visuallyHidden }}>
+        Open ID Connect
+      </div>
+    </>
+  );
+}
