@neetru/sdk 3.4.6 → 3.4.7

package/CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to `@neetru/sdk` will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.4.7] - 2026-09-19 — **fix(a11y): NeetruLoginButton — foco de teclado visível (bug_62edcfb0)**
+
+Release **patch** (correção de bug de acessibilidade — publica o fix já mesclado no PR #28).
+
+### Contexto
+
+`bug_62edcfb0`: o `NeetruLoginButton` renderiza estilo inline BMW (fundo `#0a0a0a` no tema dark) e não definia outline próprio no `:focus-visible`. Estilo inline não cobre pseudo-classe, então o foco caía no outline default do Chromium (~`rgb(16,16,16)`) — invisível sobre o fundo preto. Navegação por teclado sem foco perceptível é falha de acessibilidade.
+
+### Corrigido
+
+- **Ring de foco explícito** via `<style>` scoped injetado no `<head>` (uma vez, idempotente, no-op em SSR): `button[data-neetru-login-button]:focus-visible { outline:2px solid var(--neetru-login-focus-ring); outline-offset:2px }`. A cor do ring vem de `--neetru-login-focus-ring`, setada inline com `colors.fg` (cor do texto), que já contrasta com o fundo por construção (branco no dark, quase-preto no light) — garante contraste AA nos dois temas. Outline retangular sólido, sem blur/glow (design BMW).
+
+Nenhuma remoção de API, nenhuma mudança de wire.
+
 ## [3.4.6] - 2026-09-15 — **fix(auth): getServerNeetruClient() — singleton server-side via globalThis (bug_d0d4e5bf)**
 
 Release **patch** (correção de bug que bloqueava onboarding — publica o fix já mesclado no PR #23, que ficou atrás na fila do publish porque o PR #24/telemetria mesclou depois e subiu como 3.4.5).

package/dist/react.cjs

@@ -743,6 +743,16 @@ var NEETRU_LOGIN_BUTTON_THEME = {
   dark: { bg: "#0a0a0a", bgHover: "#1a1a1a", fg: "#ffffff", border: "#0a0a0a" },
   light: { bg: "#ffffff", bgHover: "#f5f5f5", fg: "#0a0a0a", border: "#0a0a0a" }
 };
+var NEETRU_LOGIN_FOCUS_STYLE_ID = "neetru-login-button-focus-style";
+var NEETRU_LOGIN_FOCUS_CSS = "button[data-neetru-login-button]:focus-visible{outline:2px solid var(--neetru-login-focus-ring,#ffffff);outline-offset:2px;}";
+function ensureLoginFocusStyleInjected() {
+  if (typeof document === "undefined" || !document.head) return;
+  if (document.getElementById(NEETRU_LOGIN_FOCUS_STYLE_ID)) return;
+  const styleEl = document.createElement("style");
+  styleEl.id = NEETRU_LOGIN_FOCUS_STYLE_ID;
+  styleEl.textContent = NEETRU_LOGIN_FOCUS_CSS;
+  document.head.appendChild(styleEl);
+}
 function NeetruLoginButton({
   client,
   redirectUri,
@@ -759,6 +769,9 @@ function NeetruLoginButton({
   const [isHover, setIsHover] = React2__namespace.useState(false);
   const colors = NEETRU_LOGIN_BUTTON_THEME[theme];
   const isDisabled = Boolean(disabled) || isLoading;
+  React2__namespace.useEffect(() => {
+    ensureLoginFocusStyleInjected();
+  }, []);
   const handleClick = React2__namespace.useCallback(async () => {
     if (isDisabled) return;
     setIsLoading(true);
@@ -805,6 +818,9 @@ function NeetruLoginButton({
         opacity: isDisabled && !isLoading ? 0.6 : 1,
         transition: "background-color 150ms ease",
         boxSizing: "border-box",
+        // Cor do ring de foco de teclado (:focus-visible) — ver
+        // NEETRU_LOGIN_FOCUS_CSS. Usa a cor do texto (contraste AA garantido).
+        "--neetru-login-focus-ring": colors.fg,
         ...style
       }
     },