{"action":"created","issue":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/1311","repository_url":"https://api.github.com/repos/WordPress/gutenberg","labels_url":"https://api.github.com/repos/WordPress/gutenberg/issues/1311/labels{/name}","comments_url":"https://api.github.com/repos/WordPress/gutenberg/issues/1311/comments","events_url":"https://api.github.com/repos/WordPress/gutenberg/issues/1311/events","html_url":"https://github.com/WordPress/gutenberg/issues/1311","id":237256552,"number":1311,"title":"react-datepicker is not accessible","user":{"login":"afercia","id":1682452,"avatar_url":"https://avatars1.githubusercontent.com/u/1682452?v=4","gravatar_id":"","url":"https://api.github.com/users/afercia","html_url":"https://github.com/afercia","followers_url":"https://api.github.com/users/afercia/followers","following_url":"https://api.github.com/users/afercia/following{/other_user}","gists_url":"https://api.github.com/users/afercia/gists{/gist_id}","starred_url":"https://api.github.com/users/afercia/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/afercia/subscriptions","organizations_url":"https://api.github.com/users/afercia/orgs","repos_url":"https://api.github.com/users/afercia/repos","events_url":"https://api.github.com/users/afercia/events{/privacy}","received_events_url":"https://api.github.com/users/afercia/received_events","type":"User","site_admin":false},"labels":[{"id":546517042,"url":"https://api.github.com/repos/WordPress/gutenberg/labels/Accessibility","name":"Accessibility","color":"655104","default":false},{"id":541913521,"url":"https://api.github.com/repos/WordPress/gutenberg/labels/Priority%20High","name":"Priority High","color":"e99695","default":false},{"id":531680823,"url":"https://api.github.com/repos/WordPress/gutenberg/labels/[Type]%20Bug","name":"[Type] Bug","color":"d93f0b","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/WordPress/gutenberg/milestones/43","html_url":"https://github.com/WordPress/gutenberg/milestone/43","labels_url":"https://api.github.com/repos/WordPress/gutenberg/milestones/43/labels","id":3260055,"number":43,"title":"Merge Proposal: Accessibility","description":"","creator":{"login":"karmatosed","id":253067,"avatar_url":"https://avatars3.githubusercontent.com/u/253067?v=4","gravatar_id":"","url":"https://api.github.com/users/karmatosed","html_url":"https://github.com/karmatosed","followers_url":"https://api.github.com/users/karmatosed/followers","following_url":"https://api.github.com/users/karmatosed/following{/other_user}","gists_url":"https://api.github.com/users/karmatosed/gists{/gist_id}","starred_url":"https://api.github.com/users/karmatosed/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/karmatosed/subscriptions","organizations_url":"https://api.github.com/users/karmatosed/orgs","repos_url":"https://api.github.com/users/karmatosed/repos","events_url":"https://api.github.com/users/karmatosed/events{/privacy}","received_events_url":"https://api.github.com/users/karmatosed/received_events","type":"User","site_admin":false},"open_issues":15,"closed_issues":0,"state":"open","created_at":"2018-04-11T20:13:28Z","updated_at":"2018-04-13T13:30:35Z","due_on":null,"closed_at":null},"comments":19,"created_at":"2017-06-20T15:40:57Z","updated_at":"2018-04-13T18:09:27Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"Looks like `react-datepicker`, currently used for the \"publish\" date, has several accessibility issues.\r\n\r\n<img width=\"305\" alt=\"screen shot 2017-06-20 at 17 24 25\" src=\"https://user-images.githubusercontent.com/1682452/27341489-b1620c82-55dd-11e7-930f-583fea585ba8.png\">\r\n\r\nJust to mention a few:\r\n- not operable with a keyboard\r\n- empty and not focusable prev/next month links\r\n- day names not in relationship with the day numbers\r\n- arguable values for the day aria-labels, e.g. `day-15`\r\n- missing labels for the hour/minutes fields \r\n\r\nI was also able to break it completely just editing the hour/mins fields using a keyboard:\r\n\r\n<img width=\"303\" alt=\"screen shot 2017-06-15 at 14 51 02\" src=\"https://user-images.githubusercontent.com/1682452/27341521-cb5cfa5c-55dd-11e7-979f-6f9d64d3c0a8.png\">\r\n\r\nI'd strongly recommend that every external component/library included in Gutenberg should be picked up taking into consideration also its accessibility support.\r\n\r\nNot sure `react-datepicker` can be easily patched and made decently accessible. It would likely require a lot of work. Not sure if other, more accessible, react date-pickers exist. Not sure if using a date-picker is a good idea in the first place 🙁  Date pickers are always tricky.\r\n\r\nOne option could be considering a completely different UI, without a date-picker. Happy to evaluate other, more accessible, tools if any, but I'm afraid `react-datepicker` in its current state doesn't meet the quality standards we'd like to see in WordPress and it's a blocker for accessibility.\r\n\r\n/cc @jasmussen and @joedolson (as he's an expert about calendars)"},"comment":{"url":"https://api.github.com/repos/WordPress/gutenberg/issues/comments/381217935","html_url":"https://github.com/WordPress/gutenberg/issues/1311#issuecomment-381217935","issue_url":"https://api.github.com/repos/WordPress/gutenberg/issues/1311","id":381217935,"user":{"login":"aduth","id":1779930,"avatar_url":"https://avatars1.githubusercontent.com/u/1779930?v=4","gravatar_id":"","url":"https://api.github.com/users/aduth","html_url":"https://github.com/aduth","followers_url":"https://api.github.com/users/aduth/followers","following_url":"https://api.github.com/users/aduth/following{/other_user}","gists_url":"https://api.github.com/users/aduth/gists{/gist_id}","starred_url":"https://api.github.com/users/aduth/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aduth/subscriptions","organizations_url":"https://api.github.com/users/aduth/orgs","repos_url":"https://api.github.com/users/aduth/repos","events_url":"https://api.github.com/users/aduth/events{/privacy}","received_events_url":"https://api.github.com/users/aduth/received_events","type":"User","site_admin":false},"created_at":"2018-04-13T18:09:27Z","updated_at":"2018-04-13T18:09:27Z","author_association":"MEMBER","body":">How about making it an either/or option? So that people can use a date picker if they want to, but don't have to.\r\n\r\nSeems to fall against the [\"Decisions, not Options\" mantra](https://wordpress.org/about/philosophy/#decisions).\r\n\r\nIt hasn't been raised but not addressed as of yet: How does [`<input type=\"date\">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) fare for accessibility and usability? That it's browser-dependent is a bit concerning, though it is native. We'd still need a separate field for time."}}
{"actor":{"display_login":"aduth"}}