-
Notifications
You must be signed in to change notification settings - Fork 63
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
LG-3878: Date Picker add current year/month selection to aria-label #2183
Conversation
🦋 Changeset detectedLatest commit: 838b546 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Size Change: +48 B (0%) Total Size: 1.23 MB
ℹ️ View Unchanged
|
packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.spec.tsx
Outdated
Show resolved
Hide resolved
@@ -123,7 +123,9 @@ export const DatePickerMenuHeader = forwardRef< | |||
<div className={menuHeaderSelectContainerStyles}> | |||
<Select | |||
{...selectElementProps} | |||
aria-label="Select month" | |||
aria-label={`Select month - ${ | |||
monthOptions[month.getUTCMonth()].short |
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.
I think we want .long
. As-is this will announce "Select month - Dec selected".
Also, not sure how VO handles dashes like that
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.
i didn't hear any issues with the dash but I'll double check
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.
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.
Honestly, I'm not sure; there were a few issues I had while using VO, like not being able to navigate inside the selects. I was gonna investigate a little more and create tickets for them.
✍️ Proposed changes
🎟 Jira ticket: LG-3878
Currently, when navigating with VoiceOver, VoiceOver does not announce the current selection for the year and month selects. This happens because we pass a static
aria-label
to theSelect
component. My solution is to make thearia-label
dynamic by appending the current selection to thearia-label
string.✅ Checklist
For bug fixes, new features & breaking changes
yarn changeset
and documented my changesFor new components
🧪 How to test changes