-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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.
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
[datetime] fix(TimePicker): improve a11y markup #5397
Conversation
packages/datetime/src/timePicker.tsx
Outdated
<span tabIndex={-1} className={classes} onClick={onClick}> | ||
<span | ||
aria-controls={this.timeInputIds[timeUnit]} | ||
aria-label={`${isDirectionUp ? "Increase" : "Decrease"} ${timeUnit}`} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it's good that you included the time unit here, but it looks like it will not print nicely for some of the units. can you create a helper function in timeUnit.ts
to pretty print the time unit enum? something like:
/** Prints a descriptive label representing the plural of th given time unit. */
export function printTimeUnit(unit: TimeUnit) {
return {
[TimeUnit.HOUR_24]: "hours (24hr clock)",
[TimeUnit.HOUR_12]: "hours (12hr clock)",
[TimeUnit.MINUTE]: "minutes",
[TimeUnit.SECOND]: "seconds",
[TimeUnit.MS]: "milliseconds",
}[unit];
}
... and then use that helper function in this label value.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
Co-authored-by: Adi Dahiya <adi.dahiya14@gmail.com>
Co-authored-by: Adi Dahiya <adi.dahiya14@gmail.com>
…/blueprint into bv/timepicker-a11y
Fixes #0000
Checklist
Changes proposed in this pull request:
Reviewers should focus on:
Spinbutton example: https://w3c.github.io/aria-practices/examples/spinbutton/datepicker-spinbuttons.html