[WEB-4197] chore: auth forms semantics and accessibility

[aaryan610]

Description

This PR includes accessibility and semantic improvements for auth forms-

Type of Change

• Improvement (change that would cause existing functionality to not work as expected)

Summary by CodeRabbit

• New Features

  • Added accessibility label translations for authentication form controls (clear email, show/hide password, close alert/popover) in all supported languages.

• Accessibility

  • Improved accessibility for authentication forms by replacing clickable icons with accessible buttons and adding descriptive aria-labels for screen readers.
  • Enhanced semantic HTML structure with appropriate heading levels, button elements, and main content containers.

• Style

  • Updated styling for form controls and icons to ensure consistent sizing and alignment.

• Refactor

  • Streamlined JSX markup for better semantic structure and maintainability.

[coderabbitai]

Walkthrough

This change adds a new "auth_forms" section with five accessibility label strings to the "aria_labels" object in all supported locale JSON files. It also refactors several authentication-related React components to improve semantic HTML, accessibility, and internationalization, such as replacing clickable icons with accessible buttons and updating ARIA labels.

Changes

Files/Paths	Change Summary
packages/i18n/src/locales/*/accessibility.json	Added "aria_labels.auth_forms" with five new keys for authentication form accessibility labels in all locales.
web/core/components/account/auth-forms/auth-banner.tsx	Added i18n support, improved accessibility with ARIA roles/labels, refactored close control to accessible button.
web/core/components/account/auth-forms/email.tsx	Replaced clear icon with accessible button, improved ARIA labeling, minor attribute reordering.
web/core/components/account/auth-forms/forgot-password-popover.tsx	Improved close button accessibility and styling, added ARIA label, updated icon classes.
web/core/components/account/auth-forms/password.tsx	Refactored labels and clickable icons to accessible buttons with ARIA labels, improved semantic HTML.
web/core/components/account/auth-forms/unique-code.tsx	Wrapped clear icon in accessible button, reordered attributes, clarified submit button rendering.
web/core/components/account/auth-forms/auth-header.tsx	Changed main header from <h3> to <h1> for semantic correctness.
web/core/components/account/terms-and-conditions.tsx	Changed wrapper from <span> to <div>, no logic changes.
web/app/layout.tsx	Changed root wrapper from <div> to <main> for semantic HTML.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant AuthForm
    participant I18n
    participant ScreenReader

    User->>AuthForm: Interacts with auth controls (clear, show/hide password, close alert/popover)
    AuthForm->>I18n: Requests localized ARIA labels for controls
    I18n-->>AuthForm: Returns localized strings from "auth_forms"
    AuthForm->>ScreenReader: Provides ARIA labels on buttons
    ScreenReader-->>User: Announces accessible labels/actions

Loading

Possibly related PRs

• [WEB-4166] chore: projects app sidebar accessibility #7115: Related through shared focus on accessibility improvements and localization for UI elements, particularly regarding ARIA attributes and translation files.

Suggested labels

ready_to_merge

Suggested reviewers

• anmolsinghbhatia

Poem

In every tongue, a label clear,
For password, popover, and email near.
Buttons now speak, not just shine,
With ARIA words in every line.
The rabbit hops through code so bright—
Accessibility, done just right!
🐇✨

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 26b62c4 and c1b1400.

📒 Files selected for processing (27)

• packages/i18n/src/locales/cs/accessibility.json (1 hunks)
• packages/i18n/src/locales/de/accessibility.json (1 hunks)
• packages/i18n/src/locales/en/accessibility.json (1 hunks)
• packages/i18n/src/locales/es/accessibility.json (1 hunks)
• packages/i18n/src/locales/fr/accessibility.json (1 hunks)
• packages/i18n/src/locales/id/accessibility.json (1 hunks)
• packages/i18n/src/locales/it/accessibility.json (1 hunks)
• packages/i18n/src/locales/ja/accessibility.json (1 hunks)
• packages/i18n/src/locales/ko/accessibility.json (1 hunks)
• packages/i18n/src/locales/pl/accessibility.json (1 hunks)
• packages/i18n/src/locales/pt-BR/accessibility.json (1 hunks)
• packages/i18n/src/locales/ro/accessibility.json (1 hunks)
• packages/i18n/src/locales/ru/accessibility.json (1 hunks)
• packages/i18n/src/locales/sk/accessibility.json (1 hunks)
• packages/i18n/src/locales/tr-TR/accessibility.json (1 hunks)
• packages/i18n/src/locales/ua/accessibility.json (1 hunks)
• packages/i18n/src/locales/vi-VN/accessibility.json (1 hunks)
• packages/i18n/src/locales/zh-CN/accessibility.json (1 hunks)
• packages/i18n/src/locales/zh-TW/accessibility.json (1 hunks)
• web/app/layout.tsx (1 hunks)
• web/core/components/account/auth-forms/auth-banner.tsx (2 hunks)
• web/core/components/account/auth-forms/auth-header.tsx (1 hunks)
• web/core/components/account/auth-forms/email.tsx (2 hunks)
• web/core/components/account/auth-forms/forgot-password-popover.tsx (1 hunks)
• web/core/components/account/auth-forms/password.tsx (4 hunks)
• web/core/components/account/auth-forms/unique-code.tsx (4 hunks)
• web/core/components/account/terms-and-conditions.tsx (2 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (6)

web/core/components/account/auth-forms/email.tsx (1)

packages/i18n/src/store/index.ts (1)

• t (211-232)

web/core/components/account/auth-forms/auth-header.tsx (1)

packages/i18n/src/store/index.ts (1)

• t (211-232)

web/core/components/account/auth-forms/unique-code.tsx (1)

packages/i18n/src/store/index.ts (1)

• t (211-232)

web/core/components/account/auth-forms/password.tsx (1)

packages/i18n/src/store/index.ts (1)

• t (211-232)

web/core/components/account/auth-forms/auth-banner.tsx (2)

packages/i18n/src/hooks/use-translation.ts (1)

• useTranslation (23-35)

packages/i18n/src/store/index.ts (1)

• t (211-232)

web/core/components/account/auth-forms/forgot-password-popover.tsx (1)

packages/i18n/src/store/index.ts (1)

• t (211-232)

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: Analyze (javascript)

🔇 Additional comments (42)

packages/i18n/src/locales/ro/accessibility.json (1)

25-32: Add auth_forms ARIA labels consistently
The new auth_forms section is correctly inserted under aria_labels. JSON structure, indentation, and key names align with existing entries and match the updates in other locale files.

packages/i18n/src/locales/zh-TW/accessibility.json (1)

25-32: Add auth_forms ARIA labels consistently
The auth_forms block is correctly added under aria_labels. Structure, indentation, and key naming mirror other locales, ensuring consistent accessibility support.

packages/i18n/src/locales/ja/accessibility.json (1)

25-32: Add auth_forms ARIA labels consistently
The new auth_forms object is properly nested under aria_labels. JSON syntax, indentation, and label keys follow the established pattern from other translations.

packages/i18n/src/locales/es/accessibility.json (1)

25-32: Add auth_forms ARIA labels consistently
The auth_forms section is correctly appended under aria_labels, with proper JSON formatting and matching key names across locales.

packages/i18n/src/locales/ru/accessibility.json (1)

25-32: Add auth_forms ARIA labels consistently
The new auth_forms entries are placed correctly under aria_labels. Structure, indentation, and key consistency align with the other locale updates.

packages/i18n/src/locales/ua/accessibility.json (1)

25-32: New auth_forms accessibility labels look correct
The "auth_forms" block has been added with the expected five keys and Ukrainian translations matching other locale files. Indentation, JSON syntax, and comma placement are consistent.

packages/i18n/src/locales/de/accessibility.json (1)

25-32: German auth_forms entries are consistent
The auth_forms object and its five ARIA labels align with the structure in other locales. Translations and indentation appear accurate.

packages/i18n/src/locales/pl/accessibility.json (1)

25-32: Polish auth_forms block insertion is correct
The new accessibility keys under "auth_forms" mirror the keys in other languages and follow the existing JSON formatting.

web/core/components/account/auth-forms/auth-header.tsx (1)

105-107: Promote header semantics by using <h1>
Changing from <h3> to <h1> correctly marks this as the primary heading. Ensure there aren’t unintended multiple <h1> elements elsewhere on the page.

web/core/components/account/terms-and-conditions.tsx (1)

11-23: Use <div> instead of <span> for a block container
Switching the wrapper to a <div> fixes the HTML validity issue of nesting a <p> inside an inline <span>.

packages/i18n/src/locales/it/accessibility.json (1)

25-32: LGTM! Good accessibility localization support.

The new auth_forms section provides proper Italian translations for authentication form accessibility labels. The translations are accurate and will improve screen reader support for Italian users.

web/app/layout.tsx (1)

72-72: Excellent semantic HTML improvement!

Changing from <div> to <main> properly identifies the primary content area of the page, which improves accessibility for screen readers and follows HTML5 semantic standards.

packages/i18n/src/locales/sk/accessibility.json (1)

25-32: LGTM! Consistent localization support.

The Slovak translations for authentication form accessibility labels are well-structured and accurate. This ensures Slovak users have proper screen reader support for authentication forms.

web/core/components/account/auth-forms/email.tsx (2)

50-50: Minor attribute reordering - no functional impact.

The swapping of htmlFor and className attributes doesn't affect functionality but maintains consistency.

---

79-90: Excellent accessibility improvement!

Replacing the standalone clickable icon with a proper <button> element significantly improves accessibility:

• Uses semantic HTML that screen readers understand
• Includes type="button" to prevent form submission
• Provides accessible aria-label using localization
• Maintains original functionality and visual styling
• Properly wraps the icon for better interaction

This is a model implementation for accessible interactive elements.

packages/i18n/src/locales/fr/accessibility.json (1)

25-32:

Details

✅ Verification successful

LGTM! Well-structured accessibility labels for authentication forms.

The new auth_forms section properly extends the existing aria_labels structure with appropriate French translations for authentication form controls. The translations are contextually appropriate and follow consistent naming conventions.

Let me verify that all locale files have been updated consistently with the same structure and keys:

---

🏁 Script executed:

#!/bin/bash
# Description: Verify all locale files have the same auth_forms structure and keys

echo "=== Checking for auth_forms section in all accessibility.json files ==="
fd "accessibility.json" packages/i18n/src/locales/ --exec echo "=== {} ===" \; --exec cat {} \; | grep -A 10 -B 2 "auth_forms"

echo -e "\n=== Verifying all files have the same 5 keys ==="
fd "accessibility.json" packages/i18n/src/locales/ --exec sh -c 'echo "File: $1"; jq -r ".aria_labels.auth_forms | keys[]" "$1" 2>/dev/null | sort' _ {}

Length of output: 9436

---

All locales updated with consistent auth_forms section

The aria_labels.auth_forms block now appears in every
packages/i18n/src/locales/*/accessibility.json with the same five keys—
clear_email, show_password, hide_password, close_alert, close_popover.
These additions uniformly enhance accessibility and follow existing conventions.

Approving these changes.

web/core/components/account/auth-forms/forgot-password-popover.tsx (1)

48-55: Excellent accessibility improvement!

The close button now properly implements semantic HTML with accessible labeling. The addition of aria-label={t("aria_labels.auth_forms.close_popover")} ensures screen readers can announce the button's purpose using localized text.

The button structure is well-implemented with:

• Proper semantic <button> element with type="button"
• Accessible sizing with size-3 class
• Proper centering with grid place-items-center
• Internationalized aria-label

packages/i18n/src/locales/vi-VN/accessibility.json (1)

25-32: Good consistent implementation across locales.

The Vietnamese translations maintain the same structure and keys as other locale files, ensuring consistent internationalization. The translations appear contextually appropriate for authentication form accessibility controls.

packages/i18n/src/locales/cs/accessibility.json (1)

25-32: Consistent and thorough internationalization approach.

The Czech translations complete the pattern of consistent accessibility improvements across multiple locales. The structure is identical to other locale files and the translations are contextually appropriate for authentication form controls.

packages/i18n/src/locales/ko/accessibility.json (1)

25-31: Add localized auth_forms section
The new "auth_forms" block is correctly inserted under "aria_labels", with all five keys (clear_email, show_password, hide_password, close_alert, close_popover) translated into Korean. This aligns with the updates in the auth form components; ensure these keys are referenced in the components for proper screen‐reader support.

packages/i18n/src/locales/zh-CN/accessibility.json (1)

25-31: Add localized auth_forms section
The "auth_forms" object has been added with accurate Simplified Chinese translations for all five labels. Confirm that the auth form components use these new keys so that screen readers announce them correctly.

packages/i18n/src/locales/en/accessibility.json (1)

25-31: Add auth_forms aria labels
The new "auth_forms" section with English labels is consistent and matches other locales. The keys (clear_email, show_password, hide_password, close_alert, close_popover) align with the updated React components’ aria-label attributes.

packages/i18n/src/locales/id/accessibility.json (1)

25-31: Add localized auth_forms section
The Indonesian translations for the "auth_forms" keys are correctly added. Please verify that the auth form components reference these new labels to ensure accessibility in Indonesian.

packages/i18n/src/locales/pt-BR/accessibility.json (1)

25-31: Add localized auth_forms section
The Brazilian Portuguese translations for all five "auth_forms" labels appear accurate. Ensure these keys are integrated into the UI buttons and popovers to enhance accessibility for Portuguese‐speaking users.

packages/i18n/src/locales/tr-TR/accessibility.json (1)

25-32: LGTM! Well-structured accessibility translations.

The new Turkish accessibility labels for authentication forms are properly structured and linguistically appropriate. The translations provide clear descriptions for screen readers.

web/core/components/account/auth-forms/auth-banner.tsx (5)

3-4: Good addition of internationalization support.

Adding the useTranslation hook enables proper localization of accessibility labels.

---

21-24: Excellent accessibility improvement with role="alert".

Adding role="alert" to the banner container ensures screen readers will announce the message appropriately when it appears.

---

25-27: Good semantic improvement.

Using consistent sizing utility (size-4) and grid layout is cleaner than the previous flexbox approach.

---

28-28: Proper semantic HTML usage.

Changing from div to p element for the message text is semantically correct and improves accessibility.

---

29-37: Excellent accessibility enhancement for the close button.

Converting the clickable div to a semantic button element with proper aria-label significantly improves accessibility. The translation key aria_labels.auth_forms.close_alert matches the new localization structure.

web/core/components/account/auth-forms/unique-code.tsx (6)

99-101: Good practice with consistent label structure.

Reordering the htmlFor attribute to be first in label elements improves consistency across the codebase.

---

112-112: Code simplification improvement.

Removing the template literal for a simple string value is cleaner and more readable.

---

117-125: Excellent accessibility enhancement for clear email button.

Converting the clickable icon to a semantic button element with proper aria-label significantly improves accessibility. The translation key aria_labels.auth_forms.clear_email is properly used.

---

130-135: Proper form accessibility with explicit IDs.

Adding the explicit id="unique-code" and matching it with the label's htmlFor attribute ensures proper form accessibility for screen readers.

---

150-154: Code readability improvement.

Simplifying the className expression by removing unnecessary template literals makes the code cleaner.

---

168-175: Good code structure improvement.

Expanding the button text rendering from a single-line ternary to a multi-line conditional block improves readability without changing functionality.

web/core/components/account/auth-forms/password.tsx (6)

170-172: Consistent label structure improvement.

Placing the htmlFor attribute first in label elements maintains consistency across the component.

---

187-195: Excellent accessibility enhancement for clear email button.

Converting the clickable icon to a semantic button element with proper aria-label significantly improves accessibility. The translation key usage is consistent with other components.

---

200-206: Proper form accessibility with explicit password ID.

Adding the explicit id="password" ensures the label properly associates with the input for screen readers.

---

217-231: Outstanding accessibility improvement for password visibility toggle.

Converting the clickable icon to a semantic button element with dynamic aria-label based on state is excellent. The conditional aria-label (show_password vs hide_password) provides clear context to screen readers about the current action.

---

237-243: Proper form accessibility for confirm password field.

Adding the explicit id="confirm-password" and matching label ensures proper accessibility for the password confirmation field.

---

252-267: Excellent accessibility for confirm password visibility toggle.

The confirm password visibility toggle follows the same excellent accessibility pattern as the main password field, with proper semantic button element and dynamic aria-labels.

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[makeplane]

Pull Request Linked with Plane Work Items

• [WEB-4197] Auth forms accessibility

Comment Automatically Generated by Plane