From c46f18003c9d11c610e66a4e2774151d3252b478 Mon Sep 17 00:00:00 2001 From: Juan Date: Mon, 7 Sep 2026 20:19:18 -0500 Subject: [PATCH] fix: give compact OAuth buttons an accessible name MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In compact mode OAuthButton renders the icon and drops the label, which leaves the button with no accessible name at all — screen readers announce only "button", and every provider is indistinguishable from the next. The sign-in forms switch to compact on the password step (auth-root.tsx in both web and spaces), so this is the state anyone using the password flow lands on. Applies the label as `aria-label` for assistive technology and `title` for a tooltip, only while compact: with the label visible, `aria-label` would shadow it for no benefit. Spread before `...rest` so a caller can still override. This matters most for the generic OIDC provider, which has no brand mark to fall back on — its icon is a plain shield — but the gap affects Google, GitHub, GitLab and Gitea equally. Co-Authored-By: Claude Opus 5 (1M context) --- packages/ui/src/oauth/oauth-button.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/ui/src/oauth/oauth-button.tsx b/packages/ui/src/oauth/oauth-button.tsx index 002b0c5dc04..d02314cc7bb 100644 --- a/packages/ui/src/oauth/oauth-button.tsx +++ b/packages/ui/src/oauth/oauth-button.tsx @@ -19,9 +19,17 @@ const OAuthButton = React.forwardRef(function OAuthButton( ) { const { text, icon, compact = false, className = "", ...rest } = props; + // Compact mode hides the label, which leaves the button with nothing but an icon: + // no accessible name for assistive technology, and no way to tell providers apart + // for anyone who does not recognise the mark. Supplying the label as `aria-label` + // restores the name, and `title` gives sighted users a tooltip. Only applied when + // compact -- with the label visible, `aria-label` would needlessly shadow it. + const compactLabelProps = compact ? { title: text, "aria-label": text } : {}; + return (