First pass at making Pikaday accessibile #522
Conversation
This attribute isn't needed since when the picker is hidden it has `display: none`. Screen readers will ignore anything with `display: none` css on it.
|
Nice job @Robdel12! Hope it merges, accessibility is not just a feature it's just basic requirement because it helps people navigate the web that we're building. |
|
This is great, thank you! |
First pass at making Pikaday accessibile (Pikaday#522)
| @@ -922,6 +981,8 @@ | |||
| if (typeof this._o.onDraw === 'function') { | |||
| this._o.onDraw(this); | |||
| } | |||
| // let the screen reader user know to use arrow keys | |||
| this._o.field.setAttribute('aria-label', 'Use the arrow keys to pick a date'); | |||
There was a problem hiding this comment.
This errors when a field isn't bound.
|
hey guys, thank you for your efforts! unfortunately when changing the date using the arrow keys the changed value/date does not get announced by voiceover. maybe something changed in the behaviour of voiceover? i am using chrome (51.0.2704.106) on mac os x 10.11.5 and used the latest master branch to test this. |
|
@hvbe Chrome might be the issue. I've noticed lots of issues with Chrome & aria-live. It sucks it doesn't work as it should in chrome but "thankfully" the combos in the a11y world that are heavily used are: OSX - Safari - VoiceOver As much as it pains me to say this... try in Safari? |
|
@Robdel12 thanks for your reply. indeed, in safari it seems to be working without issues. let's just say that the chrome + voiceover combo is an edge case :) |
|
From what I can tell... there is a bug happening because the listener is attached to the document at - https://github.com/dbushell/Pikaday/blob/master/pikaday.js#L629 What's going on, is that if you are on another element or anything else on the page, and use the arrow keys (to open a drop down or something else on the page).. It will also adjust the date field's value globally. ... Or that's what it seems like is going on at least. |
It looks like there's missing an extra check missing to see if |
|
This is not accessible at all... VoiceOver doesn't even read the date. |
|
This is a known issue (see #776) and seems to be regression caused by a PR merged after this one. |
First I'd like to give all of the credit to @mrenty. He did pretty much all of the hard work on this and I came in to push it over the line.
Today is Global Accessibility Awareness Day and one of the things I really wanted to do for GAAD was make Pikaday accessibile. With this datepicker being the go to for the majority of the dev community it's important to me that this plugin is accessibile.
Here's a video example of what it's like to use this PRs Pikaday with a screen reader: https://www.youtube.com/watch?v=iZhi4nQP5kI
Here's what it's like to use pikaday with a screen reader today:
https://youtu.be/mrUwra6C34U
CC: @dbushell / @rikkert