Kris 19aed18d4f

UX: hide user card focus until keyboard navigation begins (#31014) ...

When the usercard is opened, we manually assign focus to the first link
to capture focus, but this creates an undesirable focus ring for
visitors not relying on focus indicators for navigation.

With this update, the focus is assigned to the container rather than the
first link. This fulfills the goal of capturing focus within the user
card, but hides the focus ring until navigation within the card begins.

`tabindex="-1"` is necessary because this allows us to manually focus
the container (normally unfocusable) while removing it from the tab
order for subsequent navigation.

Before:


![image](https://github.com/user-attachments/assets/1da3a4bb-181b-4cf6-815b-66199757e300)



After:


![image](https://github.com/user-attachments/assets/dda06321-8558-46bf-b16b-dead68e48b92)

then on tab: 


![image](https://github.com/user-attachments/assets/c4cc3d7b-faaf-4bc0-a7c9-d6afef4c6009)

---------

Co-authored-by: Penar Musaraj <pmusaraj@gmail.com>

2025-01-27 12:34:04 -05:00

..

images

…

javascripts

UX: hide user card focus until keyboard navigation begins (#31014)

2025-01-27 12:34:04 -05:00

stylesheets

UX: hide user card focus until keyboard navigation begins (#31014)

2025-01-27 12:34:04 -05:00