Keep GlButton accessible when loading

Problem

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 and they have to navigate through the entire DOM again to return to their previous position.

Proposed Solution

Add new accessibleLoading prop to GlButton that provides accessible loading behavior. When both loading and accessibleLoading props are set to true:

1. Accessibility: Button remains focusable and accessible to screen readers
2. ARIA attributes: Sets aria-disabled="true" instead of disabled attribute
3. Event handling: Prevents Vue click events and stops native click event bubbling
4. Visual styling: Maintains the same disabled appearance through CSS classes
5. Configuration: Can be enabled globally via setConfigs({ accessibleLoadingButton: true })

Alternative Solutions

When loading prop is set on GlButton:

1. Do not set disabled attribute
2. Set aria-disabled="true" instead
3. Do not emit standard events
4. Keep the button focusable and in tab order

This approach follows accessibility best practices by:

• Maintaining keyboard navigation flow
• Keeping buttons accessible to screen readers
• Providing proper semantic information about the button state

Implementation Details

The implementation includes:

• New accessibleLoading prop that works in conjunction with loading
• Proper ARIA attributes (aria-disabled="true") for screen reader support
• Event prevention through JavaScript rather than DOM attributes
• Maintains visual "disabled" styling through CSS classes
• Global configuration option for easier adoption
• Comprehensive test coverage for all scenarios

References

• Implemented in: !4979 (merged) ✅ (merged)
• Integration MR: gitlab-org/gitlab!202268 (closed)
• Accessibility guidance: Don't Disable Form Controls

Acceptance Criteria

• Loading buttons remain focusable via keyboard navigation
• Screen readers can access loading buttons
• aria-disabled="true" is set when loading with accessibleLoading
• Click and keyboard events are prevented during loading state
• Visual styling matches current disabled appearance
• Existing functionality is preserved for non-loading states
• Global configuration option available
• Comprehensive test coverage added