@gitlab/ui 123.4.0 → 123.5.0

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

@@ -7,6 +7,7 @@ import { isEvent } from '../../../vendor/bootstrap-vue/src/utils/inspect';
 import GlIcon from '../icon/icon';
 import GlLoadingIcon from '../loading_icon/loading_icon';
 import { SPACE, ENTER } from '../new_dropdowns/constants';
+import { glButtonConfig } from '../../../config';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
@@ -78,6 +79,14 @@ var script = {
       required: false,
       default: false
     },
+    /**
+     * Keep the button accessible when `loading` is `true`.
+     */
+    accessibleLoading: {
+      type: Boolean,
+      required: false,
+      default: () => glButtonConfig.accessibleLoadingButton
+    },
     /**
      * CSS classes to add to the button text.
      */
@@ -237,6 +246,9 @@ var script = {
     isButtonDisabled() {
       return this.disabled || this.loading;
     },
+    isButtonAriaDisabled() {
+      return this.accessibleLoading && this.isButton && this.loading;
+    },
     buttonClasses() {
       const classes = ['btn', 'gl-button', `btn-${this.variant}`, `btn-${this.buttonSize}`];
       if (this.category !== buttonCategoryOptions.primary) {
@@ -247,7 +259,7 @@ var script = {
         'button-ellipsis-horizontal': this.hasIconOnly && this.icon === 'ellipsis_h',
         selected: this.selected,
         'btn-block': this.displayBlock,
-        disabled: this.disabled
+        disabled: this.disabled || this.isButtonAriaDisabled
       });
       if (this.label) {
         classes.push('btn', 'btn-label');
@@ -297,7 +309,12 @@ var script = {
         ...(this.isNonStandardTag ? {
           'aria-disabled': String(this.disabled)
         } : {}),
-        tabindex: this.tabindex
+        tabindex: this.tabindex,
+        // We set the `aria-disabled` state for buttons while loading
+        ...(this.isButtonAriaDisabled ? {
+          'aria-disabled': 'true',
+          disabled: null
+        } : {})
       };
       if (this.isLink) {
         return {
@@ -323,11 +340,13 @@ var script = {
       };
     },
     computedListeners() {
-      return {
-        click: this.onClick,
-        keydown: this.onKeydown,
+      const listeners = {
         ...this.$listeners
       };
+      if (this.isButtonAriaDisabled) {
+        delete listeners.click;
+      }
+      return listeners;
     },
     componentIs() {
       if (this.label) {
@@ -366,8 +385,8 @@ var script = {
         }
       }
     },
-    onClick(event) {
-      if (this.disabled && isEvent(event)) {
+    maybeStopEvent(event) {
+      if (this.isButtonAriaDisabled && isEvent(event)) {
         stopEvent(event);
       }
     }
@@ -378,7 +397,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(_vm.componentIs,_vm._g(_vm._b({directives:[{name:"safe-link",rawName:"v-safe-link:[safeLinkConfig]",arg:_vm.safeLinkConfig}],tag:"component",class:_vm.buttonClasses},'component',_vm.computedPropsAndAttributes,false),_vm.computedListeners),[(_vm.loading)?_c('gl-loading-icon',{staticClass:"gl-button-icon gl-button-loading-indicator",attrs:{"inline":""}}):_vm._e(),_vm._v(" "),(_vm.hasIcon && !(_vm.hasIconOnly && _vm.loading))?_c('gl-icon',{staticClass:"gl-button-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_vm._t("emoji"),_vm._v(" "),(!_vm.hasIconOnly)?_c('span',{staticClass:"gl-button-text",class:_vm.buttonTextClasses},[_vm._t("default"),_vm._v(" "),(_vm.hasCount)?_c('span',{staticClass:"gl-button-count"},[_vm._v("\n      "+_vm._s(_vm.count)+"\n      "),(_vm.countSrText)?_c('span',{staticClass:"gl-sr-only"},[_vm._v(_vm._s(_vm.countSrText))]):_vm._e()]):_vm._e()],2):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.componentIs,_vm._g(_vm._b({directives:[{name:"safe-link",rawName:"v-safe-link:[safeLinkConfig]",arg:_vm.safeLinkConfig}],tag:"component",class:_vm.buttonClasses,on:{"click":_vm.maybeStopEvent,"keydown":_vm.onKeydown}},'component',_vm.computedPropsAndAttributes,false),_vm.computedListeners),[(_vm.loading)?_c('gl-loading-icon',{staticClass:"gl-button-icon gl-button-loading-indicator",attrs:{"inline":""}}):_vm._e(),_vm._v(" "),(_vm.hasIcon && !(_vm.hasIconOnly && _vm.loading))?_c('gl-icon',{staticClass:"gl-button-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_vm._t("emoji"),_vm._v(" "),(!_vm.hasIconOnly)?_c('span',{staticClass:"gl-button-text",class:_vm.buttonTextClasses},[_vm._t("default"),_vm._v(" "),(_vm.hasCount)?_c('span',{staticClass:"gl-button-count"},[_vm._v("\n      "+_vm._s(_vm.count)+"\n      "),(_vm.countSrText)?_c('span',{staticClass:"gl-sr-only"},[_vm._v(_vm._s(_vm.countSrText))]):_vm._e()]):_vm._e()],2):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/config.js

@@ -35,6 +35,7 @@ const i18n = translationKeys;
 const defaultConfig = {
   firstDayOfWeek: 0 // Defaults to 0 (Sunday)
 };
+const glButtonConfig = {};
 let configured = false;
 
 /**
@@ -44,11 +45,14 @@ 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.
+ *
  */
 const setConfigs = function () {
   let {
     translations,
-    firstDayOfWeek
+    firstDayOfWeek,
+    accessibleLoadingButton = false
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   if (configured) {
     if (process.env.NODE_ENV === 'development') {
@@ -83,6 +87,23 @@ const setConfigs = function () {
     }
     Object.assign(i18n, translations);
   }
+
+  // Temporary flag to enable the accessible loading 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 `accessibleLoadingButton` is set to a boolean value
+  // to indicate whether the button should be disabled while loading.
+
+  // Future Plan:
+  // Once the accessible loading 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 accessibleLoadingButton === 'boolean') {
+    Object.assign(glButtonConfig, {
+      accessibleLoadingButton
+    });
+  }
 };
 
-export { setConfigs as default, defaultConfig, i18n };
+export { setConfigs as default, defaultConfig, glButtonConfig, i18n };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "123.4.0",
+  "version": "123.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -102,7 +102,7 @@
     "@cypress/grep": "^4.1.1",
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/svgs": "3.147.0",
-    "@jest/test-sequencer": "30.1.3",
+    "@jest/test-sequencer": "30.2.0",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",

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

@@ -14,6 +14,7 @@ import { isEvent } from '../../../vendor/bootstrap-vue/src/utils/inspect';
 import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 import { ENTER, SPACE } from '../new_dropdowns/constants';
+import { glButtonConfig } from '../../../config';
 
 export default {
   name: 'GlButton',
@@ -82,6 +83,14 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Keep the button accessible when `loading` is `true`.
+     */
+    accessibleLoading: {
+      type: Boolean,
+      required: false,
+      default: () => glButtonConfig.accessibleLoadingButton,
+    },
     /**
      * CSS classes to add to the button text.
      */
@@ -241,6 +250,9 @@ export default {
     isButtonDisabled() {
       return this.disabled || this.loading;
     },
+    isButtonAriaDisabled() {
+      return this.accessibleLoading && this.isButton && this.loading;
+    },
     buttonClasses() {
       const classes = ['btn', 'gl-button', `btn-${this.variant}`, `btn-${this.buttonSize}`];
 
@@ -253,7 +265,7 @@ export default {
         'button-ellipsis-horizontal': this.hasIconOnly && this.icon === 'ellipsis_h',
         selected: this.selected,
         'btn-block': this.displayBlock,
-        disabled: this.disabled,
+        disabled: this.disabled || this.isButtonAriaDisabled,
       });
 
       if (this.label) {
@@ -304,6 +316,8 @@ export default {
         // 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', disabled: null } : {}),
       };
 
       if (this.isLink) {
@@ -328,11 +342,14 @@ export default {
       return { ...this.$attrs, ...base };
     },
     computedListeners() {
-      return {
-        click: this.onClick,
-        keydown: this.onKeydown,
+      const listeners = {
         ...this.$listeners,
       };
+
+      if (this.isButtonAriaDisabled) {
+        delete listeners.click;
+      }
+      return listeners;
     },
     componentIs() {
       if (this.label) {
@@ -373,8 +390,8 @@ export default {
         }
       }
     },
-    onClick(event) {
-      if (this.disabled && isEvent(event)) {
+    maybeStopEvent(event) {
+      if (this.isButtonAriaDisabled && isEvent(event)) {
         stopEvent(event);
       }
     },
@@ -387,6 +404,8 @@ export default {
     v-bind="computedPropsAndAttributes"
     v-safe-link:[safeLinkConfig]
     :class="buttonClasses"
+    @click="maybeStopEvent"
+    @keydown="onKeydown"
     v-on="computedListeners"
   >
     <gl-loading-icon v-if="loading" inline class="gl-button-icon gl-button-loading-indicator" />

package/src/config.js

@@ -39,6 +39,8 @@ export const defaultConfig = {
   firstDayOfWeek: 0, // Defaults to 0 (Sunday)
 };
 
+export const glButtonConfig = {};
+
 let configured = false;
 
 /**
@@ -48,8 +50,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.
+ *
  */
-const setConfigs = ({ translations, firstDayOfWeek } = {}) => {
+const setConfigs = ({ translations, firstDayOfWeek, accessibleLoadingButton = false } = {}) => {
   if (configured) {
     if (process.env.NODE_ENV === 'development') {
       throw new Error('GitLab UI can only be configured once!');
@@ -90,6 +94,23 @@ const setConfigs = ({ translations, firstDayOfWeek } = {}) => {
 
     Object.assign(i18n, translations);
   }
+
+  // Temporary flag to enable the accessible loading 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 `accessibleLoadingButton` is set to a boolean value
+  // to indicate whether the button should be disabled while loading.
+
+  // Future Plan:
+  // Once the accessible loading 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 accessibleLoadingButton === 'boolean') {
+    Object.assign(glButtonConfig, {
+      accessibleLoadingButton,
+    });
+  }
 };
 
 export default setConfigs;