Skip to content

fix: follow date focus moved by assistive technology - #12722

Closed
web-padawan wants to merge 1 commit into
refactor/month-calendar-cell-buttonfrom
fix/date-picker-focused-date-sync
Closed

web-padawan wants to merge 1 commit into
refactor/month-calendar-cell-buttonfrom
fix/date-picker-focused-date-sync

Conversation

@web-padawan

Copy link
Copy Markdown
Member

Description

Part of #12398
Depends on #12596

Nothing synced focusedDate from DOM focus. The overlay only changes it from its own keyboard
handling and from focusDate(). When a screen reader moves focus to another date, for example
VoiceOver swiping on iOS, the arrow keys continue from the stale date, the focused part stays on
the wrong cell, and PageUp / PageDown keep the stale day of month. This is a
prerequisite for letting VoiceOver reach other months, which is not part of this PR.

  • Added a date-focus event to vaadin-month-calendar, fired from a focusin listener on the grid
    with the date of the focused cell
  • Made the overlay content follow date-focus by setting focusedDate and _focusedMonthDate
    • Ignored when the date already matches focusedDate, so focus set by focusDate() is a no-op
    • Ignored for dates outside min and max, the same rule the arrow keys use, while disabled
      dates inside the range are followed
  • Added keyboard navigation tests for following focus, the no-op case, the range guard, the day of
    month kept for PageDown, and the input showing the focused date

Type of change

  • Bugfix

How to test

  1. Open dev/date-picker.html and click the field to open the calendar.
  2. In the console, focus another date's button:
    const dp = document.querySelector('vaadin-date-picker');
    const cal = dp._overlayContent.calendars.find((c) => !c.hasAttribute('aria-hidden'));
    [...cal.shadowRoot.querySelectorAll('[part~=date-button]')][20].focus();
  3. The focus ring moves to that date and the input shows it.
  4. Press ArrowRight. Focus moves one day on from that date, not from today.
  5. Press PageDown. Focus lands on the same day of month in the next month.
  6. Set dp.max to a date before the one you focused, repeat step 2 with a date past max. Nothing
    changes.
  7. With iOS VoiceOver, open the calendar and swipe to another date. The focus ring follows the swipe.

Note

On desktop the input already follows the focused date after arrow keys, and closing the overlay
commits the input. Focus moved by assistive technology now takes the same path. On iOS the input
is read only while the overlay is open, so a swipe never changes the committed value.

🤖 Generated with Claude Code

@web-padawan
web-padawan force-pushed the refactor/month-calendar-cell-button branch from 5a5628e to 84dba9a Compare September 10, 2026 13:37
@web-padawan
web-padawan force-pushed the fix/date-picker-focused-date-sync branch from bf100c6 to b9812b9 Compare September 10, 2026 13:37
@web-padawan
web-padawan force-pushed the refactor/month-calendar-cell-button branch 2 times, most recently from 418c26e to 55dbf8b Compare September 11, 2026 06:37
@web-padawan
web-padawan force-pushed the fix/date-picker-focused-date-sync branch from b9812b9 to 025f129 Compare September 11, 2026 06:37
@web-padawan
web-padawan force-pushed the refactor/month-calendar-cell-button branch from 55dbf8b to ac1f6d4 Compare September 11, 2026 08:44
@web-padawan
web-padawan force-pushed the fix/date-picker-focused-date-sync branch from 025f129 to bc3f46d Compare September 11, 2026 08:44
Nothing synced focusedDate from DOM focus. When a screen reader moved
focus to another date, the arrow keys continued from the stale date, the
focused part stayed on the wrong cell, and PageUp / PageDown kept the
stale day of month.

The calendar now reports the focused date with a date-focus event, and
the overlay follows it under the same rule as the arrow keys: a disabled
date may take focus, a date outside min / max may not. Focus set by the
overlay itself is a no-op, since the date already matches.

Part of #12398

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@web-padawan
web-padawan force-pushed the refactor/month-calendar-cell-button branch from ac1f6d4 to a7eec4e Compare September 11, 2026 13:33
@web-padawan
web-padawan force-pushed the fix/date-picker-focused-date-sync branch from bc3f46d to fe50d60 Compare September 11, 2026 13:33
@sonarqubecloud

Copy link
Copy Markdown

@web-padawan

Copy link
Copy Markdown
Member Author

When a screen reader moves focus to another date, for example VoiceOver swiping on iOS, the arrow keys continue from the stale date

This sounds like more like an edge / artificial case (e.g. an iOS device with an external keyboard).
On desktop this isn't needed: NVDA, JAWS, VoiceOver on Safari work without it. Closing.

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