How to make a selectable card component accessible regarding WCAG with React, JS, CSS

Question

Can someone please help me understand how I can make this problem accessible for keyboard users and screen reader users?

What I want to achieve:

1. List of cards which represents different values from a form (a type of label - value, but with more data)
2. When you click one of the cards in the list, you open a dialog and get a new list, which is a list of cards with more information than a dropdown. This last list should have the same propperties as a dropdown or a radio button group, the possibility to select an option.

Why? Because this will give the user even more information than regular dropdown with label-value.

I guess I have to achieve all of these points (but how?), and maybe more points that I have not thought about, and I hope you assist me here.

For the first tyoe of list:

• Use ul and li
• Make it possible to tab and shift + tab and focus on with tabindex="0"
• Handle Enter and Space with onKeyDown to select and open the modal
• Style CSS for hover, focus, active, disable

For the second type of list:

• Use ul and li
• Make it possible to tab and shift + tab and focus on with tabindex="0"
• Maybe use role="listbox" on the outer list and role="option" on the cards?
• Make it possible to navigate with arrows with onKeyDown here as well
• Style CSS for hover, focus, active, disable
• Handle Enter and Space with onKeyDown to select and possible close the modal

How do I set a div to active? Is it something like you do for focus, element.focus()? How should a screen reader read this out loud? If I style the cards with divs and display: flex, then it would be read out very divided. I wonder what more I should think about?

Thank you for all your input!

[]