Skip to content

fix(input-date-picker): announce the purpose of each input in the range mode #12238

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
Elijbet merged 12 commits into from
Jun 10, 2025
Merged

fix(input-date-picker): announce the purpose of each input in the range mode #12238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d6f5780
fix(input-date-picker): announce purpose of each input in range format
Elijbet May 27, 2025
d00a3bf
Merge branch 'dev' into elijbet/7993-input-date-picker-voice-over-labels
Elijbet May 27, 2025
3dab9a0
end/startLabel and end/startPlaceholder
Elijbet May 28, 2025
054a864
add screenshot
Elijbet May 28, 2025
cff77bd
e2e test
Elijbet May 28, 2025
3e427ae
use nullish coalescing instead of logical or, so that label could be …
Elijbet May 29, 2025
eb5fdf8
revert changes - new direction is to use messageOverrides instead of …
Elijbet Jun 2, 2025
4a56893
revert the tests, messages, stories
Elijbet Jun 2, 2025
dced00f
cleanup
Elijbet Jun 2, 2025
923f08c
remove redundant strings'
Elijbet Jun 2, 2025
b338ba3
add role attribute to div
Elijbet Jun 4, 2025
08387df
Merge branch 'dev' into elijbet/7993-input-date-picker-voice-over-labels
Elijbet Jun 10, 2025
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
5 changes: 4 additions & 1 deletion packages/calcite-components/src/components/input-date-picker/assets/t9n/messages.en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
{
"chooseDate": "Choose date",
"dateFormat": "Date Format:"
"date": "Date",
"dateFormat": "Date Format: {format}",
"endDate": "End Date",
"startDate": "Start Date"
}
5 changes: 4 additions & 1 deletion packages/calcite-components/src/components/input-date-picker/assets/t9n/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
{
"chooseDate": "Choose date",
"dateFormat": "Date Format: {format}"
"date": "Date",
"dateFormat": "Date Format: {format}",
"endDate": "End Date",
"startDate": "Start Date"
}
6 changes: 3 additions & 3 deletions packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1080,7 +1080,7 @@ export class InputDatePicker
<InteractiveContainer disabled={this.disabled}>
{this.localeData && (
<div class={CSS.container}>
<div class={CSS.inputContainer}>
<div aria-label={this.label} class={CSS.inputContainer} role="group">
<div
class={CSS.inputWrapper}
data-position="start"
Expand All @@ -1103,7 +1103,7 @@ export class InputDatePicker
}}
disabled={disabled}
icon="calendar"
label={this.label}
label={this.range ? this.messages.startDate : this.messages.date}
oncalciteInputTextInput={this.calciteInternalInputInputHandler}
oncalciteInternalInputTextBlur={this.calciteInternalInputBlurHandler}
oncalciteInternalInputTextFocus={this.startInputFocus}
Expand Down Expand Up @@ -1188,7 +1188,7 @@ export class InputDatePicker
}}
disabled={disabled}
icon="calendar"
label={this.label}
label={this.messages.endDate}
oncalciteInputTextInput={this.calciteInternalInputInputHandler}
oncalciteInternalInputTextBlur={this.calciteInternalInputBlurHandler}
oncalciteInternalInputTextFocus={this.endInputFocus}
Expand Down
Loading