@gitlab/ui 137.1.0 → 137.1.1

package/package.json

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

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,9 @@ export default {
     isVue3RouterLink() {
       return this.tag === VUE_ROUTER_LINK_TAG && isVue3(this);
     },
+    externalLinkLabel() {
+      return translate('GlLink.externalLink', '(external link)');
+    },
     shouldShowExternalIcon() {
       const allowedVariants = [linkVariantInline, linkVariantMeta, null]; // null represents default/UI variant
       return (
@@ -311,6 +315,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 +328,7 @@ export default {
     v-safe-link:[safeLinkConfig]
     v-bind="computedProps"
     :class="computedClass"
+    :data-alt="externalLinkLabel"
     v-on="computedListeners"
     @click.native="onClick"
   >
@@ -334,6 +340,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}',