Fix tabbing through disabled buttons on cluster_list
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
to0
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
to0
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 |
---|---|
Disabled button (user role: developer) - hover
Before | After |
---|---|
Enabled button (user role: maintainer or greater) - tabbing
Before | After |
---|---|
Disabled button (user role: developer) - tabbing
Before | After |
---|---|
How to set up and validate locally
- Visit Project -> Infrastructure -> Kubernetes clusters
- Select Connect cluster
- Create an agent from the modal
- Verify the tooltip on the
remove agent
button - Login as a developer and go to the same project
- Verify the tooltip on the disabled
remove agent
button
To validate using GitPod you'll need to enable KAS:
-
Go to the
gitlab-development-kit
folder -
Change the
gdk.yml
file to add the following lines:gitlab_k8s_agent: enabled: true
-
Install Bazel using Bazelisk
-
Run
gdk reconfigure
andgdk 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.
-
I have evaluated the MR acceptance checklist for this MR.
Review progress:
Related to #351380 (closed)