Type: Focus Indicator (UI Component)
Criticality: Medium
Describe the bug
The button with class flex hover:bg-gray-100 p-4 cursor-pointer md:hover:bg-gray-200 displays a focus indicator only around the avatar of the transaction participant, not around the entire button component. This can confuse users, as it is not clear which element is currently focused, especially when the button includes both an avatar and additional information.
To Reproduce
- Go to 'https://muda.cambiatus.io/profile/user_profile'
- Use the Tab key to navigate to the transaction list.
- Observe that the focus indicator appears only around the avatar, not the whole button area.
Expected behavior
The visible focus indicator should encompass the entire interactive component, making it clear which element is focused.
Screenshots
If applicable, add screenshots to help explain your problem.
Cambiatus Env you are using
https://muda.cambiatus.io/profile/user_profile
Desktop (please complete the following information):
- OS: Windows 10
- Browser: Chrome
- Version: 139.0.7258
Additional context
- Fails WCAG 2.2 Success Criterion 2.4.7 (Focus Visible).
- Detected with CCA 3.5.4.