@gitlab/ui 56.0.1 → 56.1.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [56.1.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v56.1.0...v56.1.1) (2023-02-20)
+
+
+### Performance Improvements
+
+* **GlCollapsibleDropdown:** avoid unnecessary loop ([2d13b6e](https://gitlab.com/gitlab-org/gitlab-ui/commit/2d13b6ecc80154e70a4d637974b8434d50e53928))
+
+# [56.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v56.0.1...v56.1.0) (2023-02-20)
+
+
+### Features
+
+* **GlDisclosureDropdown, GlCollapsibleListbox:** Set focus on the first custom toggle's child ([2a86c03](https://gitlab.com/gitlab-org/gitlab-ui/commit/2a86c035d0b92ead9bc15017521a205977ad6d2e))
+
 ## [56.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v56.0.0...v56.0.1) (2023-02-17)
 
 

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

@@ -2,6 +2,7 @@ import _uniqueId from 'lodash/uniqueId';
 import { createPopper } from '@popperjs/core';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
 import { POPPER_CONFIG, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE } from '../constants';
+import { isElementFocusable, isElementTabbable, logWarning } from '../../../../utils/utils';
 import GlButton from '../../button/button';
 import GlIcon from '../../icon/icon';
 import { OutsideDirective } from '../../../../directives/outside/outside';
@@ -116,6 +117,14 @@ var script = {
       var _this$toggleText;
       return Boolean(this.icon && (!((_this$toggleText = this.toggleText) !== null && _this$toggleText !== void 0 && _this$toggleText.length) || this.textSrOnly));
     },
+    ariaAttributes() {
+      return {
+        'aria-haspopup': this.ariaHaspopup,
+        'aria-expanded': this.visible,
+        'aria-controls': this.baseDropdownId,
+        'aria-labelledby': this.toggleLabelledBy
+      };
+    },
     toggleButtonClasses() {
       return [this.toggleClass, {
         'gl-new-dropdown-toggle': true,
@@ -145,6 +154,7 @@ var script = {
           disabled: this.disabled,
           loading: this.loading,
           class: this.toggleButtonClasses,
+          ...this.ariaAttributes,
           listeners: {
             click: () => this.toggle()
           }
@@ -152,9 +162,7 @@ var script = {
       }
       return {
         is: 'div',
-        role: 'button',
         class: 'gl-new-dropdown-custom-toggle',
-        tabindex: '0',
         listeners: {
           keydown: event => this.onKeydown(event),
           click: () => this.toggle()
@@ -162,7 +170,8 @@ var script = {
       };
     },
     toggleElement() {
-      return this.$refs.toggle.$el || this.$refs.toggle;
+      var _this$$refs$toggle;
+      return this.$refs.toggle.$el || ((_this$$refs$toggle = this.$refs.toggle) === null || _this$$refs$toggle === void 0 ? void 0 : _this$$refs$toggle.firstElementChild);
     },
     popperConfig() {
       return {
@@ -171,15 +180,34 @@ var script = {
       };
     }
   },
+  watch: {
+    ariaAttributes: {
+      deep: true,
+      handler(ariaAttributes) {
+        if (this.$scopedSlots.toggle) {
+          Object.keys(ariaAttributes).forEach(key => {
+            this.toggleElement.setAttribute(key, ariaAttributes[key]);
+          });
+        }
+      }
+    }
+  },
   mounted() {
     this.$nextTick(() => {
       this.popper = createPopper(this.toggleElement, this.$refs.content, this.popperConfig);
     });
+    this.checkToggleFocusable();
   },
   beforeDestroy() {
     this.popper.destroy();
   },
   methods: {
+    checkToggleFocusable() {
+      if (!isElementFocusable(this.toggleElement) && !isElementTabbable(this.toggleElement)) {
+        logWarning(`GlDisclosureDropdown/GlCollapsibleListbox: Toggle is missing a 'tabindex' and cannot be focused.
+          Use 'a' or 'button' element instead or make sure to add 'role="button"' along with 'tabindex' otherwise.`);
+      }
+    },
     async toggle() {
       this.visible = !this.visible;
       if (this.visible) {
@@ -238,7 +266,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',{directives:[{name:"outside",rawName:"v-outside",value:(_vm.close),expression:"close"}],staticClass:"gl-new-dropdown",class:{ 'gl-display-block!': _vm.block }},[_c(_vm.toggleOptions.is,_vm._g(_vm._b({ref:"toggle",tag:"component",attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle","aria-haspopup":_vm.ariaHaspopup,"aria-expanded":_vm.visible,"aria-labelledby":_vm.toggleLabelledBy,"aria-controls":_vm.baseDropdownId}},'component',_vm.toggleOptions,false),_vm.toggleOptions.listeners),[_vm._t("toggle",function(){return [_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._v("\n        "+_vm._s(_vm.toggleText)+"\n      ")]),_vm._v(" "),(!_vm.noCaret)?_c('gl-icon',{staticClass:"gl-button-icon gl-new-dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})],2),_vm._v(" "),_c('div',{ref:"content",staticClass:"gl-new-dropdown-panel",class:{ 'gl-display-block!': _vm.visible },attrs:{"id":_vm.baseDropdownId,"data-testid":"base-dropdown-menu"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.closeAndFocus.apply(null, arguments)}}},[_c('div',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default")],2)])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"outside",rawName:"v-outside",value:(_vm.close),expression:"close"}],staticClass:"gl-new-dropdown",class:{ 'gl-display-block!': _vm.block }},[_c(_vm.toggleOptions.is,_vm._g(_vm._b({ref:"toggle",tag:"component",attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle"}},'component',_vm.toggleOptions,false),_vm.toggleOptions.listeners),[_vm._t("toggle",function(){return [_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._v("\n        "+_vm._s(_vm.toggleText)+"\n      ")]),_vm._v(" "),(!_vm.noCaret)?_c('gl-icon',{staticClass:"gl-button-icon gl-new-dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})],2),_vm._v(" "),_c('div',{ref:"content",staticClass:"gl-new-dropdown-panel",class:{ 'gl-display-block!': _vm.visible },attrs:{"id":_vm.baseDropdownId,"data-testid":"base-dropdown-menu"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.closeAndFocus.apply(null, arguments)}}},[_c('div',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default")],2)])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/disclosure/utils.js

@@ -25,7 +25,11 @@ const hasOnlyListItems = _ref => {
     return false;
   }
   const nodes = defaultSlot();
-  return Array.isArray(nodes) && nodes.filter(vNode => vNode.tag).length && (nodes.filter(vNode => vNode.tag).every(isValidSlotTagVue2) || nodes.filter(vNode => vNode.tag).every(isValidSlotTag));
+  if (!Array.isArray(nodes)) {
+    return false;
+  }
+  const tags = nodes.filter(vNode => vNode.tag);
+  return tags.length && tags.every(tag => isValidSlotTag(tag) || isValidSlotTagVue2(tag));
 };
 
 export { hasOnlyListItems, isGroup, isItem, itemsValidator };