[Accessibility] Keyboard accessibility and operability of collections

[kivuvarosekivuvan]

Summary

Describe the bug

The existing list of collections is not focusable and operable using the keyboard. When the user presses the Tab key, the focus jumps directly to the Edit and Delete buttons, without the ability to focus on and select individual collections.

To Reproduce

1. Navigate to the page that displays the list of collections.
2. Try to navigate through the collections using the Tab key.
3. Observe that the focus jumps directly to the Edit and Delete buttons, without the ability to focus on and select individual collections.

Expected behavior

When the user presses the Tab key, the focus should first move to the individual collections, allowing the user to select or interact with them. After focusing on a collection, the focus should then move to the Edit and Delete buttons.

How to solve

1. Ensure that each individual collection in the list is focusable and operable using the keyboard.
2. Implement keyboard event handling to manage the focus flow, ensuring that the focus moves from the collections to the Edit and Delete buttons (JavaScript code would be helpful here, since I have evaluated the code so far and looks like js would be easier to use).

Screenshots

Screen.Recording.2024-07-29.at.12.04.53.mov

[linear]

PLAT-5086 [Accessibility] Keyboard accessibility and operability of collections