fix(ui-calendar): DateInput2 days missing aria-selected by git-nandor · Pull Request #2506 · instructure/instructure-ui

git-nandor · 2026-04-07T12:46:20Z

INSTUI-4989

When a user selects a date, screen readers had no way to know which day was currently selected — aria-selected

Solution summary

Every ARIA role that supports aria-selected requires a specific ancestor context — there's no standalone option
The only axe-clean alternatives for table mode without structural changes:

aria-pressed on role="button" — valid, but "pressed" implies a toggle, not date selection. Wrong semantic.
selectedLabel text ← what's implemented. Axe-clean, universally supported, correct semantic.

Changes

Fixes missing aria-selected on calendar days in DateInput, DateInput2, and DateTimeInput when using the default table layout
In listbox mode (role="listbox"), days correctly use role="option" with aria-selected="true/false"; in table mode, days use role="button" where aria-selected is not ARIA-valid, so selection is now announced via a new selectedLabel prop that appends text to the accessible label (e.g. "15 April 2026, Selected")
Adds a selectedLabel prop to Calendar, Calendar.Day, DateInput (v1/v2), DateInput2, and DateTimeInput — passed through screenReaderLabels.selectedLabel in the DateInput variants;
Adds a TODO comment documenting the future WAI-ARIA grid pattern implementation path

Test plan

On the docs page, try this code sample and check what VoiceOver announces:

const Example = () => {
    const [selectedDate, setSelectedDate] = useState('')
    const [visibleMonth, setVisibleMonth] = useState('2025-05')
    const [useListbox, setUseListbox] = useState(false)

    return (
      <div>
        <Checkbox
          label={`role="${useListbox ? 'listbox' : 'table (default)'}" — click to toggle`}
          checked={useListbox}
          onChange={() => {
            setUseListbox((prev) => !prev)
            setSelectedDate('')
          }}
        />
        <View as="div" margin="small 0">
          <Text size="small" color="secondary">
            {useListbox
              ? 'Listbox mode: days have role="option" and aria-selected="true/false". Selection is announced via aria-selected.'
              : 'Table mode: days have role="button" with no aria-selected. Selection is announced via the accessible label (selectedLabel).'}
          </Text>
        </View>
        <Calendar
          role={useListbox ? 'listbox' : undefined}
          visibleMonth={visibleMonth}
          currentDate="2025-05-01"
          selectedDate={selectedDate}
          selectedLabel="selected"
          onRequestRenderNextMonth={(_e, requestedMonth) =>
            setVisibleMonth(requestedMonth)
          }
          onRequestRenderPrevMonth={(_e, requestedMonth) =>
            setVisibleMonth(requestedMonth)
          }
          onDateSelected={(date) => setSelectedDate(date)}
        />
      </div>
    )
  }

  render(<Example />)

Co-Authored-By: 🤖 Claude

github-actions · 2026-04-07T12:51:39Z

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-05-07 13:30 UTC

git-nandor · 2026-04-10T08:59:37Z

@@ -33,14 +33,15 @@ type DateInputOwnProps = {
   */
  renderLabel: Renderable
  /**
-   * Accessible labels for the calendar button, month navigation buttons, and date picker dialog.
+   * Accessible labels for the calendar button, month navigation buttons, date picker dialog, and selected date state.
   */
  screenReaderLabels: {
    calendarIcon: string
    prevMonthButton: string
    nextMonthButton: string
    // TODO: Make this field required in the next version. Currently optional to avoid breaking change.


It’s not included in v1 yet, so I left it unchanged. As I understand it, this will apply to v3.
This is also the case for DateInput2

If its just used in v11.7, then please make it mandatory

matyasf

see my comments

matyasf · 2026-04-13T11:56:38Z

+   * Screen reader label appended to the date label when the day is selected.
+   * Used to announce the selected state to assistive technologies.
+   */
+  selectedLabel?: string


I think this can be made mandatory in v2

matyasf · 2026-04-13T11:57:00Z

   */
  screenReaderLabels: {
    calendarIcon: string
    prevMonthButton: string
    nextMonthButton: string
    // TODO: Make this field required in the next version. Currently optional to avoid breaking change.
    datePickerDialog?: string
+    selectedLabel?: string


I think this can be mandatory in v2

matyasf · 2026-04-13T11:57:32Z

@@ -33,14 +33,15 @@ type DateInputOwnProps = {
   */
  renderLabel: Renderable
  /**
-   * Accessible labels for the calendar button, month navigation buttons, and date picker dialog.
+   * Accessible labels for the calendar button, month navigation buttons, date picker dialog, and selected date state.
   */
  screenReaderLabels: {
    calendarIcon: string
    prevMonthButton: string
    nextMonthButton: string
    // TODO: Make this field required in the next version. Currently optional to avoid breaking change.


If its just used in v11.7, then please make it mandatory

matyasf · 2026-04-13T11:57:51Z

+   * Screen reader label appended to the date label when the day is selected.
+   * Used to announce the selected state to assistive technologies.
+   */
+  selectedLabel?: string


I think this can be made mandatory

If this becomes mandatory in DateTimeInput/v1, it will also impact Calendar/v1, Day/v1, and DateInput/v1.
Should I create a DateTimeInput/v2 and make it mandatory there?

hmm if this would be the only change, then no IMO

https://github.com/instructure/instructure-ui/pull/2518/changes#diff-654096f083ddf568261002852e75214784f20bb79fd09eb025f0905774fe99da should be mandatory in v2, but in this PR

balzss

I agree with @matyasf on making the prop mandatory in v2. other than that everything looks ok

…DateInput v1 with DateInput v2 in DateTimeInput BREAKING CHANGE: renderWeekdayLabels` prop removed `calendarIcon` is a new required prop INSTUI-4791

…elected on calendar days, BREAKING CHANGE: add mandatory prop selectedLabel, change datePickerDialog prop to mandatory

github-actions · 2026-05-07T13:21:50Z

Visual regression report

✅ No changes.

Status	Count
Unchanged	32
Changed	0
New	0
Removed	0

📊 View full report

_{Baselines come from the visual-baselines branch. They refresh on every merge to master.}

…) 6582ff1cb1e1f384c66101d85e731a8d15bcad8e

git-nandor self-assigned this Apr 7, 2026

git-nandor changed the title ~~fix(ui-calendar): set missing aria-selected on days~~ fix(ui-calendar): DateInput2 days missing aria-selected Apr 7, 2026

git-nandor force-pushed the INSTUI-4989_DateInput2_days_missing_aria-selected branch 5 times, most recently from 4892b87 to 7619801 Compare April 10, 2026 08:24

git-nandor commented Apr 10, 2026

View reviewed changes

git-nandor marked this pull request as ready for review April 10, 2026 09:00

git-nandor requested review from balzss and matyasf April 10, 2026 09:00

matyasf requested changes Apr 13, 2026

View reviewed changes

balzss approved these changes Apr 14, 2026

View reviewed changes

git-nandor force-pushed the INSTUI-4989_DateInput2_days_missing_aria-selected branch 5 times, most recently from 1fbb850 to 072c29b Compare April 17, 2026 07:46

git-nandor requested a review from matyasf April 17, 2026 08:37

git-nandor marked this pull request as draft April 17, 2026 09:27

matyasf approved these changes Apr 20, 2026

View reviewed changes

git-nandor force-pushed the INSTUI-4989_DateInput2_days_missing_aria-selected branch from 072c29b to cd05e2f Compare April 21, 2026 10:42

git-nandor changed the base branch from master to INSTUI-4791-time-date-input-rework-multi-version April 21, 2026 10:43

git-nandor force-pushed the INSTUI-4989_DateInput2_days_missing_aria-selected branch from cd05e2f to 8e7708b Compare April 21, 2026 11:17

git-nandor marked this pull request as ready for review April 21, 2026 15:27

ToMESSKa force-pushed the INSTUI-4791-time-date-input-rework-multi-version branch 3 times, most recently from 0c00547 to bf24b70 Compare April 24, 2026 08:48

ToMESSKa force-pushed the INSTUI-4791-time-date-input-rework-multi-version branch from bf24b70 to 67a968a Compare May 7, 2026 08:02

Base automatically changed from INSTUI-4791-time-date-input-rework-multi-version to master May 7, 2026 08:19

feat(ui-select,ui-date-time-input): rework DateTimeInput and replace …

8083f00

…DateInput v1 with DateInput v2 in DateTimeInput BREAKING CHANGE: renderWeekdayLabels` prop removed `calendarIcon` is a new required prop INSTUI-4791

git-nandor force-pushed the INSTUI-4989_DateInput2_days_missing_aria-selected branch from 8e7708b to 60c5f40 Compare May 7, 2026 13:10

fix(ui-date-time-input,ui-date-input,ui-calendar): set missing aria-s…

3d35405

…elected on calendar days, BREAKING CHANGE: add mandatory prop selectedLabel, change datePickerDialog prop to mandatory

git-nandor force-pushed the INSTUI-4989_DateInput2_days_missing_aria-selected branch from 60c5f40 to 3d35405 Compare May 7, 2026 13:16

github-actions Bot pushed a commit that referenced this pull request May 7, 2026

visual-regression: PR #2506 (6582ff1cb1e1f384c66101d85e731a8d15bcad8e…

e5ed267

…) 6582ff1cb1e1f384c66101d85e731a8d15bcad8e

git-nandor merged commit 08abed5 into master May 7, 2026
8 checks passed

git-nandor deleted the INSTUI-4989_DateInput2_days_missing_aria-selected branch May 7, 2026 13:29

Conversation

git-nandor commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Solution summary

Changes

Test plan

Uh oh!

github-actions Bot commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

matyasf left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

git-nandor Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

balzss left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Visual regression report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

git-nandor commented Apr 7, 2026 •

edited

Loading

github-actions Bot commented Apr 7, 2026 •

edited

Loading

git-nandor Apr 16, 2026 •

edited

Loading

github-actions Bot commented May 7, 2026 •

edited

Loading