@gitlab/ui 138.6.0 → 138.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "138.6.0",
+  "version": "138.6.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -151,7 +151,7 @@
     "pikaday": "^1.8.0",
     "playwright": "^1.64.0",
     "playwright-core": "^1.64.0",
-    "postcss": "8.5.29",
+    "postcss": "8.5.30",
     "postcss-loader": "8.2.1",
     "postcss-scss": "4.0.9",
     "react": "18.3.1",

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -185,7 +185,8 @@ export default {
 
       this.totalBreadcrumbsWidth = 0;
 
-      if (!this.$refs.breadcrumbs) return;
+      // The component can unmount, or drop the dropdown, while waiting for the DOM update.
+      if (!this.$refs.breadcrumbs || !this.$refs.dropdown) return;
 
       this.$refs.breadcrumbs.forEach((b, index) => {
         const width = b.$el.clientWidth;

package/src/components/base/button/button.vue

@@ -8,7 +8,7 @@ import {
 } from '../../../utils/constants';
 import { logWarning, stopEvent } from '../../../utils/utils';
 import { isSlotEmpty } from '../../../utils/is_slot_empty';
-import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
+import { SafeLinkDirective } from '../../../directives/safe_link/safe_link';
 import { glButtonConfig } from '../../../config';
 import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
@@ -20,7 +20,9 @@ export default {
     GlIcon,
     GlLoadingIcon,
   },
-  mixins: [SafeLinkMixin],
+  directives: {
+    SafeLink: SafeLinkDirective,
+  },
   props: {
     /**
      * Set the category of the button.
@@ -239,6 +241,11 @@ export default {
     },
   },
   computed: {
+    safeLinkConfig() {
+      return {
+        skipSanitization: this.isUnsafeLink,
+      };
+    },
     hasIcon() {
       return this.icon !== '';
     },

package/src/components/charts/legend/legend.scss

@@ -6,6 +6,16 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
   position: relative;
 }
 
+// series rows are native buttons, so reset the browser's default button styles
+.gl-legend-inline-series,
+.gl-legend-tabular-row {
+  font: inherit;
+  @apply gl-border-0;
+  @apply gl-bg-transparent;
+  @apply gl-p-0;
+  @apply gl-text-left;
+}
+
 .gl-chart-h-auto {
   .gl-legend-inline {
     // match the height of gl-legend-tabular (header + body)
@@ -43,11 +53,17 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
     @apply gl-items-center;
     @apply gl-pr-5;
 
+    @apply gl-rounded-default;
+
     &:hover {
       @apply gl-cursor-pointer;
       @apply gl-underline;
     }
 
+    &:focus-visible {
+      @include gl-focus($inset: true);
+    }
+
     .gl-legend-inline-series-label {
       @apply gl-mr-3;
     }
@@ -82,10 +98,15 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
 
   .gl-legend-tabular-row {
     @apply gl-flex;
+    @apply gl-w-full;
 
     &:nth-child(odd) {
       @apply gl-bg-strong;
     }
+
+    &:focus-visible {
+      @include gl-focus($inset: true);
+    }
   }
 
   .gl-legend-tabular-title-cell,

package/src/components/charts/legend/legend.vue

@@ -218,9 +218,10 @@ export default {
         class="gl-legend-inline"
         :class="{ 'gl-legend-b-fade': shouldApplyFadeClass }"
       >
-        <div
+        <button
           v-for="(series, key) in seriesInfo"
           :key="key"
+          type="button"
           :class="{
             'gl-text-subtle': disabledSeries[key],
             'gl-text-strong': !disabledSeries[key],
@@ -230,8 +231,8 @@ export default {
           }"
           class="gl-legend-inline-series"
           :style="fontStyle"
+          :aria-pressed="String(!disabledSeries[key])"
           :aria-disabled="hasOneSeriesElement || isToggleDisabled(series.name, series.disabled)"
-          role="button"
           @click="handleClick(series, key)"
           @mouseenter="handleMouseEnter(series.name)"
           @mouseleave="handleMouseLeave(series.name)"
@@ -251,7 +252,7 @@ export default {
             {{ averageText }}: {{ seriesAverage(series.data) }} · {{ maxText }}:
             {{ seriesMax(series.data) }}
           </span>
-        </div>
+        </button>
       </div>
     </template>
 
@@ -264,9 +265,10 @@ export default {
           <div class="gl-legend-tabular-header-cell">{{ currentText }}</div>
         </header>
         <section class="gl-legend-tabular-body">
-          <div
+          <button
             v-for="(series, key) in seriesInfo"
             :key="key"
+            type="button"
             :class="{
               'gl-text-subtle': disabledSeries[key],
               'gl-text-strong': !disabledSeries[key],
@@ -275,8 +277,8 @@ export default {
             }"
             class="gl-legend-tabular-row"
             :style="fontStyle"
-            :aria-disabled="isToggleDisabled(series.name, series.disabled)"
-            role="button"
+            :aria-pressed="String(!disabledSeries[key])"
+            :aria-disabled="hasOneSeriesElement || isToggleDisabled(series.name, series.disabled)"
             @click="handleClick(series, key)"
             @mouseenter="handleMouseEnter(series.name)"
             @mouseleave="handleMouseLeave(series.name)"
@@ -303,7 +305,7 @@ export default {
               <div class="gl-legend-tabular-details-cell">-</div>
               <div class="gl-legend-tabular-details-cell">-</div>
             </template>
-          </div>
+          </button>
         </section>
       </div>
     </template>

package/dist/components/mixins/safe_link_mixin.js

@@ -1,30 +0,0 @@
-import { SafeLinkDirective } from '../../directives/safe_link/safe_link';
-
-const SafeLinkMixin = {
-  directives: {
-    SafeLink: SafeLinkDirective
-  },
-  props: {
-    isUnsafeLink: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    // This prevents bootstrap-vue from setting target="_self"
-    // when target attribute is not present
-    target: {
-      type: String,
-      required: false,
-      default: null
-    }
-  },
-  computed: {
-    safeLinkConfig() {
-      return {
-        skipSanitization: this.isUnsafeLink
-      };
-    }
-  }
-};
-
-export { SafeLinkMixin };

package/src/components/mixins/safe_link_mixin.js

@@ -1,28 +0,0 @@
-import { SafeLinkDirective } from '../../directives/safe_link/safe_link';
-
-export const SafeLinkMixin = {
-  directives: {
-    SafeLink: SafeLinkDirective,
-  },
-  props: {
-    isUnsafeLink: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    // This prevents bootstrap-vue from setting target="_self"
-    // when target attribute is not present
-    target: {
-      type: String,
-      required: false,
-      default: null,
-    },
-  },
-  computed: {
-    safeLinkConfig() {
-      return {
-        skipSanitization: this.isUnsafeLink,
-      };
-    },
-  },
-};