@gitlab/ui 56.0.1 → 56.1.1

package/dist/utils/utils.js

@@ -83,6 +83,18 @@ function isElementFocusable(elt) {
   return isValidTag && hasValidType && !isDisabled && hasValidZIndex && !isInvalidAnchorTag;
 }
 
+/**
+ * Receives an element and validates that it is reachable via sequential keyboard navigation
+ * @param { HTMLElement } The element to validate
+ * @return { boolean } Is the element focusable in a sequential tab order
+ */
+
+function isElementTabbable(el) {
+  if (!el) return false;
+  const tabindex = parseInt(el.getAttribute('tabindex'), 10);
+  return tabindex > -1;
+}
+
 /**
  * Receives an array of HTML elements and focus the first one possible
  * @param { Array.<HTMLElement> } An array of element to potentially focus
@@ -142,4 +154,4 @@ function filterVisible(els) {
   return (els || []).filter(isVisible);
 }
 
-export { colorFromBackground, debounceByAnimationFrame, filterVisible, focusFirstFocusableElement, hexToRgba, isDev, isElementFocusable, logWarning, rgbFromHex, rgbFromString, stopEvent, throttle, uid };
+export { colorFromBackground, debounceByAnimationFrame, filterVisible, focusFirstFocusableElement, hexToRgba, isDev, isElementFocusable, isElementTabbable, logWarning, rgbFromHex, rgbFromString, stopEvent, throttle, uid };

package/package.json

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

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -198,7 +198,10 @@ describe('base dropdown', () => {
   });
 
   describe('Custom toggle', () => {
-    const toggleContent = '<div>Custom toggle</div>';
+    const customToggleTestId = 'custom-toggle';
+    const toggleContent = `<button data-testid="${customToggleTestId}">Custom toggle</button>`;
+    const findFirstToggleElement = () =>
+      findCustomDropdownToggle().find(`[data-testid="${customToggleTestId}"]`);
 
     beforeEach(() => {
       const slots = { toggle: toggleContent };
@@ -220,23 +223,25 @@ describe('base dropdown', () => {
     describe('toggle visibility', () => {
       it('should toggle menu visibility on toggle button ENTER', async () => {
         const toggle = findCustomDropdownToggle();
+        const firstToggleChild = findFirstToggleElement();
         const menu = findDropdownMenu();
         // open menu clicking toggle btn
         await toggle.trigger('keydown', { code: ENTER });
         expect(menu.classes('gl-display-block!')).toBe(true);
-        expect(toggle.attributes('aria-expanded')).toBe('true');
+        expect(firstToggleChild.attributes('aria-expanded')).toBe('true');
         await nextTick();
         expect(wrapper.emitted(GL_DROPDOWN_SHOWN).length).toBe(1);
 
         // close menu clicking toggle btn again
         await toggle.trigger('keydown', { code: ENTER });
         expect(menu.classes('gl-display-block!')).toBe(false);
-        expect(toggle.attributes('aria-expanded')).toBeUndefined();
+        expect(firstToggleChild.attributes('aria-expanded')).toBe('false');
         expect(wrapper.emitted(GL_DROPDOWN_HIDDEN).length).toBe(1);
       });
 
-      it('should close the menu when Escape is pressed inside menu and focus toggle', async () => {
+      it('should close the menu when Escape is pressed inside menu and focus first child in the toggle', async () => {
         const toggle = findCustomDropdownToggle();
+        const firstToggleChild = findFirstToggleElement();
         const menu = findDropdownMenu();
         // open menu clicking toggle btn
         await toggle.trigger('click');
@@ -245,9 +250,9 @@ describe('base dropdown', () => {
         // close menu pressing ESC on it
         await menu.trigger('keydown.esc');
         expect(menu.classes('gl-display-block!')).toBe(false);
-        expect(toggle.attributes('aria-expanded')).toBeUndefined();
+        expect(firstToggleChild.attributes('aria-expanded')).toBe('false');
         expect(wrapper.emitted(GL_DROPDOWN_HIDDEN).length).toBe(1);
-        expect(toggle.element).toHaveFocus();
+        expect(toggle.find(`[data-testid="${customToggleTestId}"]`).element).toHaveFocus();
       });
     });
   });

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

@@ -8,6 +8,7 @@ import {
   dropdownVariantOptions,
 } from '../../../../utils/constants';
 import { POPPER_CONFIG, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE } from '../constants';
+import { logWarning, isElementTabbable, isElementFocusable } from '../../../../utils/utils';
 
 import GlButton from '../../button/button.vue';
 import GlIcon from '../../icon/icon.vue';
@@ -119,6 +120,14 @@ export default {
     isIconOnly() {
       return Boolean(this.icon && (!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,
@@ -151,6 +160,7 @@ export default {
           disabled: this.disabled,
           loading: this.loading,
           class: this.toggleButtonClasses,
+          ...this.ariaAttributes,
           listeners: {
             click: () => this.toggle(),
           },
@@ -159,9 +169,7 @@ export default {
 
       return {
         is: 'div',
-        role: 'button',
         class: 'gl-new-dropdown-custom-toggle',
-        tabindex: '0',
         listeners: {
           keydown: (event) => this.onKeydown(event),
           click: () => this.toggle(),
@@ -169,7 +177,7 @@ export default {
       };
     },
     toggleElement() {
-      return this.$refs.toggle.$el || this.$refs.toggle;
+      return this.$refs.toggle.$el || this.$refs.toggle?.firstElementChild;
     },
     popperConfig() {
       return {
@@ -178,15 +186,36 @@ export default {
       };
     },
   },
+  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;
 
@@ -249,10 +278,6 @@ export default {
       :id="toggleId"
       ref="toggle"
       data-testid="base-dropdown-toggle"
-      :aria-haspopup="ariaHaspopup"
-      :aria-expanded="visible"
-      :aria-labelledby="toggleLabelledBy"
-      :aria-controls="baseDropdownId"
       v-on="toggleOptions.listeners"
     >
       <!-- @slot Custom toggle button content -->

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.spec.js

@@ -277,5 +277,20 @@ describe('GlDisclosureDropdown', () => {
       buildWrapper({}, { default: 'Some other content' });
       expect(findDisclosureContent().element.tagName).toBe('DIV');
     });
+
+    describe('discouraged usage', () => {
+      it('should render `ul` as content tag when default slot contains LI tags', () => {
+        const slots = {
+          default: `
+            <li>Item</li>
+            <li>Item</li>
+            <li>Item</li>
+          `,
+        };
+
+        buildWrapper({}, slots);
+        expect(findDisclosureContent().element.tagName).toBe('UL');
+      });
+    });
   });
 });

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js

@@ -52,15 +52,15 @@ function openDisclosure(component) {
   });
 }
 
-const template = (content, { bindingOverrides = {} } = {}, after) => `
+const template = (content = '', { bindingOverrides = {}, after = '' } = {}) => `
   <div>
     <gl-disclosure-dropdown
       ref="disclosure"
       ${makeBindings(bindingOverrides)}
     >
-      ${content || ''}
+      ${content}
     </gl-disclosure-dropdown>
-    ${after || ''}
+    ${after}
   </div>
 `;
 
@@ -209,10 +209,12 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
   template: template(
     `
       <template #toggle>
+     <button class="gl-rounded-base gl-border-none gl-p-2 gl-bg-gray-50 ">
         <span class="gl-sr-only">
           Orange Fox user's menu
         </span>
-        <gl-avatar :size="32" entity-name="Orange Fox" aria-hidden="true"></gl-avatar>
+        <gl-avatar :size="32" entity-name="Orange Fox" aria-hidden="true"/>
+      </button>
       </template>
       <gl-disclosure-dropdown-group>
         <gl-disclosure-dropdown-item>
@@ -250,12 +252,13 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
       </gl-disclosure-dropdown-group>
       <gl-disclosure-dropdown-group bordered :group="$options.groups[1]"/>
     `,
-    {},
-    `
+    {
+      after: `
       <gl-modal :visible="feedBackModalVisible" @change="toggleModalVisibility" modal-id="feedbackModal" size="sm">
         <textarea class="gl-w-full">Tell us what you think!</textarea>
       </gl-modal>
-    `
+    `,
+    }
   ),
   data() {
     return {

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

@@ -31,12 +31,14 @@ const hasOnlyListItems = ({ default: defaultSlot }) => {
     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 { itemsValidator, isItem, isGroup, hasOnlyListItems };

package/src/components/base/new_dropdowns/dropdown.scss

@@ -3,10 +3,12 @@
   @include gl-vertical-align-middle;
 
   .gl-new-dropdown-custom-toggle {
-    @include gl-cursor-pointer;
+    *:first-child {
+      @include gl-cursor-pointer;
 
-    &:focus {
-      @include gl-focus;
+      &:focus {
+        @include gl-focus;
+      }
     }
   }
 

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -289,7 +289,12 @@ export const CustomToggle = (args, { argTypes }) => ({
   template: template(
     `
     <template #toggle>
-      <gl-avatar :size="32" :entity-name="selected"></gl-avatar>
+     <button class="gl-rounded-base gl-border-none gl-p-2 gl-bg-gray-50 ">
+       <span class="gl-sr-only">
+          {{selected}}
+       </span>
+       <gl-avatar :size="32" :entity-name="selected" aria-hidden="true"/>
+     </button>
     </template>
     <template #list-item="{ item }">
       <span class="gl-display-flex gl-align-items-center">

package/src/utils/utils.js

@@ -92,6 +92,19 @@ export function isElementFocusable(elt) {
   return isValidTag && hasValidType && !isDisabled && hasValidZIndex && !isInvalidAnchorTag;
 }
 
+/**
+ * Receives an element and validates that it is reachable via sequential keyboard navigation
+ * @param { HTMLElement } The element to validate
+ * @return { boolean } Is the element focusable in a sequential tab order
+ */
+
+export function isElementTabbable(el) {
+  if (!el) return false;
+
+  const tabindex = parseInt(el.getAttribute('tabindex'), 10);
+  return tabindex > -1;
+}
+
 /**
  * Receives an array of HTML elements and focus the first one possible
  * @param { Array.<HTMLElement> } An array of element to potentially focus

package/src/utils/utils.spec.js

@@ -1,4 +1,9 @@
-import { isElementFocusable, focusFirstFocusableElement, stopEvent } from './utils';
+import {
+  isElementFocusable,
+  isElementTabbable,
+  focusFirstFocusableElement,
+  stopEvent,
+} from './utils';
 
 describe('isElementFocusable', () => {
   const myBtn = () => document.querySelector('button');
@@ -53,6 +58,38 @@ describe('isElementFocusable', () => {
   });
 });
 
+describe('isElementTabbable', () => {
+  const myDiv = () => document.querySelector('div');
+
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should return false for a div without tabindex', () => {
+    document.body.innerHTML = '<div> Fake button </div>';
+
+    expect(isElementTabbable(myDiv())).toBe(false);
+  });
+
+  it('should return false for a div with a tabindex less than 0', () => {
+    document.body.innerHTML = '<div tabindex="-1"> Fake button </div>';
+
+    expect(isElementTabbable(myDiv())).toBe(false);
+  });
+
+  it('should return true for a div with a tabindex equal to 0', () => {
+    document.body.innerHTML = '<div tabindex="0"> Fake button </div>';
+
+    expect(isElementTabbable(myDiv())).toBe(true);
+  });
+
+  it('should return true for a div with a tabindex greater than 0', () => {
+    document.body.innerHTML = '<div tabindex="0"> Fake button </div>';
+
+    expect(isElementTabbable(myDiv())).toBe(true);
+  });
+});
+
 describe('focusFirstFocusableElement', () => {
   const myBtn = () => document.querySelector('button');
   const myInput = () => document.querySelector('input');