@gitlab/ui 80.0.0 → 80.0.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [80.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.0.0...v80.0.1) (2024-05-02)
+
+
+### Bug Fixes
+
+* **Dropdown:** Fix disclosure dropdown a11y issues ([34d2c4d](https://gitlab.com/gitlab-org/gitlab-ui/commit/34d2c4d496f66c2c9e9129793e6a0c4189d77ec9))
+
 # [80.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v79.4.1...v80.0.0) (2024-05-01)
 
 

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

@@ -218,7 +218,9 @@ var script = {
   computed: {
     disclosureTag() {
       var _this$items;
-      if ((_this$items = this.items) !== null && _this$items !== void 0 && _this$items.length || hasOnlyListItems(this.$scopedSlots)) {
+      if ((_this$items = this.items) !== null && _this$items !== void 0 && _this$items.length ||
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+      hasOnlyListItems(this.$scopedSlots.default || this.$slots.default)) {
         return 'ul';
       }
       return 'div';

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

@@ -1,4 +1,6 @@
+import Vue from 'vue';
 import isFunction from 'lodash/isFunction';
+import isString from 'lodash/isString';
 import { DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
 
 const itemValidator = item => {
@@ -17,23 +19,34 @@ const isValidSlotTagVue2 = vNode => {
   var _vNode$componentOptio;
   return Boolean(vNode) && isListItem(((_vNode$componentOptio = vNode.componentOptions) === null || _vNode$componentOptio === void 0 ? void 0 : _vNode$componentOptio.tag) || vNode.tag);
 };
-const isValidSlotTag = vNode => {
+const isValidSlotTagVue3 = vNode => {
   var _vNode$type;
   return [DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME].includes((_vNode$type = vNode.type) === null || _vNode$type === void 0 ? void 0 : _vNode$type.name) || vNode.type === 'li';
 };
-const hasOnlyListItems = _ref => {
-  let {
-    default: defaultSlot
-  } = _ref;
-  if (!isFunction(defaultSlot)) {
-    return false;
-  }
+const hasOnlyListItemsVue2 = defaultSlot => {
   const nodes = defaultSlot();
   if (!Array.isArray(nodes)) {
     return false;
   }
   const tags = nodes.filter(vNode => vNode.tag);
-  return tags.length && tags.every(tag => isValidSlotTag(tag) || isValidSlotTagVue2(tag));
+  return tags.length && tags.every(tag => isValidSlotTagVue2(tag));
+};
+const hasOnlyListItemsVue3 = defaultSlot => {
+  const nodes = defaultSlot();
+  const fragment = nodes.find(node => Array.isArray(node.children) && node.children.length);
+  const targetNodes = fragment ? fragment.children : nodes;
+  return targetNodes
+  // Remove empty text vNodes
+  .filter(vNode => !isString(vNode.text) || vNode.text.trim().length > 0).every(vNode => isValidSlotTagVue3(vNode));
+};
+const hasOnlyListItems = defaultSlot => {
+  if (!isFunction(defaultSlot)) {
+    return false;
+  }
+  if (Vue.version.startsWith('3')) {
+    return hasOnlyListItemsVue3(defaultSlot);
+  }
+  return hasOnlyListItemsVue2(defaultSlot);
 };
 
 export { hasOnlyListItems, isGroup, isItem, itemsValidator };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 16:11:38 GMT
+ * Generated on Thu, 02 May 2024 10:07:41 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 16:11:38 GMT
+ * Generated on Thu, 02 May 2024 10:07:41 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 16:11:38 GMT
+ * Generated on Thu, 02 May 2024 10:07:41 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 May 2024 16:11:38 GMT
+ * Generated on Thu, 02 May 2024 10:07:41 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 01 May 2024 16:11:38 GMT
+// Generated on Thu, 02 May 2024 10:07:41 GMT
 
 $gl-text-color-disabled: #89888d !default; // Used for disabled text.
 $gl-text-color-link: #63a6e9 !default; // Used for default text links.

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 01 May 2024 16:11:38 GMT
+// Generated on Thu, 02 May 2024 10:07:41 GMT
 
 $gl-text-color-disabled: #89888d !default; // Used for disabled text.
 $gl-text-color-success: #217645 !default; // Used for text indicating success or validity.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "80.0.0",
+  "version": "80.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -131,7 +131,7 @@
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
     "bootstrap": "4.6.2",
-    "cypress": "13.8.0",
+    "cypress": "13.8.1",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",

package/src/components/base/form/form_select/form_select.stories.js

@@ -1,25 +1,32 @@
-import { formStateOptions, formInputWidths } from '../../../../utils/constants';
-import GlFormSelect from './form_select.vue';
+import uniqueId from 'lodash/uniqueId';
+import { formInputWidths, formStateOptions } from '../../../../utils/constants';
+import GlFormGroup from '../form_group/form_group.vue';
 import { formSelectOptions } from './constants';
 import readme from './form_select.md';
+import GlFormSelect from './form_select.vue';
 
 const data = () => ({
   selected: 'Pizza',
 });
 
 const template = `
-<gl-form-select
-  v-model="selected"
-  :width="width"
-  :disabled="disabled"
-  :state="state"
-  :multiple="multiple"
-  :selectSize="selectSize"
-  :options="options">
-</gl-form-select>
+<gl-form-group :label="labelText" :label-for="inputId">
+  <gl-form-select
+    :id="inputId"
+    v-model="selected"
+    :width="width"
+    :disabled="disabled"
+    :state="state"
+    :multiple="multiple"
+    :selectSize="selectSize"
+    :options="options">
+  </gl-form-select>
+</gl-form-group>
 `;
 
 const generateProps = ({
+  inputId = uniqueId('input-'),
+  labelText = 'Label',
   width = null,
   state = null,
   disabled = false,
@@ -27,6 +34,8 @@ const generateProps = ({
   selectSize = 1,
   options = formSelectOptions,
 } = {}) => ({
+  inputId,
+  labelText,
   width,
   disabled,
   state,
@@ -36,7 +45,7 @@ const generateProps = ({
 });
 
 const Template = (args) => ({
-  components: { GlFormSelect },
+  components: { GlFormSelect, GlFormGroup },
   props: Object.keys(args),
   data,
   template,
@@ -55,7 +64,7 @@ export const InvalidState = Template.bind({});
 InvalidState.args = generateProps({ state: false });
 
 export const WithTruncation = (args, { argTypes }) => ({
-  components: { GlFormSelect },
+  components: { GlFormSelect, GlFormGroup },
   props: Object.keys(argTypes),
   data() {
     return {
@@ -78,7 +87,7 @@ WithTruncation.args = generateProps({
 });
 
 export const Widths = (args, { argTypes }) => ({
-  components: { GlFormSelect },
+  components: { GlFormSelect, GlFormGroup },
   props: Object.keys(argTypes),
   data() {
     return {
@@ -87,13 +96,14 @@ export const Widths = (args, { argTypes }) => ({
   },
   template: `
       <div>
-        <div v-for="(width, name) in formInputWidths" :key="width" class="gl-mb-4">
+        <gl-form-group v-for="(width, name) in formInputWidths" :key="width" :label="name" :label-for="'width-' + width">
           <gl-form-select
+            :id="'width-' + width"
             v-model="name"
             :width="width"
             :options="[{ value: name, text: name }]">
           </gl-form-select>
-        </div>
+        </gl-form-group>
       </div>`,
 });
 Widths.args = generateProps();

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

@@ -201,7 +201,7 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
           <template #list-item>
             <span class="gl-display-flex gl-flex-direction-column">
               <span class="gl-font-weight-bold gl-white-space-nowrap">Orange Fox</span>
-              <span class="gl-text-gray-400">@thefox</span>
+              <span class="gl-text-gray-600">@thefox</span>
             </span>
           </template>
         </gl-disclosure-dropdown-item>

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -237,7 +237,11 @@ export default {
   },
   computed: {
     disclosureTag() {
-      if (this.items?.length || hasOnlyListItems(this.$scopedSlots)) {
+      if (
+        this.items?.length ||
+        // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+        hasOnlyListItems(this.$scopedSlots.default || this.$slots.default)
+      ) {
         return 'ul';
       }
       return 'div';

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

@@ -1,4 +1,6 @@
+import Vue from 'vue';
 import isFunction from 'lodash/isFunction';
+import isString from 'lodash/isString';
 import { DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
 
 const itemValidator = (item) => item?.text?.length > 0 && !Array.isArray(item?.items);
@@ -21,17 +23,14 @@ const isListItem = (tag) =>
 const isValidSlotTagVue2 = (vNode) =>
   Boolean(vNode) && isListItem(vNode.componentOptions?.tag || vNode.tag);
 
-const isValidSlotTag = (vNode) => {
+const isValidSlotTagVue3 = (vNode) => {
   return (
     [DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME].includes(vNode.type?.name) ||
     vNode.type === 'li'
   );
 };
 
-const hasOnlyListItems = ({ default: defaultSlot }) => {
-  if (!isFunction(defaultSlot)) {
-    return false;
-  }
+const hasOnlyListItemsVue2 = (defaultSlot) => {
   const nodes = defaultSlot();
 
   if (!Array.isArray(nodes)) {
@@ -40,7 +39,32 @@ const hasOnlyListItems = ({ default: defaultSlot }) => {
 
   const tags = nodes.filter((vNode) => vNode.tag);
 
-  return tags.length && tags.every((tag) => isValidSlotTag(tag) || isValidSlotTagVue2(tag));
+  return tags.length && tags.every((tag) => isValidSlotTagVue2(tag));
+};
+
+const hasOnlyListItemsVue3 = (defaultSlot) => {
+  const nodes = defaultSlot();
+  const fragment = nodes.find((node) => Array.isArray(node.children) && node.children.length);
+  const targetNodes = fragment ? fragment.children : nodes;
+
+  return (
+    targetNodes
+      // Remove empty text vNodes
+      .filter((vNode) => !isString(vNode.text) || vNode.text.trim().length > 0)
+      .every((vNode) => isValidSlotTagVue3(vNode))
+  );
+};
+
+const hasOnlyListItems = (defaultSlot) => {
+  if (!isFunction(defaultSlot)) {
+    return false;
+  }
+
+  if (Vue.version.startsWith('3')) {
+    return hasOnlyListItemsVue3(defaultSlot);
+  }
+
+  return hasOnlyListItemsVue2(defaultSlot);
 };
 
 export { itemsValidator, isItem, isGroup, hasOnlyListItems };

package/src/components/base/table/table.md

@@ -27,13 +27,13 @@ pagination, use `GlTableLite` which offers a subset of `GlTable` features.
     fields: [
       {
         key: 'column_one',
-        label: __('Column One'),
+        label: __('First column'),
         thClass: 'w-60p',
         tdClass: 'table-col d-flex'
       },
       {
         key: 'col_2',
-        label: __('Column 2'),
+        label: __('Second column'),
         thClass: 'w-15p',
         tdClass: 'table-col d-flex'
       },
@@ -43,7 +43,7 @@ pagination, use `GlTableLite` which offers a subset of `GlTable` features.
 <template>
   <gl-table :items="items" :fields="$options.fields">
     <template #head(column_one)>
-      <div>Column One</div>
+      <div>First column</div>
       <!-- This is the column head for the first object in `fields` -->
     </template>
 

package/src/components/base/table/table.stories.js

@@ -63,20 +63,20 @@ export const Default = (args, { argTypes }) => ({
   fields: [
     {
       key: 'column_one',
-      label: 'Column One',
+      label: 'First column',
       variant: 'secondary',
       sortable: true,
       isRowHeader: false,
     },
     {
       key: 'col_2',
-      label: 'Column 2',
+      label: 'Second column',
       formatter: (value) => value,
     },
     {
       key: 'col_three',
       sortable: true,
-      label: 'Column 2',
+      label: 'Third column',
       formatter: (value) => value,
       thClass: 'gl-text-right',
       tdClass: 'gl-text-right',

package/src/components/base/table_lite/table_lite.md

@@ -37,13 +37,13 @@ export default {
   fields: [
     {
       key: 'column_one',
-      label: __('Column One'),
+      label: __('First column'),
       thClass: 'w-60p',
       tdClass: 'table-col d-flex'
     },
     {
       key: 'col_2',
-      label: __('Column 2'),
+      label: __('Second column'),
       thClass: 'w-15p',
       tdClass: 'table-col d-flex'
     },
@@ -56,7 +56,7 @@ export default {
     :fields="$options.fields"
   >
     <template #head(column_one)>
-      <div>Column One</div><!-- This is the column head for the first object in `fields` -->
+      <div>First column</div><!-- This is the column head for the first object in `fields` -->
     </template>
 
     <template #cell(column_one)>

package/src/components/base/table_lite/table_lite.stories.js

@@ -4,13 +4,13 @@ import GlTableLite from './table_lite.vue';
 const fieldsMock = [
   {
     key: 'column_one',
-    label: 'Column One',
+    label: 'First column',
     thClass: 'w-60p',
     tdClass: 'table-col',
   },
   {
     key: 'column_two',
-    label: 'Column Two',
+    label: 'Second column',
     thClass: 'w-60p',
     tdClass: 'table-col',
   },