Skip to content

[Accessibility] [Web] [Profile Page] - Focus indicator does not encompass entire button component #968

@ceciliabelem

Description

@ceciliabelem

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

  1. Go to 'https://muda.cambiatus.io/profile/user_profile'
  2. Use the Tab key to navigate to the transaction list.
  3. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions