@gitlab/ui 109.1.0 → 109.2.1

package/dist/vendor/bootstrap-vue/src/components/dropdown/dropdown-item-button.js

@@ -13,7 +13,8 @@ const props = makePropsConfigurable({
   activeClass: makeProp(PROP_TYPE_STRING, 'active'),
   buttonClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
   disabled: makeProp(PROP_TYPE_BOOLEAN, false),
-  variant: makeProp(PROP_TYPE_STRING)
+  variant: makeProp(PROP_TYPE_STRING),
+  role: makeProp(PROP_TYPE_STRING, 'menuitem')
 }, NAME_DROPDOWN_ITEM_BUTTON);
 
 // --- Main component ---
@@ -36,9 +37,10 @@ const BDropdownItemButton = /*#__PURE__*/extend({
     computedAttrs() {
       return {
         ...this.bvAttrs,
-        role: 'menuitem',
+        role: this.role,
         type: 'button',
-        disabled: this.disabled
+        disabled: this.disabled,
+        'aria-selected': this.active ? 'true' : null
       };
     }
   },

package/package.json

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

package/src/components/base/dropdown/dropdown_item.vue

@@ -60,6 +60,11 @@ export default {
       required: false,
       default: '',
     },
+    role: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     bootstrapComponent() {
@@ -67,6 +72,11 @@ export default {
       // Support 'href' and Vue Router's 'to'
       return href || to ? BDropdownItem : BDropdownItemButton;
     },
+    bootstrapComponentProps() {
+      const props = { ...this.$attrs };
+      if (this.role) props.role = this.role;
+      return props;
+    },
     iconColorCss() {
       return variantCssColorMap[this.iconColor] || 'gl-fill-icon-default';
     },
@@ -90,7 +100,12 @@ export default {
 </script>
 
 <template>
-  <component :is="bootstrapComponent" class="gl-dropdown-item" v-bind="$attrs" v-on="$listeners">
+  <component
+    :is="bootstrapComponent"
+    class="gl-dropdown-item"
+    v-bind="bootstrapComponentProps"
+    v-on="$listeners"
+  >
     <gl-icon
       v-if="shouldShowCheckIcon"
       name="mobile-issue-close"

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

@@ -70,11 +70,12 @@ export default {
       userDismissedResults: false,
       suggestionsId: uniqueId('token-suggestions-'),
       inputId: uniqueId('token-input-'),
+      dropdownItemComponent: GlDropdownItem,
     };
   },
   computed: {
-    ariaExpanded() {
-      return this.showSuggestions.toString();
+    isExpanded() {
+      return this.showSuggestions && !this.userDismissedResults;
     },
     showAutocomplete() {
       return this.showSuggestions ? 'off' : 'on';
@@ -149,6 +150,14 @@ export default {
       this.arrowCounter = newCount;
       this.focusItem(newCount);
     },
+    onArrowLeft() {
+      // don't prevent default, we want the cursor to move
+      this.$refs.input.focus();
+    },
+    onArrowRight() {
+      // don't prevent default, we want the cursor to move
+      this.$refs.input.focus();
+    },
     onEsc() {
       if (!this.showSuggestions) {
         this.$emit('input', '');
@@ -202,79 +211,88 @@ export default {
   },
 };
 </script>
+
 <template>
-  <div
-    class="gl-form-combobox dropdown"
-    role="combobox"
-    :aria-owns="suggestionsId"
-    :aria-expanded="ariaExpanded"
-  >
+  <div class="gl-form-combobox dropdown">
     <gl-form-group :label="labelText" :label-for="inputId" :label-sr-only="labelSrOnly">
       <gl-form-input
         :id="inputId"
+        ref="input"
         :value="displayedValue"
         type="text"
-        role="searchbox"
-        :autocomplete="showAutocomplete"
-        aria-autocomplete="list"
+        role="combobox"
+        :aria-expanded="String(isExpanded)"
         :aria-controls="suggestionsId"
+        :aria-owns="isExpanded ? suggestionsId : null"
+        aria-autocomplete="list"
         aria-haspopup="listbox"
+        :aria-activedescendant="
+          arrowCounter >= 0 ? `${suggestionsId}-option-${arrowCounter}` : undefined
+        "
         :autofocus="autofocus"
         :placeholder="placeholder"
         @input="onEntry"
         @focus="resetCounter"
         @keydown.down="onArrowDown"
         @keydown.up="onArrowUp"
+        @keydown.left="onArrowLeft"
+        @keydown.right="onArrowRight"
         @keydown.esc.stop="onEsc"
         @keydown.tab="closeSuggestions"
       />
     </gl-form-group>
 
-    <ul
-      v-show="showSuggestions && !userDismissedResults"
+    <div
+      v-show="isExpanded"
       :id="suggestionsId"
       ref="suggestionsMenu"
       data-testid="combobox-dropdown"
+      role="listbox"
       class="dropdown-menu gl-form-combobox-inner gl-mb-0 gl-flex gl-w-full gl-list-none gl-flex-col gl-border-dropdown gl-bg-dropdown gl-pl-0"
       @keydown.down="onArrowDown"
       @keydown.up="onArrowUp"
+      @keydown.left="onArrowLeft"
+      @keydown.right="onArrowRight"
       @keydown.esc.stop="onEsc"
     >
-      <li class="show-dropdown gl-overflow-y-auto">
-        <ul class="gl-mb-0 gl-list-none gl-pl-0">
-          <gl-dropdown-item
-            v-for="(result, i) in results"
-            ref="results"
-            :key="i"
-            role="option"
-            :aria-selected="i === arrowCounter"
-            tabindex="-1"
-            @click="selectToken(result)"
-            @keydown.enter.native="selectToken(result)"
-          >
-            <!-- @slot The suggestion result item to display. -->
-            <slot name="result" :item="result">{{ result }}</slot>
-          </gl-dropdown-item>
-        </ul>
-      </li>
-      <gl-dropdown-divider v-if="resultsLength > 0 && actionList.length > 0" />
-      <li>
-        <ul class="gl-mb-0 gl-list-none gl-pl-0">
-          <gl-dropdown-item
-            v-for="(action, i) in actionList"
-            :key="i + resultsLength"
-            role="option"
-            :aria-selected="i + resultsLength === arrowCounter"
-            tabindex="-1"
-            data-testid="combobox-action"
-            @click="selectAction(action)"
-            @keydown.enter.native="selectAction(action)"
-          >
-            <!-- @slot The action item to display. -->
-            <slot name="action" :item="action">{{ action.label }}</slot>
-          </gl-dropdown-item>
-        </ul>
-      </li>
-    </ul>
+      <div class="gl-overflow-y-auto">
+        <gl-dropdown-item
+          v-for="(result, i) in results"
+          :id="`${suggestionsId}-option-${i}`"
+          ref="results"
+          :key="i"
+          :active="i === arrowCounter"
+          tabindex="-1"
+          role="option"
+          data-testid="combobox-result"
+          @click="selectToken(result)"
+          @keydown.enter.native="selectToken(result)"
+        >
+          <!-- @slot The suggestion result item to display. -->
+          <slot name="result" :item="result">{{ result }}</slot>
+        </gl-dropdown-item>
+      </div>
+
+      <gl-dropdown-divider v-if="resultsLength > 0 && actionList.length > 0" aria-hidden="true" />
+
+      <div>
+        <gl-dropdown-item
+          v-for="(action, i) in actionList"
+          :id="`${suggestionsId}-option-${i + resultsLength}`"
+          :key="i + resultsLength"
+          :active="i + resultsLength === arrowCounter"
+          tabindex="-1"
+          role="option"
+          data-testid="combobox-action"
+          @click="selectAction(action)"
+          @keydown.enter.native="selectAction(action)"
+          @keydown.left="onArrowLeft"
+          @keydown.right="onArrowRight"
+        >
+          <!-- @slot The action item to display. -->
+          <slot name="action" :item="action">{{ action.label }}</slot>
+        </gl-dropdown-item>
+      </div>
+    </div>
   </div>
 </template>

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

@@ -93,6 +93,13 @@
     }
   }
 
+  // Used in Listbox to visually highlight the first item after search
+  &.gl-new-dropdown-item-highlighted .gl-new-dropdown-item-content {
+    color: var(--gl-dropdown-option-text-color-focus);
+    background-color: var(--gl-dropdown-option-background-color-unselected-focus);
+    @include gl-focus($inset: true);
+  }
+
   .gl-new-dropdown-item-content {
     @apply gl-rounded-base;
     @apply gl-border-0;

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

@@ -7,6 +7,7 @@ import { stopEvent } from '../../../../utils/utils';
 import {
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
+  ENTER,
   HOME,
   END,
   ARROW_DOWN,
@@ -389,6 +390,9 @@ export default {
     flattenedOptions() {
       return flattenedOptions(this.items);
     },
+    searchHasOptions() {
+      return this.flattenedOptions.length > 0 && this.searchStr;
+    },
     hasItems() {
       return this.items.length > 0;
     },
@@ -503,6 +507,16 @@ export default {
           /* Every time the list of items changes (on search),
            * the observed elements are recreated, thus we need to start obesrving them again */
           this.observeScroll();
+
+          /**
+           * Every time the list of items changes, and there is a search string,
+           * we want to visually highlight the first item
+           */
+          if (this.searchHasOptions) {
+            this.nextFocusedItemIndex = 0;
+          } else {
+            this.nextFocusedItemIndex = null;
+          }
         });
       },
     },
@@ -564,6 +578,13 @@ export default {
     onShow() {
       if (this.searchable) {
         this.focusSearchInput();
+
+        /**
+         * If the search string is not empty, highlight the first item
+         */
+        if (this.searchHasOptions) {
+          this.nextFocusedItemIndex = 0;
+        }
       } else {
         this.focusItem(this.selectedIndices[0] ?? 0, this.getFocusableListItemElements());
       }
@@ -608,6 +629,9 @@ export default {
         }
         if (this.searchable && elements.indexOf(target) === 0) {
           this.focusSearchInput();
+          if (!this.searchHasOptions) {
+            this.nextFocusedItemIndex = null;
+          }
         } else {
           this.focusNextItem(event, elements, -1);
         }
@@ -617,6 +641,11 @@ export default {
         } else {
           this.focusNextItem(event, elements, 1);
         }
+      } else if (code === ENTER && isSearchInput) {
+        if (this.searchHasOptions && elements.length > 0) {
+          this.onSelect(this.flattenedOptions[0], true);
+        }
+        stop = true;
       } else {
         stop = false;
       }
@@ -651,6 +680,9 @@ export default {
         this.onSingleSelect(item.value, isSelected);
       }
     },
+    isHighlighted(item) {
+      return this.nextFocusedItemIndex === this.flattenedOptions.indexOf(item);
+    },
     isSelected(item) {
       return this.selectedValues.some((value) => value === item.value);
     },
@@ -666,7 +698,6 @@ export default {
          */
         this.$emit('select', value);
       }
-
       this.closeAndFocus();
     },
     onMultiSelect(value, isSelected) {
@@ -866,6 +897,7 @@ export default {
           <gl-listbox-item
             :key="item.value"
             :data-testid="`listbox-item-${item.value}`"
+            :is-highlighted="isHighlighted(item)"
             :is-selected="isSelected(item)"
             :is-focused="isFocused(item)"
             :is-check-centered="isCheckCentered"
@@ -895,6 +927,7 @@ export default {
               v-for="option in item.options"
               :key="option.value"
               :data-testid="`listbox-item-${option.value}`"
+              :is-highlighted="isHighlighted(option)"
               :is-selected="isSelected(option)"
               :is-focused="isFocused(option)"
               :is-check-centered="isCheckCentered"

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

@@ -24,6 +24,11 @@ export default {
       required: false,
       default: false,
     },
+    isHighlighted: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   computed: {
     checkedClasses() {
@@ -52,7 +57,7 @@ export default {
 
 <template>
   <li
-    class="gl-new-dropdown-item"
+    :class="['gl-new-dropdown-item', { 'gl-new-dropdown-item-highlighted': isHighlighted }]"
     role="option"
     :tabindex="isFocused ? 0 : -1"
     :aria-selected="isSelected"

package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-item-button.js

@@ -18,7 +18,8 @@ export const props = makePropsConfigurable(
     activeClass: makeProp(PROP_TYPE_STRING, 'active'),
     buttonClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
     disabled: makeProp(PROP_TYPE_BOOLEAN, false),
-    variant: makeProp(PROP_TYPE_STRING)
+    variant: makeProp(PROP_TYPE_STRING),
+    role: makeProp(PROP_TYPE_STRING, 'menuitem')
   },
   NAME_DROPDOWN_ITEM_BUTTON
 )
@@ -42,9 +43,10 @@ export const BDropdownItemButton = /*#__PURE__*/ extend({
     computedAttrs() {
       return {
         ...this.bvAttrs,
-        role: 'menuitem',
+        role: this.role,
         type: 'button',
-        disabled: this.disabled
+        disabled: this.disabled,
+        'aria-selected': this.active ? 'true' : null
       }
     }
   },