Skip to content

Add an accessible input contract to datepicker-input #11

Description

@brudex

Proposed labels: accessibility, area:frontend, good first issue

Context

The reusable datepicker-input directive creates a readonly text input, but
callers cannot reliably supply an input ID or connect a visible label and
description. Its popup state is also not communicated to assistive technology.

Suggested starting points

  • public/scripts/app/datepicker-input.directive.js
  • templates that render <datepicker-input>, including post-editor views
  • the bundled datepicker's show/hide lifecycle already handled by the
    directive

Scope

Add optional directive attributes for an input ID and label/description wiring.
Expose the datepicker's expanded state and popup relationship using suitable
ARIA attributes, keeping the existing Angular model and date format behavior.

Non-goals

  • Do not replace or upgrade the datepicker library.
  • Do not change date serialization, min/max-date semantics, or default popup
    placement.

Acceptance criteria

  • A caller can give the generated input a stable ID and associate it with a
    label and optional description.
  • The input communicates that it opens a date dialog/popup and whether it is
    expanded.
  • Opening, selecting a date, pressing Escape, and hiding the picker leave the
    ARIA state accurate.
  • Existing ngModel, min/max dates, and on-change behavior remain intact.

Verification

  1. Run npm test.
  2. Exercise an existing post-editor date picker with a keyboard: focus, open,
    select a date, press Escape, and confirm the value and popup state update.
  3. Inspect the rendered input in browser developer tools to confirm label and
    ARIA relationships are present when attributes are supplied.

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions