From 3f6d2a8ac28dbc8e62e1da406480b17d78d77510 Mon Sep 17 00:00:00 2001 From: misrasamuelisiguzor-oss Date: Sun, 26 Jul 2026 20:44:54 +0000 Subject: [PATCH] fix: stop submit button from dropping keyboard focus on submit Newsletter submit button used the native disabled attribute, which browsers unfocus automatically. Since isLoading flips synchronously in handleSubmit, a keyboard/screen-reader user's focus was silently dropped to right after submitting. Switch to aria-disabled and guard against re-submission in handleSubmit instead, so the button stays focusable and keyboard focus never moves unexpectedly. Co-Authored-By: Claude Sonnet 5 --- frontend/src/components/LandingPage.tsx | 10 +++-- .../LandingPage.accessibility.test.tsx | 43 ++++++++++++++++--- .../__tests__/LandingPage.keyboard.test.tsx | 20 +++++++++ frontend/src/styles/landing.css | 7 +-- 4 files changed, 69 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx index 4b76c2ff..66467ea4 100644 --- a/frontend/src/components/LandingPage.tsx +++ b/frontend/src/components/LandingPage.tsx @@ -24,6 +24,10 @@ export const LandingPage: React.FC = ({ className }) => { const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); + if (isLoading || isSubmitted) { + return; + } + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!email) { setEmailError(t('hero.emailRequired')); @@ -181,9 +185,9 @@ export const LandingPage: React.FC = ({ className }) => { )} -