From 49e58f81b62490850d7d631fc61be6f08786c390 Mon Sep 17 00:00:00 2001
From: Parkreiner <michaelsmith@coder.com>
Date: Mon, 20 Nov 2023 14:44:02 +0000
Subject: [PATCH 1/3] fix: update alt text issue

---
 site/src/pages/LoginPage/OAuthSignInForm.tsx | 37 ++++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/site/src/pages/LoginPage/OAuthSignInForm.tsx b/site/src/pages/LoginPage/OAuthSignInForm.tsx
index 6c75c5ec74cff..afce3f54ec0ae 100644
--- a/site/src/pages/LoginPage/OAuthSignInForm.tsx
+++ b/site/src/pages/LoginPage/OAuthSignInForm.tsx
@@ -2,7 +2,7 @@ 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";
 
@@ -12,16 +12,16 @@ type OAuthSignInFormProps = {
   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 +51,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 +66,22 @@ 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}>Open ID Connect</div>
+    </>
+  );
+}

From 50113f25fcc9d211c7e157653b92700be3e8a19c Mon Sep 17 00:00:00 2001
From: Parkreiner <michaelsmith@coder.com>
Date: Mon, 20 Nov 2023 14:49:58 +0000
Subject: [PATCH 2/3] fix: add visually hidden CSS

---
 site/src/pages/LoginPage/OAuthSignInForm.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/LoginPage/OAuthSignInForm.tsx b/site/src/pages/LoginPage/OAuthSignInForm.tsx
index afce3f54ec0ae..a6d9c982428e8 100644
--- a/site/src/pages/LoginPage/OAuthSignInForm.tsx
+++ b/site/src/pages/LoginPage/OAuthSignInForm.tsx
@@ -2,9 +2,10 @@ 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 { useId, type FC } from "react";
+import { useId, type FC, CSSProperties } from "react";
 import { Language } from "./SignInForm";
 import { type AuthMethods } from "api/typesGenerated";
+import { visuallyHidden } from "@mui/utils";
 
 type OAuthSignInFormProps = {
   isSigningIn: boolean;
@@ -81,7 +82,9 @@ function OidcIcon({ iconUrl }: OidcIconProps) {
   return (
     <>
       <img alt="" src={iconUrl} css={iconStyles} aria-labelledby={oidcId} />
-      <div id={oidcId}>Open ID Connect</div>
+      <div id={oidcId} css={{ ...visuallyHidden }}>
+        Open ID Connect
+      </div>
     </>
   );
 }

From 8b918986cc8a2986ccccb573660ff523c7bd48d6 Mon Sep 17 00:00:00 2001
From: Parkreiner <michaelsmith@coder.com>
Date: Mon, 20 Nov 2023 15:42:23 +0000
Subject: [PATCH 3/3] fix: remove useless import

---
 site/src/pages/LoginPage/OAuthSignInForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/LoginPage/OAuthSignInForm.tsx b/site/src/pages/LoginPage/OAuthSignInForm.tsx
index a6d9c982428e8..e8f289f122bcf 100644
--- a/site/src/pages/LoginPage/OAuthSignInForm.tsx
+++ b/site/src/pages/LoginPage/OAuthSignInForm.tsx
@@ -2,7 +2,7 @@ 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 { useId, type FC, CSSProperties } from "react";
+import { useId, type FC } from "react";
 import { Language } from "./SignInForm";
 import { type AuthMethods } from "api/typesGenerated";
 import { visuallyHidden } from "@mui/utils";