-
-
Notifications
You must be signed in to change notification settings - Fork 732
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
Keyboard nav and aria improvements #132
Conversation
Hi @limscoder thanks so much for this PR! Really appreciated. I'm on vacation now, I can give a look to it in the next days. 🌴 |
Any progress on reviewing this? Can I answer any questions? |
@@ -429,10 +468,17 @@ export default class DayPicker extends Component { | |||
tabIndex = this.props.tabIndex; | |||
} | |||
} | |||
|
|||
const ariaLabel = this.props.localeUtils.formatDate ? | |||
this.props.localeUtils.formatDate(day) : day.toDateString(); |
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.
The formatDate
here is a new function to add to the LocaleUtils right? I can take care of this (need to update docs, tests, etc. 😄)
We should add the locale
props as second argument to the function, so implementers can use their own localization utils.
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.
yep, new function.
Thanks again @limscoder, those are great additions. They are going in the next major release, I'm working on it this week. |
thx |
This is required to add the aria-label attribute. See #132 for more details.
What does this PR do?
keyboard nav:
aria:
Any background context you want to provide?
There are 5 commits. Started with some refactoring to simplify DayPicker, then added keyboard nav features and aria labels to date cells, so that it works better with screen readers.
Where should the reviewer start?
Look at each commit independently.
How should this be manually tested?
Test keyboard nav in example app.
Test with screen reader in example app (cmd-f5 to enable voiceover in OSX).