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.

Sign up for GitHub

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

Jump to bottom

As a keyboard or screen user, I want to navigate the timetree without a mouse or touch device so that I can explore the content in multiple paths and access all the information in a manner that is equivalent to the experience of a sighted user. #65

Closed
20 tasks done
rlskoeser opened this issue Feb 6, 2023 · 1 comment
Closed
20 tasks done

As a keyboard or screen user, I want to navigate the timetree without a mouse or touch device so that I can explore the content in multiple paths and access all the information in a manner that is equivalent to the experience of a sighted user. #65

rlskoeser opened this issue Feb 6, 2023 · 1 comment
Assignees
@rlskoeser
Labels
♿ accessibility Impacts access for some users

Comments

@rlskoeser
Copy link
Contributor

rlskoeser commented Feb 6, 2023 •
edited

dev notes

  • make leaves keyboard navigable
  • make keyboard nav order logical
  • make the leaves buttons (role = button)
    • aria label: display title of the leaf
    • area described by: display date and branch
    • trigger button on enter & space bar; transfer focus in, then close button transfers focus back.
  • disable leaf button when tag is active and leaf does not have tag
  • make the panel act like a modal (transfer focus; announce; for keyboard user, send them to the close button after tabbing through last tag; return focus to the next leaf after the clicked one)
  • separate tag from panel: closing panel should no longer close the tag
  • h2 equivalent label for each branch (possible target from the branch legend in the intro)
  • make the footer tab order first before the tree
  • make the intro dom order first before the tree
  • allow zoom on desktop (tracked separately)
  • buttons for zoom in/out (tracked separately)
  • improve box-shadow for leaf label text by default #199
  • ensure visually hidden content is also hidden from screen readers
  • ensure visually hidden/disabled buttons are disabled or hidden from screen readers

revisions after testing:

  • update node order in the dom to follow visual left-to-right branch order
  • revert focus style customization for active tag close button
  • ensure invisible branch headers retain tabindex="-1" (focussable but not part of default tab sequence)
  • clean up focus style for invisible branch header when focused
  • when tag is active, make tagging act like a modal (contain within tree + tag)
@rlskoeser rlskoeser added the ♿ accessibility Impacts access for some users label Feb 6, 2023
@rlskoeser rlskoeser changed the title As a keyboard or screen user, I want to navigate the timetree without a mouse or touch device so that I can explore the content in multiple paths and access all the information in a manner that is equivalent to the experience of a sighted user.. As a keyboard or screen user, I want to navigate the timetree without a mouse or touch device so that I can explore the content in multiple paths and access all the information in a manner that is equivalent to the experience of a sighted user. Feb 6, 2023
@rlskoeser rlskoeser self-assigned this Mar 2, 2023
rlskoeser added a commit that referenced this issue Apr 25, 2023
@rlskoeser
Set role=button, aria label, aria-descriptions on leaf path elements
b932aca 
ref #65
@rlskoeser rlskoeser mentioned this issue Apr 25, 2023
Merged
rlskoeser added a commit that referenced this issue Apr 27, 2023
@rlskoeser
Set role=button, aria label, aria-descriptions on leaf path elements (#…
6350655 
…173)

* Set role=button, aria label, aria-descriptions on leaf path elements

ref #65

* Use aria-describedby for short descriptions of leaves

* Use the correct aria attribute for describedby
@rlskoeser rlskoeser added 🗜️ awaiting testing Implemented and ready to be tested ⚠️tested needs attention Has been through acceptance testing and needs additional work and removed 🗜️ awaiting testing Implemented and ready to be tested ⚠️tested needs attention Has been through acceptance testing and needs additional work labels May 18, 2023
@rlskoeser rlskoeser added 🗜️ awaiting testing Implemented and ready to be tested and removed ⚠️tested needs attention Has been through acceptance testing and needs additional work labels May 30, 2023
@rlskoeser
Copy link
Contributor Author

implemented and tested on #202

@rlskoeser rlskoeser removed the 🗜️ awaiting testing Implemented and ready to be tested label May 30, 2023
rlskoeser added a commit that referenced this issue Sep 22, 2023
@rlskoeser
Set role=button, aria label, aria-descriptions on leaf path elements (#…
5b92e85 
…173)

* Set role=button, aria label, aria-descriptions on leaf path elements

ref #65

* Use aria-describedby for short descriptions of leaves

* Use the correct aria attribute for describedby
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@rlskoeser rlskoeser

Labels
♿ accessibility Impacts access for some users
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@rlskoeser