@gitlab/ui 129.3.1 → 129.4.0

package/dist/components/base/alert/alert.js

@@ -12,6 +12,7 @@ var script = {
     CloseButton,
     GlButton
   },
+  expose: ['focus'],
   props: {
     /**
      * The title text to display in the alert header.
@@ -116,6 +117,11 @@ var script = {
       }
     }
   },
+  data() {
+    return {
+      hasProgrammaticFocus: false
+    };
+  },
   computed: {
     headingComponent() {
       return `h${this.headerLevel}`;
@@ -175,6 +181,13 @@ var script = {
     }
   },
   methods: {
+    /**
+     * Focus the alert.
+     */
+    focus() {
+      this.$el.focus();
+      this.hasProgrammaticFocus = true;
+    },
     primaryButtonClicked(event) {
       /**
        * Emitted when the primary action button is clicked.
@@ -214,7 +227,8 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
     { 'gl-alert-sticky': _vm.sticky },
     { 'gl-alert-not-dismissible': !_vm.dismissible },
     { 'gl-alert-has-title': !!_vm.title },
-    _vm.variantClass ],attrs:{"role":_vm.role,"aria-live":_vm.politeness}},[_c('div',{staticClass:"gl-alert-icon-container"},[_c('gl-icon',{staticClass:"gl-alert-icon",attrs:{"name":_vm.iconName}})],1),_vm._v(" "),_c('div',{staticClass:"gl-alert-content"},[(_vm.title)?_c(_vm.headingComponent,{tag:"component",staticClass:"gl-alert-title"},[_vm._v(_vm._s(_vm.title))]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-body"},[_vm._t("default")],2),_vm._v(" "),(_vm.shouldRenderActions)?_c('div',{staticClass:"gl-alert-actions"},[_vm._t("actions",function(){return _vm._l((_vm.actionButtons),function(actionButton,index){return _c('gl-button',_vm._g(_vm._b({key:index,staticClass:"gl-alert-action"},'gl-button',actionButton.attrs,false),actionButton.listeners),[_vm._v("\n          "+_vm._s(actionButton.text)+"\n        ")])})})],2):_vm._e()],1),_vm._v(" "),(_vm.dismissible)?_c('close-button',{ref:"dismiss",staticClass:"gl-dismiss-btn",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e()],1)};
+    { 'gl-focus': _vm.hasProgrammaticFocus },
+    _vm.variantClass ],attrs:{"role":_vm.role,"aria-live":_vm.politeness,"tabindex":"-1"},on:{"blur":function($event){_vm.hasProgrammaticFocus = false;}}},[_c('div',{staticClass:"gl-alert-icon-container"},[_c('gl-icon',{staticClass:"gl-alert-icon",attrs:{"name":_vm.iconName}})],1),_vm._v(" "),_c('div',{staticClass:"gl-alert-content"},[(_vm.title)?_c(_vm.headingComponent,{tag:"component",staticClass:"gl-alert-title"},[_vm._v(_vm._s(_vm.title))]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-body"},[_vm._t("default")],2),_vm._v(" "),(_vm.shouldRenderActions)?_c('div',{staticClass:"gl-alert-actions"},[_vm._t("actions",function(){return _vm._l((_vm.actionButtons),function(actionButton,index){return _c('gl-button',_vm._g(_vm._b({key:index,staticClass:"gl-alert-action"},'gl-button',actionButton.attrs,false),actionButton.listeners),[_vm._v("\n          "+_vm._s(actionButton.text)+"\n        ")])})})],2):_vm._e()],1),_vm._v(" "),(_vm.dismissible)?_c('close-button',{ref:"dismiss",staticClass:"gl-dismiss-btn",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/token_selector/token_selector.js

@@ -1,4 +1,5 @@
 import { uniqueId } from 'lodash-es';
+import { logWarning } from '../../../utils/utils';
 import { tokensValidator } from './helpers';
 import GlTokenContainer from './token_container';
 import GlTokenSelectorDropdown from './token_selector_dropdown';
@@ -34,7 +35,7 @@ var script = {
       default: false
     },
     /**
-     * Shows 'Add new token option' in dropdown even if results are present, requires allowUserDefinedTokens to be true
+     * Shows "Add new token option" in dropdown even if results are present. Requires `allowUserDefinedTokens` to be `true`.
      */
     showAddNewAlways: {
       type: Boolean,
@@ -83,7 +84,7 @@ var script = {
     },
     /**
      * The `aria-label` attribute value for the underlying `input` element.
-     * Input must have an aria-label or aria-labelledby prop or it will be inaccessible.
+     * Input must have an `aria-label` or `aria-labelledby` prop or it will be inaccessible.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label
      */
@@ -112,7 +113,8 @@ var script = {
       default: null
     },
     /**
-     * HTML attributes to add to the text input. Helpful for adding `data-testid` attributes
+     * HTML attributes to add to the text input. Helpful for adding `data-testid` and similar attributes.
+     * Do not pass `aria-label` or `aria-labelledby` into this object. Use `ariaLabel` or `ariaLabelledby` prop instead.
      */
     textInputAttrs: {
       type: Object,
@@ -246,6 +248,15 @@ var script = {
     // Each instance must have a unique ID for proper ARIA relationships
     this.uniqueId = uniqueId('token-selector-');
   },
+  mounted() {
+    var _this$textInputAttrs;
+    const hasLabel = this.ariaLabel || ((_this$textInputAttrs = this.textInputAttrs) === null || _this$textInputAttrs === void 0 ? void 0 : _this$textInputAttrs['aria-label']) || this.ariaLabelledby;
+    if (!hasLabel) {
+      logWarning('The text input needs an accessible label. ' + 'Provide an `id` and a sibling `<label>` with a `for` attribute. Or add an `aria-labelledby` or `aria-label` prop to ensure the component is accessible. ' + 'See https://design.gitlab.com/components/token/#accessibility', {
+        name: 'GlTokenSelector'
+      });
+    }
+  },
   methods: {
     handleFocus(event) {
       /**