@gitlab/ui 134.0.0 → 134.1.0

package/dist/components/base/avatars_inline/avatars_inline.js

@@ -82,6 +82,10 @@ var script = {
         32: 'lg'
       }[this.avatarSize] || 'lg';
     },
+    rootClass() {
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation
+      return ['gl-avatars-inline', `gl-avatars-inline-${this.badgeSize}`];
+    },
     badgeLabel() {
       return `+${this.hiddenAvatars.length}`;
     },
@@ -104,7 +108,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-avatars-inline",class:("gl-avatars-inline-" + _vm.badgeSize)},[_vm._l((_vm.visibleAvatars),function(avatar,index){return _c('div',{key:index,staticClass:"gl-avatars-inline-child"},[_vm._t("avatar",function(){return [_c('gl-avatar',_vm._b({attrs:{"size":_vm.avatarSize}},'gl-avatar',avatar,false))]},{"avatar":avatar})],2)}),_vm._v(" "),(_vm.collapsed && _vm.collapsable)?_c('div',{staticClass:"gl-avatars-inline-child"},[(_vm.badgeTooltipProp)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.$refs.badge; }}},[_vm._v("\n      "+_vm._s(_vm.badgeTooltipTitle)+"\n    ")]):_vm._e(),_vm._v(" "),_c('span',{ref:"badge",class:['gl-avatars-inline-badge', _vm.badgeSize],attrs:{"data-testid":"collapsed-avatars-badge","aria-hidden":"true"}},[_vm._v("\n      "+_vm._s(_vm.badgeLabel)+"\n    ")]),_vm._v(" "),_c('span',{staticClass:"gl-sr-only",attrs:{"data-testid":"badge-sr-only-text"}},[_vm._v(_vm._s(_vm.badgeSrOnlyText))])],1):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.rootClass},[_vm._l((_vm.visibleAvatars),function(avatar,index){return _c('div',{key:index,staticClass:"gl-avatars-inline-child"},[_vm._t("avatar",function(){return [_c('gl-avatar',_vm._b({attrs:{"size":_vm.avatarSize}},'gl-avatar',avatar,false))]},{"avatar":avatar})],2)}),_vm._v(" "),(_vm.collapsed && _vm.collapsable)?_c('div',{staticClass:"gl-avatars-inline-child"},[(_vm.badgeTooltipProp)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.$refs.badge; }}},[_vm._v("\n      "+_vm._s(_vm.badgeTooltipTitle)+"\n    ")]):_vm._e(),_vm._v(" "),_c('span',{ref:"badge",class:['gl-avatars-inline-badge', _vm.badgeSize],attrs:{"data-testid":"collapsed-avatars-badge","aria-hidden":"true"}},[_vm._v("\n      "+_vm._s(_vm.badgeLabel)+"\n    ")]),_vm._v(" "),_c('span',{staticClass:"gl-sr-only",attrs:{"data-testid":"badge-sr-only-text"}},[_vm._v(_vm._s(_vm.badgeSrOnlyText))])],1):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/breadcrumb/breadcrumb.js

@@ -128,6 +128,10 @@ var script = {
       }
       return '';
     },
+    dropdownItemClass() {
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation
+      return ['gl-breadcrumb-item', `gl-breadcrumb-item-${this.size}`];
+    },
     dropdownSize() {
       return this.size === 'sm' ? 'small' : 'medium';
     },
@@ -247,7 +251,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"gl-breadcrumbs",style:(_vm.breadcrumbStyle),attrs:{"aria-label":_vm.ariaLabel}},[_c('ol',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list breadcrumb"},'ol',_vm.$attrs,false),_vm.$listeners),[(_vm.hasCollapsible || !_vm.resizeDone)?_c('li',{ref:"dropdown",class:("gl-breadcrumb-item gl-breadcrumb-item-" + _vm.size)},[_c('gl-disclosure-dropdown',{attrs:{"items":_vm.overflowingItems,"toggle-text":_vm.showMoreLabel,"fluid-width":"","text-sr-only":"","no-caret":"","icon":"ellipsis_h","size":_vm.dropdownSize}})],1):_vm._e(),_vm._v(" "),_vm._l((_vm.fittingItems),function(item,index){return _c('gl-breadcrumb-item',{key:index,ref:"breadcrumbs",refInFor:true,class:_vm.itemClass,attrs:{"text":item.text,"href":item.href,"to":item.to,"size":_vm.size,"aria-current":_vm.getAriaCurrentAttr(index)},scopedSlots:_vm._u([{key:"default",fn:function(){return [(item.avatarPath)?_c('gl-avatar',{staticClass:"gl-breadcrumb-avatar-tile gl-border gl-mr-2",attrs:{"src":item.avatarPath,"size":_vm.avatarSize,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',{staticClass:"gl-align-middle"},[_vm._v(_vm._s(item.text))])]},proxy:true}],null,true)})}),_vm._v(" "),(_vm.showClipboardButton)?_c('li',{staticClass:"gl-breadcrumb-clipboard-button"},[_c('clipboard-button',_vm._b({ref:"clipboardButton",staticClass:"gl-ml-2",attrs:{"data-testid":"copy-to-clipboard-button","text":_vm.clipboardButtonText,"size":_vm.dropdownSize}},'clipboard-button',_vm.clipboardTooltipText ? { title: _vm.clipboardTooltipText } : {},false))],1):_vm._e()],2)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"gl-breadcrumbs",style:(_vm.breadcrumbStyle),attrs:{"aria-label":_vm.ariaLabel}},[_c('ol',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list breadcrumb"},'ol',_vm.$attrs,false),_vm.$listeners),[(_vm.hasCollapsible || !_vm.resizeDone)?_c('li',{ref:"dropdown",class:_vm.dropdownItemClass},[_c('gl-disclosure-dropdown',{attrs:{"items":_vm.overflowingItems,"toggle-text":_vm.showMoreLabel,"fluid-width":"","text-sr-only":"","no-caret":"","icon":"ellipsis_h","size":_vm.dropdownSize}})],1):_vm._e(),_vm._v(" "),_vm._l((_vm.fittingItems),function(item,index){return _c('gl-breadcrumb-item',{key:index,ref:"breadcrumbs",refInFor:true,class:_vm.itemClass,attrs:{"text":item.text,"href":item.href,"to":item.to,"size":_vm.size,"aria-current":_vm.getAriaCurrentAttr(index)},scopedSlots:_vm._u([{key:"default",fn:function(){return [(item.avatarPath)?_c('gl-avatar',{staticClass:"gl-breadcrumb-avatar-tile gl-border gl-mr-2",attrs:{"src":item.avatarPath,"size":_vm.avatarSize,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',{staticClass:"gl-align-middle"},[_vm._v(_vm._s(item.text))])]},proxy:true}],null,true)})}),_vm._v(" "),(_vm.showClipboardButton)?_c('li',{staticClass:"gl-breadcrumb-clipboard-button"},[_c('clipboard-button',_vm._b({ref:"clipboardButton",staticClass:"gl-ml-2",attrs:{"data-testid":"copy-to-clipboard-button","text":_vm.clipboardButtonText,"size":_vm.dropdownSize}},'clipboard-button',_vm.clipboardTooltipText ? { title: _vm.clipboardTooltipText } : {},false))],1):_vm._e()],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/breadcrumb/breadcrumb_item.js

@@ -54,6 +54,12 @@ var script = {
       validator: value => Object.keys(breadCrumbSizeOptions).includes(value)
     }
   },
+  computed: {
+    itemClass() {
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation
+      return ['gl-breadcrumb-item', `gl-breadcrumb-item-${this.size}`];
+    }
+  },
   linkVariantUnstyled
 };
 
@@ -61,7 +67,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{class:("gl-breadcrumb-item gl-breadcrumb-item-" + _vm.size)},[_c('gl-link',{attrs:{"href":_vm.href,"to":_vm.to,"aria-current":_vm.ariaCurrent,"variant":_vm.$options.linkVariantUnstyled}},[_vm._t("default",function(){return [_vm._v(_vm._s(_vm.text))]})],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{class:_vm.itemClass},[_c('gl-link',{attrs:{"href":_vm.href,"to":_vm.to,"aria-current":_vm.ariaCurrent,"variant":_vm.$options.linkVariantUnstyled}},[_vm._t("default",function(){return [_vm._v(_vm._s(_vm.text))]})],2)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/button/button.js

@@ -3,7 +3,7 @@ import { buttonCategoryOptions, buttonVariantOptions, buttonSizeOptions, linkVar
 import { logWarning, stopEvent } from '../../../utils/utils';
 import { isSlotEmpty } from '../../../utils/is_slot_empty';
 import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
-import { isEvent } from '../../../vendor/bootstrap-vue/src/utils/inspect';
+import { glButtonConfig } from '../../../config';
 import GlIcon from '../icon/icon';
 import GlLoadingIcon from '../loading_icon/loading_icon';
 import { SPACE, ENTER } from '../new_dropdowns/constants';
@@ -117,6 +117,14 @@ var script = {
       required: false,
       default: false
     },
+    /**
+     * Keep the button accessible while `disabled` is `true`. Uses `aria-disabled` so the element remains focusable and is announced by assistive technology.
+     */
+    accessibleDisabled: {
+      type: Boolean,
+      required: false,
+      default: () => glButtonConfig.accessibleDisabledButton
+    },
     /**
      * Denotes the target URL of the link for standard links.
      */
@@ -232,9 +240,20 @@ var script = {
     hasIconOnly() {
       return isSlotEmpty(this, 'default') && this.hasIcon && this.count == null;
     },
-    isButtonAriaDisabled() {
+    isDisabledOrLoading() {
+      if (this.accessibleDisabled) {
+        return this.disabled || this.isButton && this.loading;
+      }
       return this.isButton && this.loading;
     },
+    ariaDisabled() {
+      if (this.isDisabledOrLoading) return 'true';
+      // Non-standard tags need an explicit aria-disabled value to convey interactive state.
+      if (this.isNonStandardTag) {
+        return this.accessibleDisabled ? 'false' : String(this.disabled);
+      }
+      return null;
+    },
     buttonClasses() {
       const classes = ['btn', 'gl-button', `btn-${this.variant}`, `btn-${this.buttonSize}`];
       if (this.category !== buttonCategoryOptions.primary) {
@@ -245,7 +264,7 @@ var script = {
         'button-ellipsis-horizontal': this.hasIconOnly && this.icon === 'ellipsis_h',
         selected: this.selected,
         'btn-block': this.displayBlock,
-        disabled: this.disabled || this.isButtonAriaDisabled
+        disabled: this.disabled || this.isDisabledOrLoading
       });
       if (this.label) {
         classes.push('btn', 'btn-label');
@@ -274,12 +293,12 @@ var script = {
       return !this.isLink && !this.isButton;
     },
     tabindex() {
-      // When disabled remove links and non-standard tags from tab order
-      if (this.disabled) {
+      // Legacy: remove disabled links and non-standard tags from tab order.
+      if (!this.accessibleDisabled && this.disabled) {
         return this.isLink || this.isNonStandardTag ? '-1' : this.$attrs.tabindex;
       }
-
-      // Add hash links and non-standard tags to tab order
+      // Inactive elements stay in tab order so assistive technology can discover them;
+      // aria-disabled communicates the inactive state instead of removing the element.
       return this.isNonStandardTag || this.isHashLink ? '0' : this.$attrs.tabindex;
     },
     computedPropsAndAttributes() {
@@ -287,18 +306,15 @@ var script = {
       const base = {
         // Type only used for "real" buttons
         type: this.isButton ? this.type : null,
-        // Disabled only set on "real" buttons
-        disabled: this.isButton ? this.disabled : null,
+        // Legacy: native disabled attribute on real buttons.
+        ...(!this.accessibleDisabled && this.isButton ? {
+          disabled: this.disabled
+        } : {}),
         // We add a role of button when the tag is not a link or button or when link has `href` of `#`
         role: this.isNonStandardTag || this.isHashLink ? 'button' : (_this$$attrs = this.$attrs) === null || _this$$attrs === void 0 ? void 0 : _this$$attrs.role,
-        // We set the `aria-disabled` state for non-standard tags
-        ...(this.isNonStandardTag ? {
-          'aria-disabled': String(this.disabled)
-        } : {}),
         tabindex: this.tabindex,
-        // We set the `aria-disabled` state for buttons while loading
-        ...(this.isButtonAriaDisabled ? {
-          'aria-disabled': 'true'
+        ...(this.ariaDisabled !== null ? {
+          'aria-disabled': this.ariaDisabled
         } : {})
       };
       if (this.isLink) {
@@ -328,7 +344,7 @@ var script = {
       const listeners = {
         ...this.$listeners
       };
-      if (this.isButtonAriaDisabled) {
+      if (this.isDisabledOrLoading) {
         delete listeners.click;
       }
       return listeners;
@@ -359,7 +375,7 @@ var script = {
       // Skip if disabled
       // Add SPACE keydown handler for link has `href` of `#`
       // Add ENTER handler for non-standard tags
-      if (!this.disabled && (this.isNonStandardTag || this.isHashLink)) {
+      if (!this.disabled && !this.isDisabledOrLoading && (this.isNonStandardTag || this.isHashLink)) {
         const code = event.code;
         if (code === SPACE || code === ENTER && this.isNonStandardTag) {
           const target = event.currentTarget || event.target;
@@ -371,7 +387,8 @@ var script = {
       }
     },
     maybeStopEvent(event) {
-      if (this.isButtonAriaDisabled && isEvent(event)) {
+      const eventIsEvent = event instanceof Event;
+      if (this.isDisabledOrLoading && eventIsEvent) {
         stopEvent(event);
       }
     }

package/dist/config.js

@@ -4,6 +4,7 @@ const i18n = translationKeys;
 const defaultConfig = {
   firstDayOfWeek: 0 // Defaults to 0 (Sunday)
 };
+const glButtonConfig = {};
 let configured = false;
 
 /**
@@ -13,13 +14,15 @@ let configured = false;
  * @template TValue=string
  * @property {undefined | Object} translations Generic translations for component labels to fall back to.
  * @property {undefined | Number} firstDayOfWeek Configured first day of the week, from 0 (Sunday) to 6 (Saturday).
- * @property {boolean} [accessibleLoadingButton] Temporary flag to enable accessible loading button.
+ * @property {boolean} [accessibleDisabledButton] Temporary flag to enable the accessible disabled button.
  *
  */
 const setConfigs = function () {
   let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     translations = _ref.translations,
-    firstDayOfWeek = _ref.firstDayOfWeek;
+    firstDayOfWeek = _ref.firstDayOfWeek,
+    _ref$accessibleDisabl = _ref.accessibleDisabledButton,
+    accessibleDisabledButton = _ref$accessibleDisabl === void 0 ? false : _ref$accessibleDisabl;
   if (configured) {
     if (process.env.NODE_ENV === 'development') {
       throw new Error('GitLab UI can only be configured once!');
@@ -47,6 +50,23 @@ const setConfigs = function () {
     }
     Object.assign(i18n, translations);
   }
+
+  // Temporary flag to enable the accessible disabled button feature.
+  // This flag allows the feature to be opt-in during the rollout phase,
+  // giving us the flexibility to test and validate its impact on user experience.
+
+  // The global variable `accessibleDisabledButton` is set to a boolean value
+  // to indicate whether the button should use aria-disabled while disabled.
+
+  // Future Plan:
+  // Once the accessible disabled button feature is validated and stable,
+  // we will remove this temporary flag and make the feature the default behavior.
+  // At that point, there will be no need for opt-in or opt-out mechanisms for this feature.
+  if (typeof accessibleDisabledButton === 'boolean') {
+    Object.assign(glButtonConfig, {
+      accessibleDisabledButton
+    });
+  }
 };
 
-export { setConfigs as default, defaultConfig, i18n };
+export { setConfigs as default, defaultConfig, glButtonConfig, i18n };

package/dist/utils/string_utils.js

@@ -29,7 +29,6 @@ const splitAfterSymbols = (symbols, string) => {
     for (let j = 0; j < symbols.length; j += 1) {
       const symbol = symbols[j];
       if (!symbol) {
-        // eslint-disable-next-line no-continue
         continue;
       }
       symbolFound = string.slice(i, i + symbol.length) === symbol;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "134.0.0",
+  "version": "134.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -91,8 +91,8 @@
   "resolutions": {
     "chokidar": "^4.0.3",
     "sane": "^5.0.1",
-    "jackspeak": "2.1.1",
-    "postcss": "8.5.13",
+    "jackspeak": "2.3.6",
+    "postcss": "8.5.14",
     "json5": "2.2.3",
     "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "3.3.1"
   },
@@ -101,14 +101,14 @@
     "@babel/core": "^7.29.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.29.3",
+    "@babel/preset-env": "^7.29.5",
     "@babel/preset-react": "^7.28.5",
     "@cypress/grep": "^4.1.1",
-    "@figma/code-connect": "^1.4.4",
+    "@figma/code-connect": "^1.4.5",
     "@gitlab/fonts": "^1.3.1",
-    "@gitlab/hybrid-vue": "npm:@vue/compat@3.5.30",
+    "@gitlab/hybrid-vue": "npm:@vue/compat@3.5.34",
     "@gitlab/svgs": "*",
-    "@jest/test-sequencer": "30.3.0",
+    "@jest/test-sequencer": "30.4.1",
     "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
@@ -139,7 +139,7 @@
     "autoprefixer": "10.5.0",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
-    "cypress": "15.14.2",
+    "cypress": "15.15.0",
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",
@@ -154,9 +154,9 @@
     "mockdate": "^3.0.5",
     "module-alias": "^2.3.4",
     "pikaday": "^1.8.0",
-    "playwright": "^1.59.1",
-    "playwright-core": "^1.59.1",
-    "postcss": "8.5.13",
+    "playwright": "^1.60.0",
+    "playwright-core": "^1.60.0",
+    "postcss": "8.5.14",
     "postcss-loader": "8.2.1",
     "postcss-scss": "4.0.9",
     "react": "18.3.1",

package/src/components/base/avatars_inline/avatars_inline.vue

@@ -84,6 +84,10 @@ export default {
         }[this.avatarSize] || 'lg'
       );
     },
+    rootClass() {
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation
+      return ['gl-avatars-inline', `gl-avatars-inline-${this.badgeSize}`];
+    },
     badgeLabel() {
       return `+${this.hiddenAvatars.length}`;
     },
@@ -106,7 +110,7 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-avatars-inline" :class="`gl-avatars-inline-${badgeSize}`">
+  <div :class="rootClass">
     <div v-for="(avatar, index) in visibleAvatars" :key="index" class="gl-avatars-inline-child">
       <!-- @slot Custom avatar rendering. Provide avatar object as slot prop. -->
       <slot name="avatar" :avatar="avatar">

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -119,6 +119,10 @@ export default {
       }
       return '';
     },
+    dropdownItemClass() {
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation
+      return ['gl-breadcrumb-item', `gl-breadcrumb-item-${this.size}`];
+    },
     dropdownSize() {
       return this.size === 'sm' ? 'small' : 'medium';
     },
@@ -257,11 +261,7 @@ export default {
 <template>
   <nav class="gl-breadcrumbs" :aria-label="ariaLabel" :style="breadcrumbStyle">
     <ol class="gl-breadcrumb-list breadcrumb" v-bind="$attrs" v-on="$listeners">
-      <li
-        v-if="hasCollapsible || !resizeDone"
-        ref="dropdown"
-        :class="`gl-breadcrumb-item gl-breadcrumb-item-${size}`"
-      >
+      <li v-if="hasCollapsible || !resizeDone" ref="dropdown" :class="dropdownItemClass">
         <gl-disclosure-dropdown
           :items="overflowingItems"
           :toggle-text="showMoreLabel"

package/src/components/base/breadcrumb/breadcrumb_item.vue

@@ -54,12 +54,18 @@ export default {
       validator: (value) => Object.keys(breadCrumbSizeOptions).includes(value),
     },
   },
+  computed: {
+    itemClass() {
+      // eslint-disable-next-line @gitlab/tailwind-no-interpolation
+      return ['gl-breadcrumb-item', `gl-breadcrumb-item-${this.size}`];
+    },
+  },
   linkVariantUnstyled,
 };
 </script>
 
 <template>
-  <li :class="`gl-breadcrumb-item gl-breadcrumb-item-${size}`">
+  <li :class="itemClass">
     <gl-link
       :href="href"
       :to="to"

package/src/components/base/button/button.vue

@@ -9,7 +9,7 @@ import {
 import { logWarning, stopEvent } from '../../../utils/utils';
 import { isSlotEmpty } from '../../../utils/is_slot_empty';
 import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
-import { isEvent } from '../../../vendor/bootstrap-vue/src/utils/inspect';
+import { glButtonConfig } from '../../../config';
 import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 import { ENTER, SPACE } from '../new_dropdowns/constants';
@@ -122,6 +122,14 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Keep the button accessible while `disabled` is `true`. Uses `aria-disabled` so the element remains focusable and is announced by assistive technology.
+     */
+    accessibleDisabled: {
+      type: Boolean,
+      required: false,
+      default: () => glButtonConfig.accessibleDisabledButton,
+    },
     /**
      * Denotes the target URL of the link for standard links.
      */
@@ -237,9 +245,20 @@ export default {
     hasIconOnly() {
       return isSlotEmpty(this, 'default') && this.hasIcon && this.count == null;
     },
-    isButtonAriaDisabled() {
+    isDisabledOrLoading() {
+      if (this.accessibleDisabled) {
+        return this.disabled || (this.isButton && this.loading);
+      }
       return this.isButton && this.loading;
     },
+    ariaDisabled() {
+      if (this.isDisabledOrLoading) return 'true';
+      // Non-standard tags need an explicit aria-disabled value to convey interactive state.
+      if (this.isNonStandardTag) {
+        return this.accessibleDisabled ? 'false' : String(this.disabled);
+      }
+      return null;
+    },
     buttonClasses() {
       const classes = ['btn', 'gl-button', `btn-${this.variant}`, `btn-${this.buttonSize}`];
 
@@ -252,7 +271,7 @@ export default {
         'button-ellipsis-horizontal': this.hasIconOnly && this.icon === 'ellipsis_h',
         selected: this.selected,
         'btn-block': this.displayBlock,
-        disabled: this.disabled || this.isButtonAriaDisabled,
+        disabled: this.disabled || this.isDisabledOrLoading,
       });
 
       if (this.label) {
@@ -284,27 +303,24 @@ export default {
       return !this.isLink && !this.isButton;
     },
     tabindex() {
-      // When disabled remove links and non-standard tags from tab order
-      if (this.disabled) {
+      // Legacy: remove disabled links and non-standard tags from tab order.
+      if (!this.accessibleDisabled && this.disabled) {
         return this.isLink || this.isNonStandardTag ? '-1' : this.$attrs.tabindex;
       }
-
-      // Add hash links and non-standard tags to tab order
+      // Inactive elements stay in tab order so assistive technology can discover them;
+      // aria-disabled communicates the inactive state instead of removing the element.
       return this.isNonStandardTag || this.isHashLink ? '0' : this.$attrs.tabindex;
     },
     computedPropsAndAttributes() {
       const base = {
         // Type only used for "real" buttons
         type: this.isButton ? this.type : null,
-        // Disabled only set on "real" buttons
-        disabled: this.isButton ? this.disabled : null,
+        // Legacy: native disabled attribute on real buttons.
+        ...(!this.accessibleDisabled && this.isButton ? { disabled: this.disabled } : {}),
         // We add a role of button when the tag is not a link or button or when link has `href` of `#`
         role: this.isNonStandardTag || this.isHashLink ? 'button' : this.$attrs?.role,
-        // We set the `aria-disabled` state for non-standard tags
-        ...(this.isNonStandardTag ? { 'aria-disabled': String(this.disabled) } : {}),
         tabindex: this.tabindex,
-        // We set the `aria-disabled` state for buttons while loading
-        ...(this.isButtonAriaDisabled ? { 'aria-disabled': 'true' } : {}),
+        ...(this.ariaDisabled !== null ? { 'aria-disabled': this.ariaDisabled } : {}),
       };
 
       if (this.isLink) {
@@ -333,7 +349,7 @@ export default {
         ...this.$listeners,
       };
 
-      if (this.isButtonAriaDisabled) {
+      if (this.isDisabledOrLoading) {
         delete listeners.click;
       }
       return listeners;
@@ -366,7 +382,11 @@ export default {
       // Skip if disabled
       // Add SPACE keydown handler for link has `href` of `#`
       // Add ENTER handler for non-standard tags
-      if (!this.disabled && (this.isNonStandardTag || this.isHashLink)) {
+      if (
+        !this.disabled &&
+        !this.isDisabledOrLoading &&
+        (this.isNonStandardTag || this.isHashLink)
+      ) {
         const { code } = event;
 
         if (code === SPACE || (code === ENTER && this.isNonStandardTag)) {
@@ -377,7 +397,8 @@ export default {
       }
     },
     maybeStopEvent(event) {
-      if (this.isButtonAriaDisabled && isEvent(event)) {
+      const eventIsEvent = event instanceof Event;
+      if (this.isDisabledOrLoading && eventIsEvent) {
         stopEvent(event);
       }
     },

package/src/components/utilities/sprintf/sprintf.vue

@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable no-continue */
 import { has, isString } from 'lodash-es';
 
 const PREFIX = '%{';

package/src/config.js

@@ -6,6 +6,8 @@ export const defaultConfig = {
   firstDayOfWeek: 0, // Defaults to 0 (Sunday)
 };
 
+export const glButtonConfig = {};
+
 let configured = false;
 
 /**
@@ -15,10 +17,10 @@ let configured = false;
  * @template TValue=string
  * @property {undefined | Object} translations Generic translations for component labels to fall back to.
  * @property {undefined | Number} firstDayOfWeek Configured first day of the week, from 0 (Sunday) to 6 (Saturday).
- * @property {boolean} [accessibleLoadingButton] Temporary flag to enable accessible loading button.
+ * @property {boolean} [accessibleDisabledButton] Temporary flag to enable the accessible disabled button.
  *
  */
-const setConfigs = ({ translations, firstDayOfWeek } = {}) => {
+const setConfigs = ({ translations, firstDayOfWeek, accessibleDisabledButton = false } = {}) => {
   if (configured) {
     if (process.env.NODE_ENV === 'development') {
       throw new Error('GitLab UI can only be configured once!');
@@ -52,6 +54,23 @@ const setConfigs = ({ translations, firstDayOfWeek } = {}) => {
 
     Object.assign(i18n, translations);
   }
+
+  // Temporary flag to enable the accessible disabled button feature.
+  // This flag allows the feature to be opt-in during the rollout phase,
+  // giving us the flexibility to test and validate its impact on user experience.
+
+  // The global variable `accessibleDisabledButton` is set to a boolean value
+  // to indicate whether the button should use aria-disabled while disabled.
+
+  // Future Plan:
+  // Once the accessible disabled button feature is validated and stable,
+  // we will remove this temporary flag and make the feature the default behavior.
+  // At that point, there will be no need for opt-in or opt-out mechanisms for this feature.
+  if (typeof accessibleDisabledButton === 'boolean') {
+    Object.assign(glButtonConfig, {
+      accessibleDisabledButton,
+    });
+  }
 };
 
 export default setConfigs;

package/src/utils/string_utils.js

@@ -33,7 +33,6 @@ export const splitAfterSymbols = (symbols, string) => {
       const symbol = symbols[j];
 
       if (!symbol) {
-        // eslint-disable-next-line no-continue
         continue;
       }