@gitlab/ui 56.0.0 → 56.1.0

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.0",
+  "version": "56.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -62,7 +62,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.2",
     "bootstrap-vue": "2.20.1",
-    "dompurify": "^2.4.3",
+    "dompurify": "^2.4.4",
     "echarts": "^5.3.2",
     "iframe-resizer": "^4.3.2",
     "lodash": "^4.17.20",
@@ -115,7 +115,7 @@
     "bootstrap-vue-vue3": "npm:bootstrap-vue@2.23.1",
     "cypress": "^11.2.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.32.0",
+    "eslint": "8.34.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-storybook": "0.6.10",

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.stories.js

@@ -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>

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/components/charts/chart/chart.md

@@ -1,13 +1,13 @@
 ### ECharts Wrapper
 
-The chart component is a Vue component wrapper around
-[Apache ECharts](https://echarts.apache.org/en/api.html#echarts). The chart component accepts width
-and height props in order to allow the user to make it responsive, but it is not responsive
-by default.
+The chart component is a Vue component wrapper around [Apache ECharts](https://echarts.apache.org/en/api.html#echarts).
+The chart component accepts width and height props in order to allow the user to make it responsive,
+but it is not responsive by default.
 
-> Note: In every case there should be a specific component for each type of chart
-(i.e. Line, Area, Bar, etc.). This component should only need to be used by chart type components
-within GitLab UI as opposed to being used directly within any other codebase.
+> Note: When implementing a chart type that does not already have a GitLab UI component, you can use
+> this component alonside the [ECharts options](https://echarts.apache.org/en/api.html#echarts) to
+> build your chart. Each type of chart should still follow the general guidelines in the
+> [pajamas documentation](https://design.gitlab.com/data-visualization/charts).
 
 ### EChart Lifecycle
 

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');