refactor!: move date cell semantics to a button inside the cell - #12596
Open
web-padawan wants to merge 1 commit into
Open
refactor!: move date cell semantics to a button inside the cell#12596web-padawan wants to merge 1 commit into
web-padawan wants to merge 1 commit into
Conversation
web-padawan
force-pushed
the
refactor/month-calendar-cell-button
branch
4 times, most recently
from
September 3, 2026 10:09
0e47ae1 to
bbf6965
Compare
web-padawan
force-pushed
the
refactor/month-calendar-lumo-base-styles
branch
from
September 4, 2026 06:37
6558e2d to
2dc4f79
Compare
web-padawan
force-pushed
the
refactor/month-calendar-cell-button
branch
from
September 4, 2026 06:38
bbf6965 to
5a5628e
Compare
web-padawan
force-pushed
the
refactor/month-calendar-cell-button
branch
from
September 10, 2026 13:37
5a5628e to
84dba9a
Compare
web-padawan
force-pushed
the
refactor/month-calendar-lumo-base-styles
branch
from
September 10, 2026 13:39
5a24690 to
94a5aa2
Compare
web-padawan
force-pushed
the
refactor/month-calendar-cell-button
branch
from
September 10, 2026 13:40
84dba9a to
418c26e
Compare
Contributor
|
I am still understanding how to user iOS VO, so this is what I was able to test so far. With the current changes, the dates are announced as can be seen on the recording. Disabled dates are announced as "dimmed", which is how it usually announces disabled buttons. As expected, you can't go back from the first day of the month and from the last day, it goes to "Today". ScreenRecording_09-10-2026.17-00-51_1.mov |
web-padawan
force-pushed
the
refactor/month-calendar-cell-button
branch
2 times, most recently
from
September 11, 2026 08:44
55dbf8b to
ac1f6d4
Compare
Base automatically changed from
refactor/month-calendar-lumo-base-styles
to
main
September 11, 2026 13:22
iOS VoiceOver reads the text content of a gridcell and ignores its aria-label, so dates were announced as a bare day number. The accessible name, ARIA state and tabindex now live on a button inside the cell, the shape used by react-aria, Duet, Angular Material and Ionic. NVDA does not enter focus mode for a button the way it does for a grid cell. Left in browse mode it swallowed the arrow keys, so the roving tabindex never moved, and it read out every date when the overlay opened. The month calendar is an application region to force focus mode, which is what react-aria wraps its calendar in and what MOJ Frontend adopted for the same problem. NVDA announces a date twice, once for the cell and once for the focused button, because the cell takes its name from its content. That is inherent to a labelled focusable element inside a gridcell, and react-spectrum ships the same behavior. This covers only the announcement half of #12398. Months that do not contain DOM focus still carry aria-hidden, so month traversal with iOS VoiceOver is unchanged and still needs verification on a device. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
web-padawan
force-pushed
the
refactor/month-calendar-cell-button
branch
from
September 11, 2026 13:33
ac1f6d4 to
a7eec4e
Compare
|
web-padawan
marked this pull request as ready for review
September 11, 2026 13:42
vaadin-review-bot
left a comment
vaadin-review-bot
left a comment
There was a problem hiding this comment.
Reviewed the changes — left 1 comment.
| Finding | |
|---|---|
| 📐 | Default role is set unconditionally, so it can't be overridden |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Part of #12398
Changed DOM structure to use the React Aria Calendar approach.
<div part="date-button" role="button">inside<td role="gridcell">as the focus targetaria-label,aria-disabledandtabindexfrom<td>element to<div role="button">gridcelland ignores itsaria-label.role="application"onvaadin-month-calendarto enforce NVDA to switch to focus mode:emptyCSS selector applies:has(:focus-visible), so it shows on keyboard focus but not after a clickfocusableDateElementandfocusableDateButtonfor the cell / buttongetDateButtonandgetFocusableDateButtonfor getting focus targetType of change
Note
Note
NVDA announces a date twice, once for the cell and once for the focused button, because the cell
takes its name from its content. That is inherent to a labelled focusable element inside a
gridcellrather than something this PR can attribute away, and react-spectrum ships the samebehavior.
Warning
Date cell markup changed:
aria-label,tabindexandaria-disabledare now on abutton inside the cell rather than on the cell itself. Code that queried a date cell for
any of these needs to be updated accordingly, including Flow component ITs.
Screen readers
With using
role="application"onvaadin-month-calendar, arrow key navigation works correctly.VoiceOver on Safari 26
NVDA 2026.02
JAWS 2026.2608.25