Skip to content

Fix tabbing through disabled buttons on cluster_list

Anna Vovchenko requested to merge 351380-fix-tabbing-through-disabled-buttons-on-cluster_list into master

What does this MR do and why?

This MR fixes the tabbing issue on the agents' list page. The issue occurs on the remove agent button. The button should have a tooltip showing either the button's explanatory text or the disabled text (showing only maintainers can remove an agent). As we cannot add a tooltip for the disabled button, it was added to the container element, which is suggested by the Bootstrap Vue docs. With the current implementation, the tooltip is shown on hover as expected, but not on tabbing. To fix this issue, the current MR proposes the following changes:

  • Set tabindex to 0 for the button
  • Set tabindex to -1 for the container element when the button is enabled (this way the button is accessible from the keyboard)
  • Set tabindex to 0 for the container element when the button is disabled
  • Style the container's focus-within state according to the Pajamas guidelines.

Screenshots or screen recordings

Enabled button (user role: maintainer or greater) - hover

Before After
active-hover active-hover

Disabled button (user role: developer) - hover

Before After
disabled-hover disabled-hover-1

Enabled button (user role: maintainer or greater) - tabbing

Before After
active-tabbing active-tabbing-1

Disabled button (user role: developer) - tabbing

Before After
disabled-tabbing disabled-tabbing-1

How to set up and validate locally

  1. Visit Project -> Infrastructure -> Kubernetes clusters
  2. Select Connect cluster
  3. Create an agent from the modal
  4. Verify the tooltip on the remove agent button
  5. Login as a developer and go to the same project
  6. Verify the tooltip on the disabled remove agent button

To validate using GitPod you'll need to enable KAS:

  1. Go to the gitlab-development-kit folder

  2. Change the gdk.yml file to add the following lines:

    gitlab_k8s_agent:
  enabled: true

  3. Install Bazel using Bazelisk

  4. Run gdk reconfigure and gdk restart

To validate using Review app, I prepared a couple of agents in this project.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Review progress:

Related to #351380 (closed)

Edited by Anna Vovchenko

Merge request reports