@gitlab/ui 44.0.0 → 44.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [44.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v44.0.0...v44.1.0) (2022-10-05)
+
+
+### Features
+
+* **GlAlert:** add aria-live attribute ([89b866b](https://gitlab.com/gitlab-org/gitlab-ui/commit/89b866b771514bc6db25108b4defaed8df53c052))
+
 # [44.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v43.21.0...v44.0.0) (2022-10-05)
 
 

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

@@ -93,6 +93,14 @@ var script = {
     }
   },
   computed: {
+    ariaLive() {
+      if ([alertVariantOptions.danger, alertVariantOptions.warning].includes(this.variant)) {
+        return 'assertive';
+      }
+
+      return 'polite';
+    },
+
     iconName() {
       return alertVariantIconMap[this.variant];
     },
@@ -187,7 +195,7 @@ 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-no-icon': !_vm.showIcon },
-    _vm.variantClass ]},[(_vm.showIcon)?_c('gl-icon',{class:{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !_vm.title },attrs:{"name":_vm.iconName}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-content",attrs:{"role":"alert"}},[(_vm.title)?_c('h2',{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()]),_vm._v(" "),(_vm.dismissible)?_c('close-button',{ref:"dismiss",staticClass:"gl-dismiss-btn",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e()],1)};
+    _vm.variantClass ]},[(_vm.showIcon)?_c('gl-icon',{class:{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !_vm.title },attrs:{"name":_vm.iconName}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-content",attrs:{"role":"alert","aria-live":_vm.ariaLive}},[(_vm.title)?_c('h2',{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()]),_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/package.json

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

package/src/components/base/alert/alert.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { buttonCategoryOptions } from '../../../utils/constants';
+import { alertVariantOptions, buttonCategoryOptions } from '../../../utils/constants';
 import GlAlert from './alert.vue';
 
 const DummyComponent = {
@@ -191,4 +191,24 @@ describe('Alert component', () => {
       });
     });
   });
+
+  describe('aria-live', () => {
+    it.each([alertVariantOptions.danger, alertVariantOptions.warning])(
+      'for %p variant, has aria-live assertive attribute',
+      (variant) => {
+        createComponent({ propsData: { variant } });
+
+        expect(wrapper.find('[aria-live=assertive').exists()).toBe(true);
+      }
+    );
+
+    it.each([alertVariantOptions.info, alertVariantOptions.success, alertVariantOptions.tip])(
+      'for %p variant, has aria-live polite attribute',
+      (variant) => {
+        createComponent({ propsData: { variant } });
+
+        expect(wrapper.find('[aria-live=polite]').exists()).toBe(true);
+      }
+    );
+  });
 });

package/src/components/base/alert/alert.vue

@@ -90,6 +90,13 @@ export default {
     },
   },
   computed: {
+    ariaLive() {
+      if ([alertVariantOptions.danger, alertVariantOptions.warning].includes(this.variant)) {
+        return 'assertive';
+      }
+
+      return 'polite';
+    },
     iconName() {
       return alertVariantIconMap[this.variant];
     },
@@ -185,7 +192,7 @@ export default {
       :class="{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !title }"
     />
 
-    <div class="gl-alert-content" role="alert">
+    <div class="gl-alert-content" role="alert" :aria-live="ariaLive">
       <h2 v-if="title" class="gl-alert-title">{{ title }}</h2>
 
       <div class="gl-alert-body">