Skip to content

[Improvement]: A11y — associate labels with inputs and expose errors via aria-describedby/aria-invalid #107

@matiaspalmac

Description

@matiaspalmac

Describe the improvement

The codebase has zero htmlFor= usages. Labels are visual-only and placeholders are being used as the only affordance, which is a WCAG F68 failure.

Affected surfaces include: apps/desktop/src/components/SettingsView.tsx:134-160,246-263, apps/desktop/src/addons/builtin.agent-support/AgentSettings.tsx:83-89,269,304, apps/desktop/src/components/OnboardingWizard.tsx:344-352, apps/desktop/src/addons/builtin.ai-assistant/AiChatComponent.tsx:862-874.

Proposed change:

  1. Every input/textarea/select gets an id, and its visible label wraps (<label for="…">) or references it via aria-labelledby.
  2. Error messages render in a sibling element referenced by aria-describedby; the input carries aria-invalid when in an error state.
  3. The chat textarea uses a visually hidden label (sr-only) because its visual label is the placeholder.

Would you like to implement this improvement yourself by sending a PR?

Maybe

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions