Accessibility problems with the Vue timeline

[anjackson]

trafficstars

Describe the bug

The new timeline in 2.7.0+ as accessibility issues because keyboard navigation does not work as expected.

Steps to reproduce the bug

Go to https://beta.webarchive.org.uk/wayback/en/archive/*/http://portico.bl.uk/ and attempt to navigate the timeline using your keyboard. Expect to tab through a lot of blank dates in the timeline (e.g. having to tab ~15 times to get from 1995 to 1996), with no visual feedback most of the time.

Each 'empty' element in the timeline is represented like this:

<div tabindex="0" class="line" style="height: 0%;"></div>

i.e. with a tabindex set, i.e. part of tab navigation, but with a height of zero, thus invisible.

Expected behavior

Keyboard navigation should switch between actionable elements with clear visual feedback. This can be done by omitting the tabindex when the height is zero.

<div class="line" style="height: 0%;"></div>
<div tabindex="0" class="line" style="height: 20%;"></div>

Or perhaps...

<div tabindex="-1" class="line" style="height: 0%;"></div>
<div tabindex="0" class="line" style="height: 20%;"></div>

...as tabindex="-1" is an explicit statement that an object is not tab-accessible.

[ldbiz]

Currently testing a fix along the lines of above and noting any other related issues in case they need scoping in.

[ldbiz]

I'm off this issue for the time-being due to unrelated priorities, but I think my fix changed the histo div tabindex to a conditional and removed the zero index from the inner:

changed https://github.com/webrecorder/pywb/blob/main/pywb/vueui/src/components/Timeline.vue#L42 to: :tabindex="histoPeriod.snapshotCount ? 0 : -1"

removed: https://github.com/webrecorder/pywb/blob/main/pywb/vueui/src/components/Timeline.vue#L52