Skip to content

Allow setting accessibleLoadingButton config for gitlab-ui

What does this MR do and why?

Part of Make GlButton accessible when loading (&19676)

Currently GlButton behaves similar to disabled button when loading is set. This creates accessibility issues because setting the disabled property on a button makes it inaccessible via screen-reader and removes it from the tab order.

When users interact with loading buttons (like "Test upstream" functionality), focus is lost.

Phase 1 - Implementation

In Add prop to keep GlButton accessible when loading (gitlab-org/gitlab-services/design.gitlab.com!4979 - merged) we added accessibleLoading prop to GlButton component.

The default value of the accessibleLoading prop can be set through the accessibleLoadingButton gitlab-ui config.

Phase 2 - Testing with feature flag

We create a feature flag for GitLab project and based on the value of the feature flag, the accessibleLoading prop will be set for GlButton.

This allows team members to opt-in the behavior during the testing phase

What

Allow setting accessibleLoadingButton config for gitlab-ui

Adds new feature flag accessible_loading_button with user actor.

Set config based on accessible_loading_button feature flag

References

Screenshots or screen recordings

Before After

How to set up and validate locally

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #577222

Edited by Rahul Chanila

Merge request reports

Loading