@gitlab/ui 138.1.0 → 138.2.0

package/dist/components/base/sorting/sorting.js

@@ -97,6 +97,15 @@ var script = {
       type: Boolean,
       required: false,
       default: true
+    },
+    /**
+     * Disables the entire sorting control (both the sort-by dropdown and the
+     * sort direction toggle) while keeping it visible.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -106,7 +115,13 @@ var script = {
     };
   },
   computed: {
+    unavailableLabel() {
+      return translate('GlSorting.sortingUnavailable', 'Sorting is unavailable');
+    },
     sortingListboxLabel() {
+      if (this.disabled) {
+        return this.unavailableLabel;
+      }
       return translate('GlSorting.sortByLabel', 'Sort by:');
     },
     localSortDirection() {
@@ -121,18 +136,23 @@ var script = {
     },
     isDirectionToggleDisabled() {
       var _this$selectedSortOpt3;
-      return Boolean((_this$selectedSortOpt3 = this.selectedSortOption) === null || _this$selectedSortOpt3 === void 0 ? void 0 : _this$selectedSortOpt3.directionToggleDisabled);
+      return this.disabled || Boolean((_this$selectedSortOpt3 = this.selectedSortOption) === null || _this$selectedSortOpt3 === void 0 ? void 0 : _this$selectedSortOpt3.directionToggleDisabled);
     },
     sortDirectionText() {
-      if (this.sortDirectionToolTip) return this.sortDirectionToolTip;
+      if (this.sortDirectionToolTip && !this.disabled) return this.sortDirectionToolTip;
       if (this.isDirectionToggleDisabled) {
-        return this.selectedSortText ? translate('GlSorting.sortDirectionUnavailableFor', 'Sort direction unavailable for %{sortField}', {
+        return this.selectedSortText ? translate('GlSorting.sortDirectionUnavailableFor', 'Sorting is unavailable for %{sortField}', {
           sortField: this.selectedSortText
-        }) : translate('GlSorting.sortDirectionUnavailable', 'Sort direction unavailable');
+        }) : this.unavailableLabel;
       }
       return this.isAscending ? translate('GlSorting.sortAscending', 'Sort direction: ascending') : translate('GlSorting.sortDescending', 'Sort direction: descending');
     }
   },
+  watch: {
+    disabled(isDisabled) {
+      if (isDisabled) this.$refs.listbox.close();
+    }
+  },
   methods: {
     toggleSortDirection() {
       if (this.isDirectionToggleDisabled) return;
@@ -149,6 +169,8 @@ var script = {
       this.$emit('sort-direction-change', newDirection);
     },
     onSortByChanged(event) {
+      if (this.disabled) return;
+
       /**
        * Emitted when the sort field is changed.
        *
@@ -167,7 +189,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('gl-button-group',{staticClass:"gl-sorting gl-flex"},[_c('gl-collapsible-listbox',{staticClass:"gl-w-full",class:_vm.dropdownClass,attrs:{"toggle-text":_vm.text,"items":_vm.sortOptions,"selected":_vm.sortBy,"toggle-class":_vm.dropdownToggleClass,"placement":"bottom-end","block":_vm.block,"toggle-id":_vm.toggleId,"toggle-aria-labelled-by":(_vm.sortingListboxId + " " + _vm.toggleId)},on:{"select":_vm.onSortByChanged}}),_vm._v(" "),_c('span',{staticClass:"gl-sr-only",attrs:{"id":_vm.sortingListboxId}},[_vm._v(_vm._s(_vm.sortingListboxLabel))]),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],class:['sorting-direction-button', _vm.sortDirectionToggleClass],attrs:{"title":_vm.sortDirectionText,"icon":_vm.localSortDirection,"aria-label":_vm.sortDirectionText,"disabled":_vm.isDirectionToggleDisabled,"accessible-disabled":_vm.isDirectionToggleDisabled},on:{"click":_vm.toggleSortDirection}})],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button-group',{staticClass:"gl-sorting gl-flex"},[_c('gl-collapsible-listbox',{ref:"listbox",staticClass:"gl-w-full",class:_vm.dropdownClass,attrs:{"toggle-text":_vm.text,"items":_vm.sortOptions,"selected":_vm.sortBy,"toggle-class":_vm.dropdownToggleClass,"placement":"bottom-end","block":_vm.block,"disabled":_vm.disabled,"toggle-id":_vm.toggleId,"toggle-aria-labelled-by":(_vm.sortingListboxId + " " + _vm.toggleId)},on:{"select":_vm.onSortByChanged}}),_vm._v(" "),_c('span',{staticClass:"gl-sr-only",attrs:{"id":_vm.sortingListboxId}},[_vm._v(_vm._s(_vm.sortingListboxLabel))]),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],class:['sorting-direction-button', _vm.sortDirectionToggleClass],attrs:{"title":_vm.sortDirectionText,"icon":_vm.localSortDirection,"aria-label":_vm.sortDirectionText,"disabled":_vm.isDirectionToggleDisabled,"accessible-disabled":_vm.isDirectionToggleDisabled},on:{"click":_vm.toggleSortDirection}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/toggle/toggle.js

@@ -1,4 +1,5 @@
 import { uniqueId } from 'lodash-es';
+import { glToggleConfig } from '../../../config';
 import { toggleLabelPosition } from '../../../utils/constants';
 import GlIcon from '../icon/icon';
 import GlLoadingIcon from '../loading_icon/loading_icon';
@@ -41,6 +42,22 @@ var script = {
       required: false,
       default: false
     },
+    /**
+     * Keep the toggle focusable while `disabled` is `true`. Uses `aria-disabled` so the toggle stays in the tab order and is announced by assistive technology.
+     */
+    accessibleDisabled: {
+      type: Boolean,
+      required: false,
+      default: () => glToggleConfig.accessibleDisabledToggle
+    },
+    /**
+     * Space-separated ids of elements that describe the toggle, in addition to its help text.
+     */
+    ariaDescribedby: {
+      type: String,
+      required: false,
+      default: undefined
+    },
     /**
      * Whether the toggle is in the loading state.
      */
@@ -108,6 +125,12 @@ var script = {
     helpId() {
       return this.shouldRenderHelp ? `toggle-help-${this.uuid}` : undefined;
     },
+    describedBy() {
+      return [this.helpId, this.ariaDescribedby].filter(Boolean).join(' ') || undefined;
+    },
+    isNativeDisabled() {
+      return this.disabled && !this.accessibleDisabled;
+    },
     isChecked() {
       return this.value ? 'true' : 'false';
     },
@@ -146,7 +169,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
       'is-checked': _vm.value,
       'is-disabled': _vm.disabled || _vm.isLoading,
       'is-loading': _vm.isLoading,
-    },attrs:{"role":"switch","aria-checked":_vm.isChecked,"aria-labelledby":_vm.labelId,"aria-describedby":_vm.helpId,"aria-disabled":_vm.disabled,"type":"button","disabled":_vm.disabled},on:{"click":function($event){$event.preventDefault();return _vm.toggleFeature.apply(null, arguments)}}},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"toggle-loading",attrs:{"color":"dark"}}):_c('span',{staticClass:"toggle-icon"},[_c('gl-icon',{attrs:{"name":_vm.icon,"size":12}})],1)],1),_vm._v(" "),(_vm.shouldRenderHelp)?_c('span',{staticClass:"gl-help-label",attrs:{"id":_vm.helpId,"data-testid":"toggle-help"}},[_vm._t("help",function(){return [_vm._v(_vm._s(_vm.help))]})],2):_vm._e()])};
+    },attrs:{"role":"switch","aria-checked":_vm.isChecked,"aria-labelledby":_vm.labelId,"aria-describedby":_vm.describedBy,"aria-disabled":_vm.disabled,"type":"button","disabled":_vm.isNativeDisabled},on:{"click":function($event){$event.preventDefault();return _vm.toggleFeature.apply(null, arguments)}}},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"toggle-loading",attrs:{"color":"dark"}}):_c('span',{staticClass:"toggle-icon"},[_c('gl-icon',{attrs:{"name":_vm.icon,"size":12}})],1)],1),_vm._v(" "),(_vm.shouldRenderHelp)?_c('span',{staticClass:"gl-help-label",attrs:{"id":_vm.helpId,"data-testid":"toggle-help"}},[_vm._t("help",function(){return [_vm._v(_vm._s(_vm.help))]})],2):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/chart/chart.js

@@ -73,6 +73,15 @@ var script = {
       type: Boolean,
       required: false,
       default: true
+    },
+    /**
+     * A name for the chart that screen readers announce. It is added as a hidden title, which
+     * ECharts reads into the description it generates. Ignored when `options` sets a title.
+     */
+    accessibleTitle: {
+      type: String,
+      required: false,
+      default: ''
     }
   },
   data() {
@@ -96,6 +105,14 @@ var script = {
           }
         });
       }
+      if (this.accessibleTitle && !options.title) {
+        options = merge({}, options, {
+          title: {
+            text: this.accessibleTitle,
+            show: false
+          }
+        });
+      }
 
       // Add space at the top to fit the toolbox
       if (((_options$toolbox = options.toolbox) === null || _options$toolbox === void 0 ? void 0 : _options$toolbox.show) === true) {
@@ -116,6 +133,11 @@ var script = {
         this.draw();
       }
     },
+    accessibleTitle() {
+      if (this.chart) {
+        this.draw();
+      }
+    },
     width() {
       this.setChartSize();
     },

package/dist/config.js

@@ -5,6 +5,7 @@ const defaultConfig = {
   firstDayOfWeek: 0 // Defaults to 0 (Sunday)
 };
 const glButtonConfig = {};
+const glToggleConfig = {};
 let configured = false;
 
 /**
@@ -15,6 +16,7 @@ let configured = false;
  * @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} [accessibleDisabledButton] Temporary flag to enable the accessible disabled button.
+ * @property {boolean} [accessibleDisabledToggle] Temporary flag to enable the accessible disabled toggle.
  *
  */
 const setConfigs = function () {
@@ -22,7 +24,9 @@ const setConfigs = function () {
     translations = _ref.translations,
     firstDayOfWeek = _ref.firstDayOfWeek,
     _ref$accessibleDisabl = _ref.accessibleDisabledButton,
-    accessibleDisabledButton = _ref$accessibleDisabl === void 0 ? false : _ref$accessibleDisabl;
+    accessibleDisabledButton = _ref$accessibleDisabl === void 0 ? false : _ref$accessibleDisabl,
+    _ref$accessibleDisabl2 = _ref.accessibleDisabledToggle,
+    accessibleDisabledToggle = _ref$accessibleDisabl2 === void 0 ? false : _ref$accessibleDisabl2;
   if (configured) {
     if (process.env.NODE_ENV === 'development') {
       throw new Error('GitLab UI can only be configured once!');
@@ -67,6 +71,14 @@ const setConfigs = function () {
       accessibleDisabledButton
     });
   }
+
+  // Temporary flag for the accessible disabled toggle. Once validated, aria-disabled becomes
+  // the default for disabled toggles and this flag is removed.
+  if (typeof accessibleDisabledToggle === 'boolean') {
+    Object.assign(glToggleConfig, {
+      accessibleDisabledToggle
+    });
+  }
 };
 
-export { setConfigs as default, defaultConfig, glButtonConfig, i18n };
+export { setConfigs as default, defaultConfig, glButtonConfig, glToggleConfig, i18n };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "138.1.0",
+  "version": "138.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/sorting/sorting.vue

@@ -98,6 +98,15 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * Disables the entire sorting control (both the sort-by dropdown and the
+     * sort direction toggle) while keeping it visible.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -106,7 +115,14 @@ export default {
     };
   },
   computed: {
+    unavailableLabel() {
+      return translate('GlSorting.sortingUnavailable', 'Sorting is unavailable');
+    },
     sortingListboxLabel() {
+      if (this.disabled) {
+        return this.unavailableLabel;
+      }
+
       return translate('GlSorting.sortByLabel', 'Sort by:');
     },
     localSortDirection() {
@@ -119,19 +135,19 @@ export default {
       return this.selectedSortOption?.text ?? '';
     },
     isDirectionToggleDisabled() {
-      return Boolean(this.selectedSortOption?.directionToggleDisabled);
+      return this.disabled || Boolean(this.selectedSortOption?.directionToggleDisabled);
     },
     sortDirectionText() {
-      if (this.sortDirectionToolTip) return this.sortDirectionToolTip;
+      if (this.sortDirectionToolTip && !this.disabled) return this.sortDirectionToolTip;
 
       if (this.isDirectionToggleDisabled) {
         return this.selectedSortText
           ? translate(
               'GlSorting.sortDirectionUnavailableFor',
-              'Sort direction unavailable for %{sortField}',
+              'Sorting is unavailable for %{sortField}',
               { sortField: this.selectedSortText },
             )
-          : translate('GlSorting.sortDirectionUnavailable', 'Sort direction unavailable');
+          : this.unavailableLabel;
       }
 
       return this.isAscending
@@ -139,6 +155,11 @@ export default {
         : translate('GlSorting.sortDescending', 'Sort direction: descending');
     },
   },
+  watch: {
+    disabled(isDisabled) {
+      if (isDisabled) this.$refs.listbox.close();
+    },
+  },
   methods: {
     toggleSortDirection() {
       if (this.isDirectionToggleDisabled) return;
@@ -156,6 +177,8 @@ export default {
       this.$emit('sort-direction-change', newDirection);
     },
     onSortByChanged(event) {
+      if (this.disabled) return;
+
       /**
        * Emitted when the sort field is changed.
        *
@@ -174,6 +197,7 @@ export default {
 <template>
   <gl-button-group class="gl-sorting gl-flex">
     <gl-collapsible-listbox
+      ref="listbox"
       :toggle-text="text"
       :items="sortOptions"
       :selected="sortBy"
@@ -182,6 +206,7 @@ export default {
       :class="dropdownClass"
       placement="bottom-end"
       :block="block"
+      :disabled="disabled"
       :toggle-id="toggleId"
       :toggle-aria-labelled-by="`${sortingListboxId} ${toggleId}`"
       @select="onSortByChanged"

package/src/components/base/toggle/toggle.vue

@@ -1,6 +1,7 @@
 <script>
 import { uniqueId } from 'lodash-es';
 
+import { glToggleConfig } from '../../../config';
 import { toggleLabelPosition } from '../../../utils/constants';
 import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
@@ -43,6 +44,22 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Keep the toggle focusable while `disabled` is `true`. Uses `aria-disabled` so the toggle stays in the tab order and is announced by assistive technology.
+     */
+    accessibleDisabled: {
+      type: Boolean,
+      required: false,
+      default: () => glToggleConfig.accessibleDisabledToggle,
+    },
+    /**
+     * Space-separated ids of elements that describe the toggle, in addition to its help text.
+     */
+    ariaDescribedby: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     /**
      * Whether the toggle is in the loading state.
      */
@@ -111,6 +128,12 @@ export default {
     helpId() {
       return this.shouldRenderHelp ? `toggle-help-${this.uuid}` : undefined;
     },
+    describedBy() {
+      return [this.helpId, this.ariaDescribedby].filter(Boolean).join(' ') || undefined;
+    },
+    isNativeDisabled() {
+      return this.disabled && !this.accessibleDisabled;
+    },
     isChecked() {
       return this.value ? 'true' : 'false';
     },
@@ -172,7 +195,7 @@ export default {
       role="switch"
       :aria-checked="isChecked"
       :aria-labelledby="labelId"
-      :aria-describedby="helpId"
+      :aria-describedby="describedBy"
       :aria-disabled="disabled"
       :class="{
         'is-checked': value,
@@ -181,7 +204,7 @@ export default {
       }"
       class="gl-toggle gl-shrink-0"
       type="button"
-      :disabled="disabled"
+      :disabled="isNativeDisabled"
       @click.prevent="toggleFeature"
     >
       <gl-loading-icon v-if="isLoading" color="dark" class="toggle-loading" />

package/src/components/charts/chart/chart.vue

@@ -80,6 +80,15 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * A name for the chart that screen readers announce. It is added as a hidden title, which
+     * ECharts reads into the description it generates. Ignored when `options` sets a title.
+     */
+    accessibleTitle: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -96,6 +105,10 @@ export default {
         options = merge({}, options, { aria: { enabled: true } });
       }
 
+      if (this.accessibleTitle && !options.title) {
+        options = merge({}, options, { title: { text: this.accessibleTitle, show: false } });
+      }
+
       // Add space at the top to fit the toolbox
       if (options.toolbox?.show === true) {
         const top = (options.grid?.top || 0) + toolboxHeight;
@@ -111,6 +124,11 @@ export default {
         this.draw();
       }
     },
+    accessibleTitle() {
+      if (this.chart) {
+        this.draw();
+      }
+    },
     width() {
       this.setChartSize();
     },

package/src/config.js

@@ -7,6 +7,7 @@ export const defaultConfig = {
 };
 
 export const glButtonConfig = {};
+export const glToggleConfig = {};
 
 let configured = false;
 
@@ -18,9 +19,15 @@ let configured = false;
  * @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} [accessibleDisabledButton] Temporary flag to enable the accessible disabled button.
+ * @property {boolean} [accessibleDisabledToggle] Temporary flag to enable the accessible disabled toggle.
  *
  */
-const setConfigs = ({ translations, firstDayOfWeek, accessibleDisabledButton = false } = {}) => {
+const setConfigs = ({
+  translations,
+  firstDayOfWeek,
+  accessibleDisabledButton = false,
+  accessibleDisabledToggle = false,
+} = {}) => {
   if (configured) {
     if (process.env.NODE_ENV === 'development') {
       throw new Error('GitLab UI can only be configured once!');
@@ -71,6 +78,14 @@ const setConfigs = ({ translations, firstDayOfWeek, accessibleDisabledButton = f
       accessibleDisabledButton,
     });
   }
+
+  // Temporary flag for the accessible disabled toggle. Once validated, aria-disabled becomes
+  // the default for disabled toggles and this flag is removed.
+  if (typeof accessibleDisabledToggle === 'boolean') {
+    Object.assign(glToggleConfig, {
+      accessibleDisabledToggle,
+    });
+  }
 };
 
 export default setConfigs;

package/translations.js

@@ -43,8 +43,8 @@ export default {
   'GlSorting.sortAscending': 'Sort direction: ascending',
   'GlSorting.sortByLabel': 'Sort by:',
   'GlSorting.sortDescending': 'Sort direction: descending',
-  'GlSorting.sortDirectionUnavailable': 'Sort direction unavailable',
-  'GlSorting.sortDirectionUnavailableFor': 'Sort direction unavailable for %{sortField}',
+  'GlSorting.sortDirectionUnavailableFor': 'Sorting is unavailable for %{sortField}',
+  'GlSorting.sortingUnavailable': 'Sorting is unavailable',
   'GlTabs.GlScrollableTabs.scrollLeftLabel': 'Scroll left',
   'GlTabs.GlScrollableTabs.scrollRightLabel': 'Scroll right',
   'GlToken.closeButtonTitle': 'Remove',