NUKnightLab / TimelineJS3

TimelineJS v3: A Storytelling Timeline built in JavaScript. http://timeline.knightlab.com
Mozilla Public License 2.0
2.99k stars 621 forks source link

Improve tabbing order of the `Timeline` component #763

Closed oleksandr-danylchenko closed 2 years ago

oleksandr-danylchenko commented 2 years ago

For more natural keyboard navigation across the Timeline component, I would suggest such order:

  1. Main timeline tab stop
  2. Left arrow (provide focus indication and the rollover text)
  3. Right arrow (provide focus indication and the rollover text)
  4. Any visible links in the currently-selected timeline item
  5. The controls (zoom in, zoom out, back) in the lower part of the timeline
  6. Timeline credits link

Because now it goes in this way:

  1. Main timeline tab stop
  2. Any visible links in the currently-selected timeline item
  3. Left arrow (provide focus indication and the rollover text)
  4. Right arrow (provide focus indication and the rollover text)
  5. Timeline credits link
  6. The controls (zoom in, zoom out, back) in the lower part of the timeline

https://user-images.githubusercontent.com/68850090/174779355-00ff45cd-56d9-4017-9214-46198e4c78d1.mp4

And for me, if I would be a keyboard navigation user, the ability to access next/prev before the slide links or the MenuBar controls before the Timeline credits would be convenient and intuitive

JoeGermuska commented 2 years ago

fixed with 8019670