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

Merged
merged 5 commits into from Mar 8, 2016

Conversation

2 participants
@limscoder
Contributor

limscoder commented Feb 19, 2016

What does this PR do?

keyboard nav:

  • navigate between weeks with up/down arrow keys when inner grid is focused
  • navigate between years with up/down arrow keys when outer div is focused

aria:

  • added additional aria labels so screen reader reads date when focus changes (tested on OSX/chrome/voiceover and win8/IE11/JAWS)

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).

@gpbl

This comment has been minimized.

Show comment
Hide comment
@gpbl

gpbl Feb 20, 2016

Owner

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. 🌴

Owner

gpbl commented Feb 20, 2016

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. 🌴

@limscoder

This comment has been minimized.

Show comment
Hide comment
@limscoder

limscoder Mar 7, 2016

Contributor

Any progress on reviewing this? Can I answer any questions?

Contributor

limscoder commented Mar 7, 2016

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();

This comment has been minimized.

@gpbl

gpbl Mar 7, 2016

Owner

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.

@gpbl

gpbl Mar 7, 2016

Owner

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.

This comment has been minimized.

@limscoder

limscoder Mar 7, 2016

Contributor

yep, new function.

@limscoder

limscoder Mar 7, 2016

Contributor

yep, new function.

@gpbl gpbl modified the milestone: v2 Mar 8, 2016

@gpbl gpbl merged commit 8cb34b9 into gpbl:master Mar 8, 2016

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
coverage/coveralls First build on master at 98.855%
Details

@gpbl gpbl referenced this pull request Mar 8, 2016

Closed

New LocaleUtils: formatDate #140

@gpbl

This comment has been minimized.

Show comment
Hide comment
@gpbl

gpbl Mar 8, 2016

Owner

Thanks again @limscoder, those are great additions. They are going in the next major release, I'm working on it this week.

Owner

gpbl commented Mar 8, 2016

Thanks again @limscoder, those are great additions. They are going in the next major release, I'm working on it this week.

@limscoder

This comment has been minimized.

Show comment
Hide comment
@limscoder

limscoder Mar 8, 2016

Contributor

thx

Contributor

limscoder commented Mar 8, 2016

thx

gpbl added a commit that referenced this pull request Apr 8, 2016

Add formatDay() to LocaleUtils
This is required to add the aria-label attribute. See #132 for more details.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment