From ebaf0af1fba70829d60cca418aee4f72315059a0 Mon Sep 17 00:00:00 2001 From: MustafaGood Date: Mon, 3 Aug 2026 03:29:22 +0200 Subject: [PATCH 1/4] fix(a11y): P0 form labels, focus, and live regions (week 3-4) Add accessible labels, status/alert live regions, global focus-visible, modal keyboard support, and main landmark in client-participation-alpha. --- .../src/components/EmailSubscribeForm.tsx | 19 +++- .../components/InviteCodeSubmissionForm.tsx | 106 +++++++++++------- .../src/components/Statement.tsx | 12 +- .../src/components/SurveyForm.tsx | 31 +++-- .../src/components/TreeviteLoginCodeModal.tsx | 80 ++++++++++++- .../src/pages/layouts/Layout.astro | 4 +- .../src/styles/global.css | 39 ++++++- 7 files changed, 225 insertions(+), 66 deletions(-) diff --git a/client-participation-alpha/src/components/EmailSubscribeForm.tsx b/client-participation-alpha/src/components/EmailSubscribeForm.tsx index 0513566c77..f045d796e3 100644 --- a/client-participation-alpha/src/components/EmailSubscribeForm.tsx +++ b/client-participation-alpha/src/components/EmailSubscribeForm.tsx @@ -41,20 +41,29 @@ export default function EmailSubscribeForm({ s, conversation_id }: EmailSubscrib } if (feedback) { - return

{feedback}

+ return ( +

+ {feedback} +

+ ) } return (

{s.notificationsGetNotified}

+ setEmail(e.target.value)} disabled={isSubmitting} required + autoComplete="email" + aria-invalid={!!errorFeedback} />
) } diff --git a/client-participation-alpha/src/components/InviteCodeSubmissionForm.tsx b/client-participation-alpha/src/components/InviteCodeSubmissionForm.tsx index 12af60cf6f..17fbeeea7c 100644 --- a/client-participation-alpha/src/components/InviteCodeSubmissionForm.tsx +++ b/client-participation-alpha/src/components/InviteCodeSubmissionForm.tsx @@ -92,43 +92,61 @@ export default function InviteCodeSubmissionForm({ ) : null} -
- setInviteCode(e.target.value)} - placeholder={s.invite_code_prompt} - /> - -
+
{ + e.preventDefault() + void handleAcceptInvite() + }} + > + +
+ setInviteCode(e.target.value)} + /> + +
+
{s.or_text}
-
- setLoginCode(e.target.value)} - placeholder={s.login_code_prompt} - /> - -
+
{ + e.preventDefault() + void handleLoginWithCode() + }} + > + +
+ setLoginCode(e.target.value)} + /> + +
+
) @@ -157,6 +175,19 @@ const invite_code_css = ` margin-bottom: 16px; } +/* Field group: visible label + input/button row */ +.invite-code-field { + margin-bottom: 0; +} + +.invite-code-field label { + display: block; + font-size: 0.9rem; + font-weight: 500; + color: #333; + margin-bottom: 6px; +} + /* Flex container for the input and button */ .invite-code-submission-form-container { display: flex; @@ -174,13 +205,12 @@ const invite_code_css = ` border-right: none; /* Removes the border between the input and button */ border-radius: 4px 0 0 4px; /* Rounds the left corners */ font-size: 1rem; - outline: none; /* Removes the default browser outline on focus */ } -/* Adds a blue glow on focus for better accessibility */ -.invite-code-submission-form-container input[type="text"]:focus { +/* Visible focus ring (do not remove outline without a replacement) */ +.invite-code-submission-form-container input[type="text"]:focus-visible { border-color: #007bff; - box-shadow: 0 0 0 1px #007bff; + box-shadow: 0 0 0 2px #007bff; } /* Styling for the submit button */ diff --git a/client-participation-alpha/src/components/Statement.tsx b/client-participation-alpha/src/components/Statement.tsx index aa6cbd8feb..992d1553a2 100644 --- a/client-participation-alpha/src/components/Statement.tsx +++ b/client-participation-alpha/src/components/Statement.tsx @@ -86,11 +86,7 @@ export function Statement({ {s.anonPerson} {s.x_wrote} - {remainingText && ( - - {remainingText} - - )} + {remainingText && {remainingText}} {/* Show official translation (replaces original) or original text */} @@ -214,7 +210,11 @@ export function Statement({ {isVoting ? '' : passUnsureText} - {voteError &&

{voteError}

} + {voteError && ( +

+ {voteError} +

+ )} ) } diff --git a/client-participation-alpha/src/components/SurveyForm.tsx b/client-participation-alpha/src/components/SurveyForm.tsx index b15eae3925..7f329ed628 100644 --- a/client-participation-alpha/src/components/SurveyForm.tsx +++ b/client-participation-alpha/src/components/SurveyForm.tsx @@ -103,6 +103,7 @@ export default function SurveyForm({
{feedback && (

-
-