Skip to content

Improve optional-field labels and keyboard navigation #242

Description

@kiranfin

User Story

As a keyboard user, I want forms to clearly identify optional fields and follow a predictable focus order.

Context & Motivation

Optional inputs are not consistently marked across the app's forms.

Acceptance Criteria

  • Optional fields display an “Optional” label or hint consistently, via a shared mechanism rather than ad-hoc per-form text.
  • Required fields remain identifiable to assistive technologies.
  • An accessibility test covers the project-creation and add-token flows.

Technical Notes

Confirmed: the shared Field component (Field.tsx) only has built-in support for marking a field required (renders an asterisk) — there is no equivalent built-in "optional" indicator. Every "(optional)" hint found (WizardDetailsStep.tsx, AddCardForm.tsx, NewStarterTaskModal.tsx, AddCustomStepModal.tsx) is ad-hoc text baked into that form's own label string, each phrased slightly differently, and some fields likely carry no marking at all.

Note: the modal focus behavior this issue originally raised (autofocus on open, focus restore on close, tab trapping) is already implemented correctly in both shared dialog primitives, Modal.tsx and SidePanel.tsx — that part of the original report does not hold and has been dropped.

Unconfirmed Observation

During the UX test, tab order specifically in the "Add token" step of the project-creation wizard was reported as unclear. A code review of TokenAddForm.tsx found plain labeled inputs with normal DOM tab order and no custom widget that would obviously break keyboard use, so this could not be reproduced from the code alone. Whoever picks this up should re-test the exact "Add token" flow and wizard step used during the UX test (tab from field to field with nothing but the keyboard) before deciding whether this is still open, since the cause may be state- or timing-dependent and not visible from a static code read.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

uxImprovement for the user experience

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions