Skip to content
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

fix(a11y): make datepicker more accessible #3343

Merged
merged 1 commit into from Sep 5, 2019

Conversation

qub1t
Copy link
Contributor

@qub1t qub1t commented Aug 29, 2019

A finding of an a11y test on a project, where the Datepicker is used, was that the proposed columnheader role is missing, thus making the datepicker not accessible for blind users.

Before submitting a pull request, please make sure you have at least performed the following:

  • read and followed the CONTRIBUTING.md guide.
  • built and tested the changes locally.
  • [] added/updated any applicable tests.
  • [] added/updated any applicable API documentation.
  • [] added/updated any applicable demos.

A finding of an a11y test on a project, where the Datepicker is used, was that the proposed columnheader role is missing, thus making the datepicker not accessible for blind users.
@qub1t qub1t changed the title make datepicker more accessible fix(a11y): make datepicker more accessible Aug 29, 2019
@benouat
Copy link
Member

benouat commented Sep 4, 2019

Hey @qub1t

Would you mind showing us a link to the documentation referring role="columnheader" should be used? I am curious to read about.

@codecov-io
Copy link

Codecov Report

Merging #3343 into master will increase coverage by 2.88%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #3343      +/-   ##
==========================================
+ Coverage   87.99%   90.88%   +2.88%     
==========================================
  Files          94       95       +1     
  Lines        2741     2743       +2     
  Branches      510      510              
==========================================
+ Hits         2412     2493      +81     
+ Misses        268      190      -78     
+ Partials       61       60       -1
Flag Coverage Δ
#e2e 55.01% <ø> (-44.99%) ⬇️
#unit 87.99% <ø> (ø) ⬆️
Impacted Files Coverage Δ
src/datepicker/datepicker-month-view.ts 100% <ø> (ø) ⬆️
src/index.ts 100% <0%> (ø)
src/datepicker/datepicker-input.ts 96.99% <0%> (+1.5%) ⬆️
src/tooltip/tooltip.ts 98.41% <0%> (+1.58%) ⬆️
src/util/positioning.ts 95.83% <0%> (+2.5%) ⬆️
src/popover/popover.ts 100% <0%> (+2.77%) ⬆️
src/util/util.ts 48.27% <0%> (+3.44%) ⬆️
src/typeahead/typeahead.ts 96.99% <0%> (+6.01%) ⬆️
src/util/accessibility/live.ts 95.83% <0%> (+12.5%) ⬆️
src/dropdown/dropdown.ts 94.03% <0%> (+23.84%) ⬆️
... and 2 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e26edc1...fc84c8c. Read the comment docs.

@qub1t
Copy link
Contributor Author

qub1t commented Sep 5, 2019

@benouat

Sure. This is where I found it. https://www.w3.org/TR/wai-aria-1.1/#grid

@benouat
Copy link
Member

benouat commented Sep 5, 2019

Oh yes you're right! I completely forgot our datepicker was set to be role="grid"
Hence, your proposal makes total sense.

@benouat benouat merged commit 8260198 into ng-bootstrap:master Sep 5, 2019
@benouat
Copy link
Member

benouat commented Sep 5, 2019

Thanks @qub1t for your contribution!

@benouat benouat added this to the 5.1.2 milestone Sep 5, 2019
qub1t added a commit to qub1t/ng-bootstrap that referenced this pull request Sep 5, 2019
After the addition of ```role="columnheader"``` (ng-bootstrap#3343), the parent div needs role="row", just like all consecutive sibling divs
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants