Focus is visibly lost when tabbing to existing entries

[kimberlythegeek]

trafficstars

When navigating using the keyboard, focus is visibly lost after tabbing past "Search Lockbox Entries"

Steps to reproduce:

1. Build & run lockbox from master
2. Using keyboard only:
3. Activate Get Started button
4. Activate New Entry button
5. Fill in details, activate Create Entry
6. Tab through to Home button and activate

Now, when tabbing through the elements on the page, focus is visibly lost after tabbing past the "Clear" link in the "Search Lockbox Entries" box.

The entries can still be accessed by hitting the up or down arrow keys. Focus then is visible on the existing entries.

[jimporter]

What's the expected UX here normally? I just used something roughly like what we have in Firefox, where the list itself doesn't have a focus state; only list items do.

[kimberlythegeek]

I would expect to see focus on the first list item after tabbing past the "Clear" link. This implies that the list items are not in the tab order, but the containing element is.

Looking at the source, the list has tabindex="0". Adding the same attribute to the items does not work, and setting tabindex="1" on the list items creates a non-sequential tab order.

I'm currently looking through ARIA roles and attributes to decide what would be the best implementation here.

[jimporter]

@kimberlythegeek The whole list has focus, but our CSS is written so that the focus indicator is on the currently-selected item in the list. Therefore, when there's no currently-selected item, the focus is invisible. We could draw a focus-ring around the whole list in this case, but I think it'd be confusing to draw it around the first item; if we did that, users would expect that hitting the Down arrow would select the second item, but it really selects the first.

[kimberlythegeek]

@jimporter I agree.

Adding role="list" and role="listitem" does create the desired outcome of focus going to the first list item. However, the details of the entry do not display, even though data-selected="true. I also cannot reach list items other than the first one.

I think focusing the list would probably be the best implementation in this case.

[jimporter]

@kimberlythegeek I'm surprised that adding ARIA roles changed the focus behavior. I thought it only affected how screen readers, well, read the page. In any case, it sounds like this would be ok if we had some CSS to highlight the whole list when it's focused but there's nothing selected. (Though adding ARIA roles where needed would be good too, provided they don't mess with the interaction...)

[kimberlythegeek]

@jimporter Sounds good. I do think ARIA roles would be a good idea. I will look into it more.