@gitlab/ui 137.1.0 → 137.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "137.1.0",
+  "version": "137.1.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -147,10 +147,10 @@
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "11.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "30.5.0",
-    "jest-circus": "30.5.0",
-    "jest-environment-jsdom": "30.5.0",
-    "jest-environment-node": "30.5.0",
+    "jest": "30.5.1",
+    "jest-circus": "30.5.1",
+    "jest-environment-jsdom": "30.5.1",
+    "jest-environment-node": "30.5.1",
     "jest-image-snapshot": "^6.5.2",
     "merge-cobertura": "^1.0.9",
     "mockdate": "^3.0.5",
@@ -169,7 +169,7 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.103.1",
+    "sass": "^1.104.0",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
     "start-server-and-test": "^2.1.5",

package/src/components/base/link/link.scss

@@ -29,7 +29,7 @@
 }
 
 .gl-link-external::after {
-  content: " ↗";
+  content: " ↗" / attr(data-alt);
   font-size: 1em;
 }
 

package/src/components/base/link/link.vue

@@ -1,6 +1,7 @@
 <script>
 import { isFunction, isString, isObject, toString, isBoolean, concat } from 'lodash-es';
 import { SafeLinkDirective, isExternalURL } from '../../../directives/safe_link/safe_link';
+import { translate } from '../../../utils/i18n';
 import { stopEvent } from '../../../utils/utils';
 import { buildQueryString } from '../../../utils/url_utils';
 import { isVue3, safeVueInstance } from '../../../utils/vue_utils';
@@ -161,6 +162,11 @@ export default {
     isVue3RouterLink() {
       return this.tag === VUE_ROUTER_LINK_TAG && isVue3(this);
     },
+    externalLinkLabel() {
+      return this.shouldShowExternalIcon
+        ? translate('GlLink.externalLink', '(external link)')
+        : undefined;
+    },
     shouldShowExternalIcon() {
       const allowedVariants = [linkVariantInline, linkVariantMeta, null]; // null represents default/UI variant
       return (
@@ -311,6 +317,7 @@ export default {
       :class="[computedClass, { [activeClass]: isActive, [exactActiveClass]: isExactActive }]"
       :href="routerLinkHref"
       v-bind="$attrs"
+      :data-alt="externalLinkLabel"
       v-on="computedListeners"
       @click="onClick($event, navigate)"
     >
@@ -323,6 +330,7 @@ export default {
     v-safe-link:[safeLinkConfig]
     v-bind="computedProps"
     :class="computedClass"
+    :data-alt="externalLinkLabel"
     v-on="computedListeners"
     @click.native="onClick"
   >
@@ -334,6 +342,7 @@ export default {
     v-safe-link:[safeLinkConfig]
     v-bind="computedProps"
     :class="computedClass"
+    :data-alt="externalLinkLabel"
     v-on="computedListeners"
     @click="onClick"
   >

package/src/components/base/sorting/sorting.vue

@@ -102,6 +102,7 @@ export default {
   data() {
     return {
       sortingListboxId: uniqueId('sorting-listbox-'),
+      toggleId: uniqueId('sorting-toggle-'),
     };
   },
   computed: {
@@ -181,7 +182,8 @@ export default {
       :class="dropdownClass"
       placement="bottom-end"
       :block="block"
-      :toggle-aria-labelled-by="sortingListboxId"
+      :toggle-id="toggleId"
+      :toggle-aria-labelled-by="`${sortingListboxId} ${toggleId}`"
       @select="onSortByChanged"
     />
     <span :id="sortingListboxId" class="gl-sr-only">{{ sortingListboxLabel }}</span>

package/translations.js

@@ -27,6 +27,7 @@ export default {
   'GlKeysetPagination.nextText': 'Next',
   'GlKeysetPagination.prevText': 'Previous',
   'GlLabel.removeButtonAriaLabel': 'Remove label - %{label}',
+  'GlLink.externalLink': '(external link)',
   'GlModal.closeButtonTitle': 'Close',
   'GlMultiStepFormTemplate.stepX': 'Step %{currentStep}',
   'GlMultiStepFormTemplate.stepXofY': 'Step %{currentStep} of %{stepsTotal}',