@gitlab/ui 128.11.0 → 128.12.0

package/dist/components/base/form/form_group/form_group.js

@@ -1,5 +1,6 @@
 import isString from 'lodash/isString';
 import isPlainObject from 'lodash/isPlainObject';
+import { uniqueId } from 'lodash';
 import { BFormGroup } from '../../../../vendor/bootstrap-vue/src/components/form-group/form-group';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -8,8 +9,11 @@ var script = {
   components: {
     BFormGroup
   },
-  provide: {
-    isInFormGroup: true
+  provide() {
+    return {
+      // Only for internal use by @gitlab/ui components
+      getFormGroupInstance: () => this
+    };
   },
   inheritAttrs: false,
   props: {
@@ -46,6 +50,11 @@ var script = {
       default: '(optional)'
     }
   },
+  data() {
+    return {
+      labelId: uniqueId('gl-form-group-label-')
+    };
+  },
   computed: {
     actualLabelClass() {
       const {
@@ -77,7 +86,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('b-form-group',_vm._b({staticClass:"gl-form-group",attrs:{"label-class":_vm.actualLabelClass},scopedSlots:_vm._u([(_vm.$attrs.label || _vm.$scopedSlots.label)?{key:"label",fn:function(){return [_vm._t("label",function(){return [_vm._v("\n      "+_vm._s(_vm.$attrs.label)+"\n      "),(_vm.optional)?_c('span',{staticClass:"optional-label",attrs:{"data-testid":"optional-label"}},[_vm._v(_vm._s(_vm.optionalText))]):_vm._e()]}),_vm._v(" "),(_vm.hasLabelDescription)?_c('div',{staticClass:"label-description",attrs:{"data-testid":"label-description"}},[_vm._t("label-description",function(){return [_vm._v(_vm._s(_vm.labelDescription))]})],2):_vm._e()]},proxy:true}:null,_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-form-group',_vm.$attrs,false))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-form-group',_vm._b({staticClass:"gl-form-group",attrs:{"label-class":_vm.actualLabelClass,"label-id":_vm.labelId},scopedSlots:_vm._u([(_vm.$attrs.label || _vm.$scopedSlots.label)?{key:"label",fn:function(){return [_vm._t("label",function(){return [_vm._v("\n      "+_vm._s(_vm.$attrs.label)+"\n      "),(_vm.optional)?_c('span',{staticClass:"optional-label",attrs:{"data-testid":"optional-label"}},[_vm._v(_vm._s(_vm.optionalText))]):_vm._e()]}),_vm._v(" "),(_vm.hasLabelDescription)?_c('div',{staticClass:"label-description",attrs:{"data-testid":"label-description"}},[_vm._t("label-description",function(){return [_vm._v(_vm._s(_vm.labelDescription))]})],2):_vm._e()]},proxy:true}:null,_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-form-group',_vm.$attrs,false))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js

@@ -25,6 +25,11 @@ var script = {
   directives: {
     Outside: OutsideDirective
   },
+  inject: {
+    getFormGroupInstance: {
+      default: () => () => {}
+    }
+  },
   props: {
     toggleText: {
       type: String,
@@ -266,16 +271,41 @@ var script = {
     toggleButtonTextClasses() {
       return this.block ? 'gl-w-full' : '';
     },
+    // Set the aria-labelledby property with one or more ID strings
     toggleLabelledBy() {
+      var _this$getFormGroupIns;
+      const formGroupLabelId = (_this$getFormGroupIns = this.getFormGroupInstance()) === null || _this$getFormGroupIns === void 0 ? void 0 : _this$getFormGroupIns.labelId;
       if (this.isToggleCombobox) {
+        // Comboboxes announce label and self value when aria-labelledby is label ID.
+        // Tested with VoiceOver, NVDA, JAWS, Narrator and preferred browsers.
         if (this.ariaLabelledby) {
-          return `${this.ariaLabelledby} ${this.toggleId}`;
+          return `${this.ariaLabelledby}`;
         }
+
+        // Combobox inside GlFormGroup
+        if (formGroupLabelId) {
+          return `${formGroupLabelId} ${this.toggleId}`;
+        }
+
+        // Fallback calculated toggleId value
         return this.toggleId;
       }
+      if (!this.isToggleCombobox) {
+        // Disclosures or buttons with listbox require both IDs to announce correctly.
+        // Tested with VoiceOver, NVDA, JAWS, Narrator and preferred browsers.
+        if (this.ariaLabelledby) {
+          return `${this.ariaLabelledby} ${this.toggleId}`;
+        }
+
+        // Disclosure or button with listbox inside GlFormGroup
+        if (formGroupLabelId) {
+          return `${formGroupLabelId} ${this.toggleId}`;
+        }
 
-      // For non-combobox toggles, combine IDs or use the button's own text
-      return this.ariaLabelledby ? `${this.ariaLabelledby} ${this.toggleId}` : undefined;
+        // Fallback calculated toggleId value
+        return this.toggleId;
+      }
+      return undefined;
     },
     toggleRole() {
       if (this.isToggleCombobox) {

package/dist/components/base/new_dropdowns/listbox/listbox.js

@@ -39,8 +39,8 @@ var script = {
     GlIntersectionObserver
   },
   inject: {
-    isInFormGroup: {
-      default: false
+    getFormGroupInstance: {
+      default: () => () => {}
     }
   },
   model: {
@@ -385,6 +385,9 @@ var script = {
       // Fallback. Return a header ID or the toggle button ID.
       return this.listAriaLabelledBy || this.headerId || this.toggleIdComputed;
     },
+    isInFormGroup() {
+      return Boolean(this.getFormGroupInstance());
+    },
     toggleIdComputed() {
       return this.toggleId || uniqueId('dropdown-toggle-btn-');
     },

package/dist/vendor/bootstrap-vue/src/components/form-group/form-group.js

@@ -53,6 +53,7 @@ const generateProps = () => makePropsConfigurable(sortKeys({
   label: makeProp(PROP_TYPE_STRING),
   labelClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
   labelFor: makeProp(PROP_TYPE_STRING),
+  labelId: makeProp(PROP_TYPE_STRING),
   labelSize: makeProp(PROP_TYPE_STRING),
   labelSrOnly: makeProp(PROP_TYPE_BOOLEAN, false),
   tooltip: makeProp(PROP_TYPE_BOOLEAN, false),
@@ -209,7 +210,7 @@ const BFormGroup = {
     const isFieldset = !labelFor;
     let $label = h();
     const labelContent = normalizeSlot(SLOT_NAME_LABEL) || this.label;
-    const labelId = labelContent ? safeId('_BV_label_') : null;
+    const labelId = labelContent ? this.labelId || safeId('_BV_label_') : null;
     if (labelContent || isHorizontal) {
       const {
         labelSize,

package/package.json

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

package/src/components/base/form/form_group/form_group.vue

@@ -1,6 +1,7 @@
 <script>
 import isString from 'lodash/isString';
 import isPlainObject from 'lodash/isPlainObject';
+import { uniqueId } from 'lodash';
 import { BFormGroup } from '../../../../vendor/bootstrap-vue/src/components/form-group/form-group';
 
 export default {
@@ -8,8 +9,11 @@ export default {
   components: {
     BFormGroup,
   },
-  provide: {
-    isInFormGroup: true,
+  provide() {
+    return {
+      // Only for internal use by @gitlab/ui components
+      getFormGroupInstance: () => this,
+    };
   },
   inheritAttrs: false,
   props: {
@@ -46,6 +50,11 @@ export default {
       default: '(optional)',
     },
   },
+  data() {
+    return {
+      labelId: uniqueId('gl-form-group-label-'),
+    };
+  },
   computed: {
     actualLabelClass() {
       const { labelClass } = this;
@@ -70,7 +79,12 @@ export default {
 };
 </script>
 <template>
-  <b-form-group v-bind="$attrs" class="gl-form-group" :label-class="actualLabelClass">
+  <b-form-group
+    v-bind="$attrs"
+    class="gl-form-group"
+    :label-class="actualLabelClass"
+    :label-id="labelId"
+  >
     <template v-if="$attrs.label || $scopedSlots.label" #label>
       <slot name="label">
         {{ $attrs.label }}

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -55,6 +55,11 @@ export default {
     GlIcon,
   },
   directives: { Outside: OutsideDirective },
+  inject: {
+    getFormGroupInstance: {
+      default: () => () => {},
+    },
+  },
   props: {
     toggleText: {
       type: String,
@@ -298,16 +303,43 @@ export default {
     toggleButtonTextClasses() {
       return this.block ? 'gl-w-full' : '';
     },
+    // Set the aria-labelledby property with one or more ID strings
     toggleLabelledBy() {
+      const formGroupLabelId = this.getFormGroupInstance()?.labelId;
+
       if (this.isToggleCombobox) {
+        // Comboboxes announce label and self value when aria-labelledby is label ID.
+        // Tested with VoiceOver, NVDA, JAWS, Narrator and preferred browsers.
+        if (this.ariaLabelledby) {
+          return `${this.ariaLabelledby}`;
+        }
+
+        // Combobox inside GlFormGroup
+        if (formGroupLabelId) {
+          return `${formGroupLabelId} ${this.toggleId}`;
+        }
+
+        // Fallback calculated toggleId value
+        return this.toggleId;
+      }
+
+      if (!this.isToggleCombobox) {
+        // Disclosures or buttons with listbox require both IDs to announce correctly.
+        // Tested with VoiceOver, NVDA, JAWS, Narrator and preferred browsers.
         if (this.ariaLabelledby) {
           return `${this.ariaLabelledby} ${this.toggleId}`;
         }
+
+        // Disclosure or button with listbox inside GlFormGroup
+        if (formGroupLabelId) {
+          return `${formGroupLabelId} ${this.toggleId}`;
+        }
+
+        // Fallback calculated toggleId value
         return this.toggleId;
       }
 
-      // For non-combobox toggles, combine IDs or use the button's own text
-      return this.ariaLabelledby ? `${this.ariaLabelledby} ${this.toggleId}` : undefined;
+      return undefined;
     },
     toggleRole() {
       if (this.isToggleCombobox) {

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -67,8 +67,8 @@ export default {
     GlIntersectionObserver,
   },
   inject: {
-    isInFormGroup: {
-      default: false,
+    getFormGroupInstance: {
+      default: () => () => {},
     },
   },
   model: {
@@ -417,6 +417,9 @@ export default {
       // Fallback. Return a header ID or the toggle button ID.
       return this.listAriaLabelledBy || this.headerId || this.toggleIdComputed;
     },
+    isInFormGroup() {
+      return Boolean(this.getFormGroupInstance());
+    },
     toggleIdComputed() {
       return this.toggleId || uniqueId('dropdown-toggle-btn-');
     },

package/src/vendor/bootstrap-vue/src/components/form-group/form-group.js

@@ -74,6 +74,7 @@ export const generateProps = () =>
       label: makeProp(PROP_TYPE_STRING),
       labelClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
       labelFor: makeProp(PROP_TYPE_STRING),
+      labelId: makeProp(PROP_TYPE_STRING),
       labelSize: makeProp(PROP_TYPE_STRING),
       labelSrOnly: makeProp(PROP_TYPE_BOOLEAN, false),
       tooltip: makeProp(PROP_TYPE_BOOLEAN, false),
@@ -241,7 +242,7 @@ export const BFormGroup = {
 
     let $label = h()
     const labelContent = normalizeSlot(SLOT_NAME_LABEL) || this.label
-    const labelId = labelContent ? safeId('_BV_label_') : null
+    const labelId = labelContent ? this.labelId || safeId('_BV_label_') : null
     if (labelContent || isHorizontal) {
       const { labelSize, labelColProps } = this
       const labelTag = isFieldset ? 'legend' : 'label'