SelectPanel2: Keyboard navigation for list

[siddharthkp]

• Closes https://github.com/github/primer/issues/2636
• Context: https://github.com/github/primer/issues/2579
• Parent epic: https://github.com/github/primer/issues/2396

---

Before focus zone for list:

before-list-focus-zone.mov

After focus zone for list:

after-list-focus-zone.mov

Notice how the list remembers the last item that had focus and jumps back to that 😇 (thanks @T-Hugs who wrote the original behaviors)

[T-Hugs]

I'm glad they're still useful :)

[broccolinisoup]

Code looks good! Two things to note from my test: (Let me know if I misunderstood anything 🙌🏻 )

1. Tested it on Chrome and tried selecting the item with the space key. (Not sure if it is configured yet but it was my intuition to select with the space key.) When the item is selected with the space key, the list shifts.

select-with-space.mp4

Vide description: Moving the focus with tab key to one of the selectable list items and presses the space key. The list jumps and the selected item is not visible anymore.

2. Tested it on Firefox. When the focus is moved to the list, the focus ring is not visible. It becomes visible if I go to the footer with tab and come back to the list.

firefox-focus-ring.mp4

Vide description: Moving the focus with tab key to the list zone However when the focus is in the list zone, there is no visual indicator to display the current focus. The expected focus ring comes back on the list item after moving to and back from the footer area.

[siddharthkp]

When the item is selected with the space key, the list shifts.

Yes!

That is a bug in ActionList that I'm tracking in the epic come back to.

[broccolinisoup]

Tested it on Firefox. When the focus is moved to the list, the focus ring is not visible. It becomes visible if I go to the footer with tab and come back to the list.

Just want to resurface my other question in case it got lost. (reference) Let me know if you address it in a different PR too 🙌🏻

[broccolinisoup]

Tested it on Firefox. When the focus is moved to the list, the focus ring is not visible. It becomes visible if I go to the footer with tab and come back to the list.

Just want to resurface my other question in case it got lost. (#3768 (review)) Let me know if you address it in a different PR too 🙌🏻

[siddharthkp]

Tested it on Firefox. When the focus is moved to the list, the focus ring is not visible. It becomes visible if I go to the footer with tab and come back to the list.

Wow! Thanks for flaging this again, I missed this in a hurry. It's strange because the ul list element is getting tabIndex in firefox but not in webkit 🤔

Let me know if you address it in a different PR too 🙌🏻

Yes. I'd like to merge this one first. Keeping it open is making me nervous 😅

I think I will try to reproduce the firefox bug with primer/behaviors first and then decide if the fix is in primer/react or primer/behaviors

[pksjce]

Tested this branch and I can confirm the same two issues already noted.

1. When you hit Spacebar to select an item in the list, it scrolls down. Enter key works properly.
2. On firefox, the focus ring is lost when the focus hits the listitems. Pressing down key results in focus ring coming back and shifting to the next expected item.

Another issue adjacent to the above is
In Chrome and Safari, the list "remembers" the last focused item, but in case of Firefox it starts from the beginning of the list. It may be related to the above focus issue.
Happy for this to be taken up in a separate PR.

All of the rest looks great to me! Love how the focus remaining firmly inside the overlay!