@gitlab/ui 122.9.0 → 122.11.0

package/dist/utils/unique_id.js

@@ -0,0 +1,18 @@
+/**
+ * Function uses browser native crypto to return a sixteen
+ * character base16 encoded string. It is often used to
+ * generate collision-resistant IDs for aria markup such
+ * as aria-activedescendant and aria-controls.
+ *
+ * @returns String
+ */
+const GlUniqueId = () => {
+  if (typeof window !== 'undefined' && window.crypto) {
+    const arr32 = new Uint32Array(2);
+    window.crypto.getRandomValues(arr32);
+    return Array.from(arr32, id => id.toString(16)).join('');
+  }
+  throw new Error('Cannot generate a unique ID');
+};
+
+export { GlUniqueId };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "122.9.0",
+  "version": "122.11.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -103,7 +103,7 @@
     "@babel/preset-react": "^7.27.1",
     "@cypress/grep": "^4.1.1",
     "@gitlab/fonts": "^1.3.1",
-    "@gitlab/svgs": "3.146.0",
+    "@gitlab/svgs": "3.147.0",
     "@jest/test-sequencer": "30.1.3",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
@@ -139,7 +139,7 @@
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.5.0",
-    "esbuild": "^0.25.9",
+    "esbuild": "^0.25.10",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "11.0.3",
     "globby": "^14.1.0",
@@ -165,10 +165,10 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.92.1",
+    "sass": "^1.93.0",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
-    "start-server-and-test": "^2.1.0",
+    "start-server-and-test": "^2.1.2",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
     "style-dictionary": "^5.0.4",

package/src/components/base/banner/banner.vue

@@ -4,6 +4,7 @@ import { translate } from '../../../utils/i18n';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
 import GlButton from '../button/button.vue';
 import GlCard from '../card/card.vue';
+import GlIllustration from '../illustration/illustration.vue';
 
 export default {
   name: 'GlBanner',
@@ -11,6 +12,7 @@ export default {
     CloseButton,
     GlButton,
     GlCard,
+    GlIllustration,
   },
   props: {
     /**
@@ -43,6 +45,14 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * The illustration's name.
+     */
+    illustrationName: {
+      type: String,
+      required: false,
+      default: null,
+    },
     /**
      * The illustration's URL.
      */
@@ -107,8 +117,9 @@ export default {
     }"
     body-class="gl-flex !gl-p-0"
   >
-    <div v-if="svgPath" class="gl-banner-illustration">
-      <img :src="svgPath" alt="" />
+    <div v-if="svgPath || illustrationName" class="gl-banner-illustration">
+      <gl-illustration v-if="illustrationName" :name="illustrationName" />
+      <img v-else-if="svgPath" :src="svgPath" alt="" />
     </div>
     <div class="gl-banner-content">
       <h2 class="gl-banner-title">{{ title }}</h2>

package/src/components/base/modal/modal.scss

@@ -12,6 +12,8 @@ body.modal-open {
 }
 
 .gl-modal {
+  @apply gl-@container/gl-modal;
+
   .modal-dialog-scrollable {
     @include media-breakpoint-up(sm) {
       max-height: calc(100% - #{$gl-spacing-scale-11 * 2});

package/src/components/base/token_selector/token_container.vue

@@ -13,11 +13,6 @@ export default {
       validator: tokensValidator,
       required: true,
     },
-    state: {
-      type: Boolean,
-      required: false,
-      default: null,
-    },
     registerFocusOnToken: {
       type: Function,
       required: true,
@@ -133,11 +128,6 @@ export default {
       <div
         ref="tokenContainer"
         class="-gl-mx-1 -gl-my-1 gl-flex gl-w-auto gl-list-none gl-flex-wrap gl-items-center gl-p-0"
-        role="listbox"
-        aria-multiselectable="false"
-        aria-orientation="horizontal"
-        :aria-invalid="state === false && 'true'"
-        aria-label="token list"
         @keydown.left="handleLeftArrow"
         @keydown.right="handleRightArrow"
         @keydown.home="handleHome"
@@ -152,7 +142,7 @@ export default {
           :key="token.id"
           :data-token-id="token.id"
           class="gl-token-selector-token-container gl-px-1 gl-py-2 gl-outline-none"
-          role="option"
+          data-testid="gl-token-selector-tokens"
           tabindex="-1"
           @focus="bindFocusEvent ? handleTokenFocus(index) : null"
         >

package/src/components/base/token_selector/token_selector.vue

@@ -1,12 +1,12 @@
 <script>
-import uniqueId from 'lodash/uniqueId';
+import { GlUniqueId } from '../../../utils/unique_id';
 import { tokensValidator } from './helpers';
 import GlTokenContainer from './token_container.vue';
 import GlTokenSelectorDropdown from './token_selector_dropdown.vue';
 
 export default {
   name: 'GlTokenSelector',
-  componentId: uniqueId('token-selector'),
+  componentId: `token-selector-${GlUniqueId()}`,
   components: {
     GlTokenContainer,
     GlTokenSelectorDropdown,
@@ -75,7 +75,7 @@ export default {
       default: '',
     },
     /**
-     * The autocomplete attribute value for the underlying `input` element
+     * The HTML5 autocomplete attribute value for the underlying `input` element.
      */
     autocomplete: {
       type: String,
@@ -83,7 +83,21 @@ export default {
       default: 'off',
     },
     /**
-     * The `aria-labelledby` attribute value for the underlying `input` element
+     * The `aria-label` attribute value for the underlying `input` element.
+     * Input must have an aria-label or aria-labelledby prop or it will be inaccessible.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label
+     */
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * The `aria-labelledby` attribute value for the underlying `input` element.
+     * String must match the unique ID on a text element to create an accessible label.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby
      */
     ariaLabelledby: {
       type: String,
@@ -382,6 +396,13 @@ export default {
       this.$emit('input', []);
       this.focusTextInput();
     },
+    handleAriaInvalid() {
+      const { state } = this;
+      return state === false ? 'true' : null;
+    },
+    handleAriaActiveDescendent(value) {
+      return value ? `${this.$options.componentId}-dropdown-item-${value.id}` : null;
+    },
   },
 };
 </script>
@@ -428,10 +449,17 @@ export default {
             type="text"
             class="gl-token-selector-input gl-h-auto gl-w-4/10 gl-grow gl-border-none gl-bg-transparent gl-px-1 gl-font-regular gl-text-base gl-leading-normal gl-text-default gl-outline-none"
             :value="inputText"
+            :aria-activedescendant="handleAriaActiveDescendent(focusedDropdownItem)"
             :autocomplete="autocomplete"
+            :aria-controls="$options.componentId"
+            :aria-expanded="dropdownIsOpen.toString()"
+            :aria-invalid="handleAriaInvalid()"
+            :aria-label="ariaLabelledby ? null : ariaLabel"
             :aria-labelledby="ariaLabelledby"
             :placeholder="placeholder"
             :disabled="viewOnly"
+            aria-autocomplete="list"
+            role="combobox"
             v-bind="textInputAttrs"
             @input="inputText = $event.target.value"
             @focus="handleFocus"
@@ -462,6 +490,7 @@ export default {
       :register-dropdown-event-handlers="registerDropdownEventHandlers"
       :register-reset-focused-dropdown-item="registerResetFocusedDropdownItem"
       @dropdown-item-click="addToken"
+      @input="handleAriaActiveDescendent"
       @show="openDropdown"
     >
       <template #loading-content

package/src/components/base/token_selector/token_selector_dropdown.vue

@@ -199,10 +199,10 @@ export default {
 <template>
   <div class="dropdown b-dropdown gl-dropdown gl-relative" :class="{ show }">
     <ul
+      :id="componentId"
       ref="dropdownMenu"
-      role="menu"
+      role="listbox"
       class="dropdown-menu gl-absolute"
-      :aria-activedescendant="dropdownItemIdAttribute(focusedDropdownItem)"
       :class="[{ show }, menuClass]"
     >
       <gl-dropdown-item v-if="loading" disabled>
@@ -216,7 +216,9 @@ export default {
         :key="dropdownItem.id"
         :data-dropdown-item-id="dropdownItem.id"
         :active="dropdownItemIsFocused(dropdownItem)"
+        :aria-selected="dropdownItemIsFocused(dropdownItem).toString()"
         active-class="is-focused"
+        role="option"
         tabindex="-1"
         @click="handleDropdownItemClick(dropdownItem)"
       >

package/src/utils/unique_id.js

@@ -0,0 +1,17 @@
+/**
+ * Function uses browser native crypto to return a sixteen
+ * character base16 encoded string. It is often used to
+ * generate collision-resistant IDs for aria markup such
+ * as aria-activedescendant and aria-controls.
+ *
+ * @returns String
+ */
+export const GlUniqueId = () => {
+  if (typeof window !== 'undefined' && window.crypto) {
+    const arr32 = new Uint32Array(2);
+    window.crypto.getRandomValues(arr32);
+    return Array.from(arr32, (id) => id.toString(16)).join('');
+  }
+
+  throw new Error('Cannot generate a unique ID');
+};