@gitlab/ui 39.2.1 → 39.3.2

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [39.3.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v39.3.1...v39.3.2) (2022-04-27)
+
+
+### Bug Fixes
+
+* **GlButton:** Fix button text color in dark mode ([61267e3](https://gitlab.com/gitlab-org/gitlab-ui/commit/61267e3ce3c80d0592e5fe7e6458c86ab6ff3979))
+
+## [39.3.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v39.3.0...v39.3.1) (2022-04-26)
+
+
+### Bug Fixes
+
+* **GlModal:** Ensure modal dialog has an accessible name ([5b35a67](https://gitlab.com/gitlab-org/gitlab-ui/commit/5b35a6757c510740191d336b14eeed71886a2066))
+
+# [39.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v39.2.1...v39.3.0) (2022-04-26)
+
+
+### Features
+
+* **focus:** Improve :focus styles ([9fb0d1d](https://gitlab.com/gitlab-org/gitlab-ui/commit/9fb0d1d440a65dde28ae220870dfc001e2b28990))
+
 ## [39.2.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v39.2.0...v39.2.1) (2022-04-25)
 
 

package/dist/components/base/modal/modal.js

@@ -1,6 +1,6 @@
 import { BModal } from 'bootstrap-vue/esm/index.js';
 import { modalSizeOptions, modalButtonDefaults, focusableTags, COMMA } from '../../../utils/constants';
-import { focusFirstFocusableElement } from '../../../utils/utils';
+import { logWarning, focusFirstFocusableElement } from '../../../utils/utils';
 import CloseButton from '../../shared_components/close_button/close_button';
 import GlButton from '../button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -73,6 +73,11 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: ''
     }
   },
   computed: {
@@ -89,6 +94,13 @@ var script = {
     }
 
   },
+
+  mounted() {
+    if (!this.ariaLabel && !this.title) {
+      logWarning('[gl-modal]: Accessible name for modal missing. Please add title prop or aria-label.');
+    }
+  },
+
   methods: {
     show() {
       this.$refs.modal.show();
@@ -165,7 +177,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-modal',_vm._g(_vm._b({ref:"modal",attrs:{"id":_vm.modalId,"title-tag":_vm.titleTag,"size":_vm.size,"visible":_vm.visible,"lazy":"","modal-class":['gl-modal', _vm.modalClass]},on:{"shown":_vm.setFocus,"ok":_vm.primary,"cancel":_vm.canceled,"change":function($event){return _vm.$emit('change', $event)}},scopedSlots:_vm._u([{key:"default",fn:function(){return [_vm._t("default")]},proxy:true},{key:"modal-header",fn:function(){return [_vm._t("modal-header",[_c('h4',{staticClass:"modal-title"},[_vm._t("modal-title",[_vm._v(_vm._s(_vm.title))])],2)]),_vm._v(" "),_c('close-button',{ref:"close-button",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.close}})]},proxy:true},(_vm.shouldRenderModalOk)?{key:"modal-ok",fn:function(){return [_vm._t("modal-ok")]},proxy:true}:null,(_vm.shouldRenderModalCancel)?{key:"modal-cancel",fn:function(){return [_vm._t("modal-cancel")]},proxy:true}:null,(_vm.shouldRenderModalFooter)?{key:"modal-footer",fn:function(){return [_vm._t("modal-footer",[(_vm.actionCancel)?_c('gl-button',_vm._b({staticClass:"js-modal-action-cancel",on:{"click":_vm.cancel}},'gl-button',_vm.buttonBinding(_vm.actionCancel, 'actionCancel'),false),[_vm._v("\n         "+_vm._s(_vm.actionCancel.text)+"\n       ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-secondary",on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n         "+_vm._s(_vm.actionSecondary.text)+"\n       ")]):_vm._e(),_vm._v(" "),(_vm.actionPrimary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-primary",on:{"click":_vm.ok}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n         "+_vm._s(_vm.actionPrimary.text)+"\n       ")]):_vm._e()])]},proxy:true}:null],null,true)},'b-modal',_vm.$attrs,false),_vm.$listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-modal',_vm._g(_vm._b({ref:"modal",attrs:{"id":_vm.modalId,"title-tag":_vm.titleTag,"size":_vm.size,"visible":_vm.visible,"aria-label":_vm.ariaLabel || _vm.title,"lazy":"","modal-class":['gl-modal', _vm.modalClass]},on:{"shown":_vm.setFocus,"ok":_vm.primary,"cancel":_vm.canceled,"change":function($event){return _vm.$emit('change', $event)}},scopedSlots:_vm._u([{key:"default",fn:function(){return [_vm._t("default")]},proxy:true},{key:"modal-header",fn:function(){return [_vm._t("modal-header",[_c('h4',{staticClass:"modal-title"},[_vm._t("modal-title",[_vm._v(_vm._s(_vm.title))])],2)]),_vm._v(" "),_c('close-button',{ref:"close-button",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.close}})]},proxy:true},(_vm.shouldRenderModalOk)?{key:"modal-ok",fn:function(){return [_vm._t("modal-ok")]},proxy:true}:null,(_vm.shouldRenderModalCancel)?{key:"modal-cancel",fn:function(){return [_vm._t("modal-cancel")]},proxy:true}:null,(_vm.shouldRenderModalFooter)?{key:"modal-footer",fn:function(){return [_vm._t("modal-footer",[(_vm.actionCancel)?_c('gl-button',_vm._b({staticClass:"js-modal-action-cancel",on:{"click":_vm.cancel}},'gl-button',_vm.buttonBinding(_vm.actionCancel, 'actionCancel'),false),[_vm._v("\n         "+_vm._s(_vm.actionCancel.text)+"\n       ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-secondary",on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n         "+_vm._s(_vm.actionSecondary.text)+"\n       ")]):_vm._e(),_vm._v(" "),(_vm.actionPrimary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-primary",on:{"click":_vm.ok}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n         "+_vm._s(_vm.actionPrimary.text)+"\n       ")]):_vm._e()])]},proxy:true}:null],null,true)},'b-modal',_vm.$attrs,false),_vm.$listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */