Fix accessibility issues#414
Open
jpmckinney wants to merge 4 commits into
Open
Conversation
|
@jpmckinney is attempting to deploy a commit to the civicdatalab-tech's projects Team on Vercel. A member of the Team first needs to authorize it. |
…SelectYearCalendar Disabled (out-of-range) month cells were only greyed via the Disabled CSS class and silently no-oped on click, leaving screen-reader and keyboard users with no signal that the month is unavailable. Set `aria-disabled` on the cell button; the existing handleClick early-return already blocks activation. We use `aria-disabled` rather than the native `disabled` attribute on purpose: the year grid manages a roving focus that programmatically focuses the cell matching focusedDate as the user arrows through the months. A native `disabled` button cannot receive focus, which would desync the focus ring from focusedDate while traversing disabled cells. aria-disabled keeps the cells focusable while conveying the state, per the WAI-ARIA grid pattern. The selected month also gets a ", selected" suffix in its aria-label. That string is consumer-translatable via a new `labels` prop (YearCalendarLabels), following the same convention as the Table footer's `labels`/TableLabels — it falls back to the English default when unset. Also expose minValue/maxValue on MultiSelectYearCalendarProps — the cell's isDisabled logic already reads them from calendar state, but they were not part of the typed API — and add Storybook coverage for both year-calendar variants plus a localized-labels example (the package's unit tests cannot run: @testing-library/dom is absent from the workspace). Unblocks IDS-DRR-Frontend ACC-005. Refs CivicDataLab/IDS-DRR-Frontend#499. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
SelectProps exposed only `helpText`, which renders visible help. A consumer had no way to associate the control with an existing description element (e.g. a cross-field dependency hint such as "select a district first to enable this field") via aria-describedby without rendering visible text. Add an optional `describedBy` prop and merge it, space-separated, with the ids already generated for `helpText` and `error` rather than overwriting them. No visual change when the prop is unset. Adds a Storybook story. Unblocks IDS-DRR-Frontend ACC-003. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
YearCalendar and MultiSelectYearCalendar hardcoded English month names in
monthsObj — both the visible abbreviation ("Jan") and the full name used in
the cell aria-label ("January"). These are CLDR data that Intl already knows
for every locale, so route them through react-aria's useDateFormatter
(month: 'short' for the visible text, month: 'long' for the aria-label)
keyed off the active locale from the nearest <I18nProvider>, matching the
MultiMonthPicker i18n approach. monthsObj now carries only month numbers for
the 3x4 grid layout; names are formatted at render time.
The day is fixed to the 1st in local time (new Date(year, month - 1, 1)) to
avoid the UTC-midnight off-by-one that bit MultiMonthPicker. Adds a Storybook
story rendering the months in French via <I18nProvider>.
This leaves the consumer-supplied `labels` prop for only the genuinely
app-authored strings (e.g. "selected"), which Intl does not provide.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
Author
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
1 participant
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.
Also: