Skip to content

Add date-picker-calendar test case (interaction-level selection-grid ARIA) - #20

Open
manichandra wants to merge 1 commit into
microsoft:mainfrom
manichandra:add-date-picker-calendar-test-case
Open

Add date-picker-calendar test case (interaction-level selection-grid ARIA)#20
manichandra wants to merge 1 commit into
microsoft:mainfrom
manichandra:add-date-picker-calendar-test-case

Conversation

@manichandra

@manichandra manichandra commented Jun 18, 2026

Copy link
Copy Markdown

Summary

Adds a new test case, test_cases/date-picker-calendar/, that evaluates a date-picker
calendar widget. It focuses on the interaction-level ARIA contract for selection grids
— semantics that a static axe-core pass does not catch on its own.

Motivation

The existing test cases cover forms and disclosure patterns, but there is no calendar /
date-picker case. Date grids are a common pattern models frequently get subtly wrong in
ways axe-core alone does not flag:

  • aria-pressed vs aria-selected. Generated calendars often mark the chosen day with
    aria-pressed (toggle-button state) instead of aria-selected (selection state). Both
    attributes are individually valid, so axe-core does not report it — but a screen reader
    announces "button pressed" instead of "selected". A role-contract defect only a semantics
    assertion catches.
  • Missing grid/listbox semantics. Day cells are often plain buttons with no
    role="gridcell"/role="grid", so AT cannot present them as selectable days.
  • No keyboard navigation. Calendars frequently ship without arrow-key movement.

These map to WAI-ARIA 1.2, the WAI-ARIA APG grid pattern, and WCAG 2.1 SC 4.1.2.

What this adds

  • prompt.yaml — a neutral product spec (does not state the ARIA answer).
  • test.js — six assertions, following the existing
    module.exports.run = async ({ page, assert, utils }) convention:
    1. Day grid present and openable
    2. Each day cell has an accessible name
    3. Day cells expose grid/listbox selection semantics
    4. Selection uses aria-selected, not aria-pressed
    5. Exactly one day marked selected after a choice
    6. Arrow keys move focus within the grid

DOM discovery is self-contained; the only utils call (reload) is guarded.

Validation

Ran test.js with Playwright against a conformant calendar (all six pass) and an
anti-pattern calendar using aria-pressed toggle buttons with no grid semantics or
keyboard nav (assertions 3–6 fail with specific messages).

Checklist

  • I have signed the Microsoft CLA
  • [ x] I ran the repository's evaluation harness locally
  • [ x] The new case follows the existing test_cases/ conventions

Covers a date-picker calendar widget and the interaction-level ARIA contract for selection grids that a static axe-core pass does not catch: aria-selected vs aria-pressed on day cells, grid/listbox role semantics, single programmatic selection, and arrow-key focus movement (WAI-ARIA 1.2 / APG grid pattern; WCAG 2.1 SC 4.1.2).

Includes prompt.yaml, test.js (six Requirement assertions following the module.exports.run = async ({ page, assert, utils }) convention), and two examples with embedded a11y-assertions expectations (a conformant grid and an aria-pressed anti-pattern). Verified with node_runner: the conformant example passes all six; the anti-pattern fails the four selection/keyboard assertions.
@manichandra

Copy link
Copy Markdown
Author

@microsoft-github-policy-service agree

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant