Skip to content

[v10] feat(ui-date-input): add missing role and aria-label to DateInput2 di… #2406

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ToMESSKa merged 1 commit into from
Feb 17, 2026
Merged

[v10] feat(ui-date-input): add missing role and aria-label to DateInput2 di… #2406

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 18 additions & 9 deletions packages/ui-date-input/src/DateInput2/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ describes: DateInput2
screenReaderLabels={{
calendarIcon: 'Calendar',
nextMonthButton: 'Next month',
prevMonthButton: 'Previous month'
prevMonthButton: 'Previous month',
datePickerDialog: 'Date picker'
}}
value={this.state.inputValue}
width="20rem"
Expand Down Expand Up @@ -51,7 +52,8 @@ describes: DateInput2
screenReaderLabels={{
calendarIcon: 'Calendar',
nextMonthButton: 'Next month',
prevMonthButton: 'Previous month'
prevMonthButton: 'Previous month',
datePickerDialog: 'Date picker'
}}
value={inputValue}
width="20rem"
Expand Down Expand Up @@ -100,7 +102,8 @@ const Example = () => {
screenReaderLabels={{
calendarIcon: 'Calendar',
nextMonthButton: 'Next month',
prevMonthButton: 'Previous month'
prevMonthButton: 'Previous month',
datePickerDialog: 'Date picker'
}}
width="20rem"
value={value}
Expand All @@ -113,7 +116,8 @@ const Example = () => {
screenReaderLabels={{
calendarIcon: 'Calendar',
nextMonthButton: 'Next month',
prevMonthButton: 'Previous month'
prevMonthButton: 'Previous month',
datePickerDialog: 'Date picker'
}}
width="20rem"
value={value2}
Expand All @@ -127,7 +131,8 @@ const Example = () => {
screenReaderLabels={{
calendarIcon: 'Calendar',
nextMonthButton: 'Next month',
prevMonthButton: 'Previous month'
prevMonthButton: 'Previous month',
datePickerDialog: 'Date picker'
}}
width="20rem"
value={value3}
Expand Down Expand Up @@ -176,7 +181,8 @@ In the examples above you can see that the `onChange` callback also return a UTC
screenReaderLabels={{
calendarIcon: 'Calendar',
nextMonthButton: 'Next month',
prevMonthButton: 'Previous month'
prevMonthButton: 'Previous month',
datePickerDialog: 'Date picker'
}}
value={this.state.inputValue}
width="20rem"
Expand Down Expand Up @@ -214,7 +220,8 @@ In the examples above you can see that the `onChange` callback also return a UTC
screenReaderLabels={{
calendarIcon: 'Calendar',
nextMonthButton: 'Next month',
prevMonthButton: 'Previous month'
prevMonthButton: 'Previous month',
datePickerDialog: 'Date picker'
}}
value={inputValue}
width="20rem"
Expand Down Expand Up @@ -283,7 +290,8 @@ const Example = () => {
screenReaderLabels={{
calendarIcon: 'Calendar',
nextMonthButton: 'Next month',
prevMonthButton: 'Previous month'
prevMonthButton: 'Previous month',
datePickerDialog: 'Date picker'
}}
width="20rem"
value={value}
Expand Down Expand Up @@ -324,7 +332,8 @@ const Example = () => {
screenReaderLabels={{
calendarIcon: 'Calendar',
nextMonthButton: 'Next month',
prevMonthButton: 'Previous month'
prevMonthButton: 'Previous month',
datePickerDialog: 'Date picker'
}}
value={inputValue}
locale="en-us"
Expand Down
23 changes: 23 additions & 0 deletions packages/ui-date-input/src/DateInput2/__tests__/DateInput2.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -416,4 +416,27 @@ describe('<DateInput2 />', () => {
expect(screenreaderMessage).toBeInTheDocument()
expect(screenreaderMessage).toHaveClass(/screenReaderContent/)
})

it('should render date picker dialog with proper role and ARIA label', async () => {
const datePickerLabel = 'Date picker'
render(
<DateInput2
renderLabel="Choose a date"
screenReaderLabels={{
calendarIcon: 'Calendar',
nextMonthButton: 'Next month',
prevMonthButton: 'Previous month',
datePickerDialog: datePickerLabel
}}
value=""
/>
)
const calendarButton = screen.getByRole('button', { name: 'Calendar' })
await userEvent.click(calendarButton)
await waitFor(() => {
const dialog = screen.getByRole('dialog', { name: datePickerLabel })
expect(dialog).toBeInTheDocument()
expect(dialog).toHaveAttribute('aria-label', datePickerLabel)
})
})
})
1 change: 1 addition & 0 deletions packages/ui-date-input/src/DateInput2/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,7 @@ const DateInput2 = forwardRef(
shouldContainFocus
shouldReturnFocus
shouldCloseOnDocumentClick
screenReaderLabel={screenReaderLabels.datePickerDialog}
>
<Calendar
withYearPicker={withYearPicker}
Expand Down
5 changes: 5 additions & 0 deletions packages/ui-date-input/src/DateInput2/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,15 @@ type DateInput2OwnProps = {
* Specifies the input label.
*/
renderLabel: Renderable
/**
* Accessible labels for the calendar button, month navigation buttons, and date picker dialog.
*/
screenReaderLabels: {
calendarIcon: string
prevMonthButton: string
nextMonthButton: string
// TODO: Make this field required in the next newest version. Currently optional to avoid breaking change.
datePickerDialog?: string
}
/**
* Specifies the input value.
Expand Down