@dialpad/dialtone-vue 3.20.0 → 3.21.0

package/dist/dialtone-vue.common.js

@@ -25,7 +25,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".enter-active,.leave-active{overflow:h
 
 /***/ }),
 
-/***/ 158:
+/***/ 78:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -169,7 +169,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-section[tabindex=\"-1\"]:focu
 
 /***/ }),
 
-/***/ 553:
+/***/ 674:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -542,19 +542,19 @@ var update = add("79334d9e", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 286:
+/***/ 438:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(158);
+var content = __webpack_require__(78);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("03a34d74", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("06fe8c46", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -638,19 +638,19 @@ var update = add("4d925410", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 138:
+/***/ 925:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(553);
+var content = __webpack_require__(674);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("c2c45b66", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("a4b9582c", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -1688,11 +1688,11 @@ const badge_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(badgevue_typ
 ;// CONCATENATED MODULE: ./components/badge/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/banner/banner.vue?vue&type=template&id=d449ad4a
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/banner/banner.vue?vue&type=template&id=a3c41ca8
 
-const bannervue_type_template_id_d449ad4a_hoisted_1 = ["role"];
+const bannervue_type_template_id_a3c41ca8_hoisted_1 = ["role"];
 const _hoisted_2 = ["aria-labelledby", "aria-describedby"];
-function bannervue_type_template_id_d449ad4a_render(_ctx, _cache, $props, $setup, $data, $options) {
+function bannervue_type_template_id_a3c41ca8_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_notice_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-notice-icon");
 
   const _component_dt_notice_content = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-notice-content");
@@ -1727,13 +1727,15 @@ function bannervue_type_template_id_d449ad4a_render(_ctx, _cache, $props, $setup
   }, 8, ["title-id", "content-id", "title"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_notice_action, {
     "hide-close": $props.hideClose,
     "close-button-props": $props.closeButtonProps,
+    "visually-hidden-close": _ctx.visuallyHiddenClose,
+    "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
     onClose: _cache[0] || (_cache[0] = $event => _ctx.$emit('close'))
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "action")]),
     _: 3
-  }, 8, ["hide-close", "close-button-props"])], 10, _hoisted_2)], 46, bannervue_type_template_id_d449ad4a_hoisted_1);
+  }, 8, ["hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])], 10, _hoisted_2)], 46, bannervue_type_template_id_a3c41ca8_hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/banner/banner.vue?vue&type=template&id=d449ad4a
+;// CONCATENATED MODULE: ./components/banner/banner.vue?vue&type=template&id=a3c41ca8
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/notice/notice_icon.vue?vue&type=template&id=5544041e
 
@@ -2008,20 +2010,23 @@ function notice_contentvue_type_template_id_45f8172a_render(_ctx, _cache, $props
 const notice_content_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(notice_contentvue_type_script_lang_js, [['render',notice_contentvue_type_template_id_45f8172a_render]])
 
 /* harmony default export */ const notice_content = (notice_content_exports_);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/notice/notice_action.vue?vue&type=template&id=631bfaf8
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/notice/notice_action.vue?vue&type=template&id=3fb27eac
 
-const notice_actionvue_type_template_id_631bfaf8_hoisted_1 = {
+const notice_actionvue_type_template_id_3fb27eac_hoisted_1 = {
   class: "d-notice__actions",
   "data-qa": "notice-content-actions"
 };
-function notice_actionvue_type_template_id_631bfaf8_render(_ctx, _cache, $props, $setup, $data, $options) {
+function notice_actionvue_type_template_id_3fb27eac_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_icon_close = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-close");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", notice_actionvue_type_template_id_631bfaf8_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default"), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  const _component_sr_only_close_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("sr-only-close-button");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", notice_actionvue_type_template_id_3fb27eac_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default"), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 0,
     ref: "closeButton",
+    "data-qa": "dt-notice-action-close-button",
     size: "sm",
     importance: "clear",
     circle: "",
@@ -2031,9 +2036,13 @@ function notice_actionvue_type_template_id_631bfaf8_render(_ctx, _cache, $props,
   }), {
     icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_close)]),
     _: 1
-  }, 16, ["aria-label", "onClick"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
+  }, 16, ["aria-label", "onClick"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), _ctx.showVisuallyHiddenClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_sr_only_close_button, {
+    key: 1,
+    "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
+    onClose: $options.close
+  }, null, 8, ["visually-hidden-close-label", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/notice/notice_action.vue?vue&type=template&id=631bfaf8
+;// CONCATENATED MODULE: ./components/notice/notice_action.vue?vue&type=template&id=3fb27eac
 
 ;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconClose.vue?vue&type=template&id=4ef5457b
 
@@ -2447,15 +2456,130 @@ const LINK_KIND_MODIFIERS = {
 const button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(buttonvue_type_script_lang_js, [['render',buttonvue_type_template_id_6d10e472_render]])
 
 /* harmony default export */ const button_button = (button_exports_);
+;// CONCATENATED MODULE: ./common/mixins/sr_only_close_button.js
+/**
+ * @displayName Sr-Only close button mixin
+ */
+/* harmony default export */ const sr_only_close_button = ({
+  props: {
+    /**
+     * If true, a hidden close button is included for screen readers
+     * @values true, false
+     */
+    visuallyHiddenClose: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Label for the visually hidden close button
+     * Required if visuallyHiddenClose is set to `true`
+     */
+    visuallyHiddenCloseLabel: {
+      type: String,
+      default: null
+    }
+  },
+  watch: {
+    $props: {
+      immediate: true,
+      deep: true,
+
+      handler() {
+        this.validateVisuallyHiddenCloseProps();
+      }
+
+    }
+  },
+  computed: {
+    showVisuallyHiddenClose() {
+      return this.visuallyHiddenClose && this.visuallyHiddenCloseLabel != null;
+    }
+
+  },
+  methods: {
+    validateVisuallyHiddenCloseProps() {
+      if (this.visuallyHiddenClose && !this.visuallyHiddenCloseLabel) {
+        console.error(`If visuallyHiddenClose prop is true, the component includes
+           a visually hidden close button and you must set the visuallyHiddenCloseLabel prop.`);
+      }
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./common/sr_only_close_button.vue?vue&type=template&id=3480ff70
+
+function sr_only_close_buttonvue_type_template_id_3480ff70_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_icon_close = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-close");
+
+  const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, {
+    id: "sr-only-close-button",
+    "data-qa": "dt-sr-only-close-button",
+    class: "d-vi-visible-sr",
+    "aria-label": $props.visuallyHiddenCloseLabel,
+    onClick: $options.close,
+    onKeydown: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($options.close, ["prevent", "stop"]), ["space"])
+  }, {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_close)]),
+    _: 1
+  }, 8, ["aria-label", "onClick", "onKeydown"]);
+}
+;// CONCATENATED MODULE: ./common/sr_only_close_button.vue?vue&type=template&id=3480ff70
+
+;// CONCATENATED MODULE: ./components/button/index.js
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./common/sr_only_close_button.vue?vue&type=script&lang=js
+
+
+/* harmony default export */ const sr_only_close_buttonvue_type_script_lang_js = ({
+  name: 'SrOnlyCloseButton',
+  components: {
+    IconClose: IconClose,
+    DtButton: button_button
+  },
+  props: {
+    /**
+     * Label for the visually hidden close button
+     * Required if visuallyHiddenClose is set to `true`
+     */
+    visuallyHiddenCloseLabel: {
+      type: String,
+      default: null
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('close');
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./common/sr_only_close_button.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./common/sr_only_close_button.vue
+
+
+
+
+;
+const sr_only_close_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(sr_only_close_buttonvue_type_script_lang_js, [['render',sr_only_close_buttonvue_type_template_id_3480ff70_render]])
+
+/* harmony default export */ const common_sr_only_close_button = (sr_only_close_button_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/notice/notice_action.vue?vue&type=script&lang=js
 
 
+
+
 /* harmony default export */ const notice_actionvue_type_script_lang_js = ({
   name: 'DtNoticeAction',
   components: {
     IconClose: IconClose,
-    DtButton: button_button
+    DtButton: button_button,
+    SrOnlyCloseButton: common_sr_only_close_button
   },
+  mixins: [sr_only_close_button],
   props: {
     /**
      * Props for the notice close button.
@@ -2481,6 +2605,17 @@ const button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(buttonvue_t
    * @event close
    */
   'close'],
+  watch: {
+    $props: {
+      immediate: true,
+      deep: true,
+
+      handler() {
+        this.validateProps();
+      }
+
+    }
+  },
 
   created() {
     if (!this.hideClose && !this.closeButtonProps.ariaLabel) {
@@ -2503,6 +2638,12 @@ const button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(buttonvue_t
   methods: {
     close() {
       this.$emit('close');
+    },
+
+    validateProps() {
+      if (this.hideClose && !this.visuallyHiddenClose) {
+        console.error('If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props ' + 'need to be set so the component always includes a close button');
+      }
     }
 
   }
@@ -2515,7 +2656,7 @@ const button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(buttonvue_t
 
 
 ;
-const notice_action_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(notice_actionvue_type_script_lang_js, [['render',notice_actionvue_type_template_id_631bfaf8_render]])
+const notice_action_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(notice_actionvue_type_script_lang_js, [['render',notice_actionvue_type_template_id_3fb27eac_render]])
 
 /* harmony default export */ const notice_action = (notice_action_exports_);
 ;// CONCATENATED MODULE: ./common/mixins/modal.js
@@ -2643,6 +2784,7 @@ const focusableElementsList = `button,[href],input,select,textarea,details,[tabi
 
 
 
+
 /**
  * Banners are a type of notice, delivering system and engagement messaging.
  * These are highly intrusive notices and should be used sparingly and appropriately.
@@ -2656,7 +2798,7 @@ const focusableElementsList = `button,[href],input,select,textarea,details,[tabi
     DtNoticeContent: notice_content,
     DtNoticeAction: notice_action
   },
-  mixins: [modal],
+  mixins: [modal, sr_only_close_button],
   props: {
     /**
      * Sets an ID on the title element of the component. Useful for aria-describedby
@@ -2835,7 +2977,7 @@ const focusableElementsList = `button,[href],input,select,textarea,details,[tabi
 
 
 ;
-const banner_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(bannervue_type_script_lang_js, [['render',bannervue_type_template_id_d449ad4a_render]])
+const banner_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(bannervue_type_script_lang_js, [['render',bannervue_type_template_id_a3c41ca8_render]])
 
 /* harmony default export */ const banner = (banner_exports_);
 ;// CONCATENATED MODULE: ./components/banner/index.js
@@ -3088,8 +3230,6 @@ const breadcrumbs_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(breadc
 
 
 
-;// CONCATENATED MODULE: ./components/button/index.js
-
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/button_group/button_group.vue?vue&type=template&id=26eb52e6
 
 function button_groupvue_type_template_id_26eb52e6_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -3508,7 +3648,7 @@ const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced
           return null;
         }
 
-        return Array.from(listElement.querySelectorAll(`[role="${listItemRole}"]`));
+        return Array.from(listElement.querySelectorAll(`[role="${listItemRole}"], #sr-only-close-button`));
       },
 
       onUpKey() {
@@ -3615,7 +3755,7 @@ const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced
           return;
         }
 
-        const listItems = Array.from(listElement.querySelectorAll(`[role="${listItemRole}"]`));
+        const listItems = Array.from(listElement.querySelectorAll(`[role="${listItemRole}"], #sr-only-close-button`));
         return listItems.indexOf(listElement.querySelector(`#${id}`));
       },
 
@@ -3628,7 +3768,7 @@ const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced
           return;
         }
 
-        return (_listElement$querySel = listElement.querySelectorAll(`[role="${listItemRole}"]`)[index]) === null || _listElement$querySel === void 0 ? void 0 : _listElement$querySel.id;
+        return (_listElement$querySel = listElement.querySelectorAll(`[role="${listItemRole}"], #sr-only-close-button`)[index]) === null || _listElement$querySel === void 0 ? void 0 : _listElement$querySel.id;
       },
 
       scrollActiveItemIntoViewIfNeeded() {
@@ -4818,25 +4958,25 @@ const skeleton_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(skeletonv
 const combobox_loading_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_loading_listvue_type_script_lang_js, [['render',combobox_loading_listvue_type_template_id_07d9971d_render]])
 
 /* harmony default export */ const combobox_loading_list = (combobox_loading_list_exports_);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox_empty-list.vue?vue&type=template&id=d0c59b2c
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox_empty-list.vue?vue&type=template&id=ee5abe2c
 
-const combobox_empty_listvue_type_template_id_d0c59b2c_hoisted_1 = {
+const combobox_empty_listvue_type_template_id_ee5abe2c_hoisted_1 = {
   class: "d-p0",
   "data-qa": "dt-combobox-empty-list"
 };
-function combobox_empty_listvue_type_template_id_d0c59b2c_render(_ctx, _cache, $props, $setup, $data, $options) {
+function combobox_empty_listvue_type_template_id_ee5abe2c_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_list_item = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-list-item");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("ol", combobox_empty_listvue_type_template_id_d0c59b2c_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_list_item, {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("ol", combobox_empty_listvue_type_template_id_ee5abe2c_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_list_item, {
     class: "d-d-flex d-jc-center",
     role: "option",
-    "navigation-type": "arrow-keys"
+    "navigation-type": "none"
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.message), 1)]),
     _: 1
   })]);
 }
-;// CONCATENATED MODULE: ./components/combobox/combobox_empty-list.vue?vue&type=template&id=d0c59b2c
+;// CONCATENATED MODULE: ./components/combobox/combobox_empty-list.vue?vue&type=template&id=ee5abe2c
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox_empty-list.vue?vue&type=script&lang=js
 
@@ -4863,7 +5003,7 @@ function combobox_empty_listvue_type_template_id_d0c59b2c_render(_ctx, _cache, $
 
 
 ;
-const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_empty_listvue_type_script_lang_js, [['render',combobox_empty_listvue_type_template_id_d0c59b2c_render]])
+const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_empty_listvue_type_script_lang_js, [['render',combobox_empty_listvue_type_template_id_ee5abe2c_render]])
 
 /* harmony default export */ const combobox_empty_list = (combobox_empty_list_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/combobox/combobox.vue?vue&type=script&lang=js
@@ -5771,10 +5911,12 @@ const collapsible_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(collap
 /* harmony default export */ const collapsible = (collapsible_exports_);
 ;// CONCATENATED MODULE: ./components/collapsible/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=template&id=a7e3156a
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=template&id=2021ac9d
+
+const dropdownvue_type_template_id_2021ac9d_hoisted_1 = ["id"];
+function dropdownvue_type_template_id_2021ac9d_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_sr_only_close_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("sr-only-close-button");
 
-const dropdownvue_type_template_id_a7e3156a_hoisted_1 = ["id"];
-function dropdownvue_type_template_id_a7e3156a_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-popover");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_popover, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
@@ -5820,23 +5962,26 @@ function dropdownvue_type_template_id_a7e3156a_render(_ctx, _cache, $props, $set
         })
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
         close: close
-      })], 42, dropdownvue_type_template_id_a7e3156a_hoisted_1)];
+      }), _ctx.showVisuallyHiddenClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_sr_only_close_button, {
+        key: 0,
+        "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
+        tabindex: $options.isArrowKeyNav ? -1 : 0,
+        onClose: close
+      }, null, 8, ["visually-hidden-close-label", "tabindex", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 42, dropdownvue_type_template_id_2021ac9d_hoisted_1)];
     }),
     _: 3
   }, 16, ["content-width", "open", "placement", "initial-focus-element", "fallback-placements", "modal", "max-height", "max-width", "open-on-context", "onOpened", "onKeydown"]);
 }
-;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=a7e3156a
+;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=2021ac9d
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=54b6d17a
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=90818940
 
-const popovervue_type_template_id_54b6d17a_hoisted_1 = ["aria-hidden"];
-const popovervue_type_template_id_54b6d17a_hoisted_2 = ["id", "tabindex"];
-function popovervue_type_template_id_54b6d17a_render(_ctx, _cache, $props, $setup, $data, $options) {
+const popovervue_type_template_id_90818940_hoisted_1 = ["aria-hidden"];
+const popovervue_type_template_id_90818940_hoisted_2 = ["id", "tabindex"];
+function popovervue_type_template_id_90818940_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_popover_header_footer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("popover-header-footer");
 
-  const _component_icon_close = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-close");
-
-  const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
+  const _component_sr_only_close_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("sr-only-close-button");
 
   const _component_dt_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-lazy-show");
 
@@ -5847,10 +5992,10 @@ function popovervue_type_template_id_54b6d17a_render(_ctx, _cache, $props, $setu
     class: "d-modal--transparent",
     "aria-hidden": $props.modal && $data.isOpen ? 'false' : 'true',
     onClick: _cache[0] || (_cache[0] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(() => {}, ["prevent", "stop"]))
-  }, null, 8, popovervue_type_template_id_54b6d17a_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
+  }, null, 8, popovervue_type_template_id_90818940_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
     ref: "popover",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-popover', {
-      'd-popover__anchor--modal-opened': $props.modal && $data.isOpen
+      'd-popover__anchor--opened': $data.isOpen
     }]),
     "data-qa": "dt-popover-container"
   }, {
@@ -5880,7 +6025,7 @@ function popovervue_type_template_id_54b6d17a_render(_ctx, _cache, $props, $setu
         'aria-controls': $props.id,
         'aria-haspopup': $props.role
       }
-    })], 40, popovervue_type_template_id_54b6d17a_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, {
+    })], 40, popovervue_type_template_id_90818940_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, {
       id: $props.id,
       ref: "content",
       role: $props.role,
@@ -5925,16 +6070,7 @@ function popovervue_type_template_id_54b6d17a_render(_ctx, _cache, $props, $setu
         class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-popover__content', $data.POPOVER_PADDING_CLASSES[$props.padding], $props.contentClass])
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "content", {
         close: $options.closePopover
-      }), $props.visuallyHiddenClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, {
-        key: 0,
-        "data-qa": "dt-popover-sr-only-close",
-        class: "d-vi-visible-sr",
-        "aria-label": $props.visuallyHiddenCloseLabel,
-        onClick: $options.closePopover
-      }, {
-        default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_close)]),
-        _: 1
-      }, 8, ["aria-label", "onClick"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2), _ctx.$slots.footerContent ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_popover_header_footer, {
+      })], 2), _ctx.$slots.footerContent ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_popover_header_footer, {
         key: 1,
         ref: "popover__footer",
         type: "footer",
@@ -5945,13 +6081,17 @@ function popovervue_type_template_id_54b6d17a_render(_ctx, _cache, $props, $setu
           close: $options.closePopover
         })]),
         _: 3
-      }, 8, ["class", "content-class"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
+      }, 8, ["class", "content-class"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), _ctx.showVisuallyHiddenClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_sr_only_close_button, {
+        key: 2,
+        "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
+        onClose: $options.closePopover
+      }, null, 8, ["visually-hidden-close-label", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
       _: 3
     }, 8, ["id", "role", "aria-hidden", "aria-labelledby", "aria-label", "aria-modal", "transition", "show", "class", "style", "css", "tabindex", "onKeydownCapture", "onAfterLeave", "onAfterEnter"])]),
     _: 3
   }, 8, ["class"]))]);
 }
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=54b6d17a
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=90818940
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
 function getWindow(node) {
@@ -10645,16 +10785,15 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
    * CHILD COMPONENTS *
    ********************/
   components: {
+    SrOnlyCloseButton: common_sr_only_close_button,
     DtLazyShow: lazy_show,
-    PopoverHeaderFooter: popover_header_footer,
-    DtButton: button_button,
-    IconClose: IconClose
+    PopoverHeaderFooter: popover_header_footer
   },
-  mixins: [modal],
+  mixins: [modal, sr_only_close_button],
   props: {
     /**
      * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.
-     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.
+     * If you set this value, the default trigger behavior will be disabled, and you can control it as you need.
      * Supports v-model
      * @values null, true, false
      */
@@ -10937,7 +11076,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
      */
     initialFocusElement: {
       type: [String, HTMLElement],
-      default: 'none',
+      default: 'first',
       validator: initialFocusElement => {
         return POPOVER_INITIAL_FOCUS_STRINGS.includes(initialFocusElement) || initialFocusElement instanceof HTMLElement || initialFocusElement.startsWith('#');
       }
@@ -10951,24 +11090,6 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     openWithArrowKeys: {
       type: Boolean,
       default: false
-    },
-
-    /**
-     * If true, a visually hidden close button its included in the popover.
-     * @values true, false
-     */
-    visuallyHiddenClose: {
-      type: Boolean,
-      default: false
-    },
-
-    /**
-     * Label for the visually hidden close button
-     * Required if visuallyHiddenClose is set to `true`
-     */
-    visuallyHiddenCloseLabel: {
-      type: String,
-      default: ''
     }
   },
   emits: [
@@ -11016,7 +11137,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
     modal(modal) {
       this.tip.setProps({
-        zIndex: modal ? 650 : 300
+        zIndex: this.modal ? 650 : this.calculateAnchorZindex()
       });
     },
 
@@ -11063,6 +11184,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
     isOpen(isOpen, isPrev) {
       if (isOpen) {
+        this.tip.setProps({
+          zIndex: this.modal ? 650 : this.calculateAnchorZindex()
+        });
         this.tip.show();
         this.addClosePopoverEventListener();
       } else if (!isOpen && isPrev !== isOpen) {
@@ -11131,10 +11255,6 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       if (this.modal && this.initialFocusElement === 'none') {
         console.error('If the popover is modal you must set the ' + 'initialFocusElement prop. Possible values: "dialog", "first", HTMLElement');
       }
-
-      if (this.visuallyHiddenClose && !this.visuallyHiddenCloseLabel) {
-        console.error('If visuallyHiddenClose prop is true (default), the popover includes a visually hidden ' + 'close button and you must set the visuallyHiddenCloseLabel prop.');
-      }
     },
 
     calculateAnchorZindex() {
@@ -11295,9 +11415,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     onClickOutside() {
-      if (!this.hideOnClick) return; // If a modal popover is opened inside of this one, do not hide on click out
+      if (!this.hideOnClick) return; // If a popover is opened inside of this one, do not hide on click out
 
-      const innerModals = this.popoverContentEl.querySelector('.d-popover__anchor--modal-opened');
+      const innerModals = this.popoverContentEl.querySelector('.d-popover__anchor--opened');
 
       if (!innerModals) {
         this.closePopover();
@@ -11340,9 +11460,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 });
 ;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=54b6d17a&lang=less
-var popovervue_type_style_index_0_id_54b6d17a_lang_less = __webpack_require__(138);
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=54b6d17a&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=90818940&lang=less
+var popovervue_type_style_index_0_id_90818940_lang_less = __webpack_require__(925);
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=90818940&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -11352,7 +11472,7 @@ var popovervue_type_style_index_0_id_54b6d17a_lang_less = __webpack_require__(13
 ;
 
 
-const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_54b6d17a_render]])
+const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_90818940_render]])
 
 /* harmony default export */ const popover = (popover_exports_);
 ;// CONCATENATED MODULE: ./components/popover/index.js
@@ -11370,10 +11490,13 @@ const DROPDOWN_PADDING_CLASSES = {
 
 
 
+
+
 /* harmony default export */ const dropdownvue_type_script_lang_js = ({
   name: 'DtDropdown',
   components: {
-    DtPopover: popover
+    DtPopover: popover,
+    SrOnlyCloseButton: common_sr_only_close_button
   },
   mixins: [keyboard_list_navigation({
     indexKey: 'highlightIndex',
@@ -11385,7 +11508,7 @@ const DROPDOWN_PADDING_CLASSES = {
     endOfListMethod: 'endOfListMethod',
     activeItemKey: 'activeItemEl',
     focusOnKeyboardNavigation: true
-  })],
+  }), sr_only_close_button],
   inheritAttrs: false,
   props: {
     /**
@@ -11600,6 +11723,10 @@ const DROPDOWN_PADDING_CLASSES = {
     },
 
     afterHighlight() {
+      if (this.visuallyHiddenClose && this.highlightIndex === this._itemsLength() - 1) {
+        return;
+      }
+
       this.$emit('highlight', this.highlightIndex);
     },
 
@@ -11607,7 +11734,7 @@ const DROPDOWN_PADDING_CLASSES = {
       this.isOpen = isPopoverOpen;
 
       if (isPopoverOpen) {
-        if (this.openedWithKeyboard && this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS) {
+        if (this.openedWithKeyboard && this.isArrowKeyNav) {
           this.setHighlightIndex(0);
         }
 
@@ -11691,9 +11818,9 @@ const DROPDOWN_PADDING_CLASSES = {
 });
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=style&index=0&id=a7e3156a&lang=less
-var dropdownvue_type_style_index_0_id_a7e3156a_lang_less = __webpack_require__(286);
-;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=style&index=0&id=a7e3156a&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown.vue?vue&type=style&index=0&id=2021ac9d&lang=less
+var dropdownvue_type_style_index_0_id_2021ac9d_lang_less = __webpack_require__(438);
+;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=style&index=0&id=2021ac9d&lang=less
 
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue
 
@@ -11703,7 +11830,7 @@ var dropdownvue_type_style_index_0_id_a7e3156a_lang_less = __webpack_require__(2
 ;
 
 
-const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_a7e3156a_render]])
+const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownvue_type_script_lang_js, [['render',dropdownvue_type_template_id_2021ac9d_render]])
 
 /* harmony default export */ const dropdown = (dropdown_exports_);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/dropdown/dropdown_list.vue?vue&type=template&id=eefb7378
@@ -11788,30 +11915,30 @@ const dropdown_separator_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)
 
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/input/input.vue?vue&type=template&id=b98a3d1e
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/input/input.vue?vue&type=template&id=1ac302ae
 
-const inputvue_type_template_id_b98a3d1e_hoisted_1 = {
+const inputvue_type_template_id_1ac302ae_hoisted_1 = {
   ref: "container",
   class: "base-input",
   "data-qa": "dt-input"
 };
-const inputvue_type_template_id_b98a3d1e_hoisted_2 = ["aria-details"];
-const inputvue_type_template_id_b98a3d1e_hoisted_3 = ["id"];
-const inputvue_type_template_id_b98a3d1e_hoisted_4 = {
+const inputvue_type_template_id_1ac302ae_hoisted_2 = ["aria-details"];
+const inputvue_type_template_id_1ac302ae_hoisted_3 = ["id"];
+const inputvue_type_template_id_1ac302ae_hoisted_4 = {
   key: 0
 };
-const inputvue_type_template_id_b98a3d1e_hoisted_5 = {
+const inputvue_type_template_id_1ac302ae_hoisted_5 = {
   key: 1,
   "data-qa": "dt-input-length-description",
   class: /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-mb2'])
 };
-const inputvue_type_template_id_b98a3d1e_hoisted_6 = ["read-only"];
+const inputvue_type_template_id_1ac302ae_hoisted_6 = ["read-only"];
 const _hoisted_7 = ["value", "name", "disabled", "maxlength"];
 const _hoisted_8 = ["value", "name", "type", "disabled", "maxlength"];
-function inputvue_type_template_id_b98a3d1e_render(_ctx, _cache, $props, $setup, $data, $options) {
+function inputvue_type_template_id_1ac302ae_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_validation_messages = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-validation-messages");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_b98a3d1e_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("label", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_1ac302ae_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("label", {
     class: "base-input__label",
     "aria-details": _ctx.$slots.description || $props.description ? $options.descriptionKey : undefined,
     "data-qa": "dt-input-label-wrapper"
@@ -11826,9 +11953,9 @@ function inputvue_type_template_id_b98a3d1e_render(_ctx, _cache, $props, $setup,
     ref: "description",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['base-input__description', 'd-description', 'd-fd-column', $data.descriptionSizeClasses[$props.size]]),
     "data-qa": "dt-input-description"
-  }, [_ctx.$slots.description || $props.description ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_b98a3d1e_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "description", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.description), 1)])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.shouldValidateLength ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_b98a3d1e_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.validationProps.length.description), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, inputvue_type_template_id_b98a3d1e_hoisted_3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+  }, [_ctx.$slots.description || $props.description ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_1ac302ae_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "description", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.description), 1)])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.shouldValidateLength ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", inputvue_type_template_id_1ac302ae_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.validationProps.length.description), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, inputvue_type_template_id_1ac302ae_hoisted_3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.inputWrapperClasses()),
-    "read-only": $props.disabled
+    "read-only": $props.disabled === true ? true : undefined
   }, [_ctx.$slots.leftIcon ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
     key: 0,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.inputIconClasses('left')),
@@ -11862,7 +11989,7 @@ function inputvue_type_template_id_b98a3d1e_render(_ctx, _cache, $props, $setup,
     onFocusout: _cache[1] || (_cache[1] = function () {
       return $options.onBlur && $options.onBlur(...arguments);
     })
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "rightIcon")], 34)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, inputvue_type_template_id_b98a3d1e_hoisted_6)], 8, inputvue_type_template_id_b98a3d1e_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_validation_messages, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "rightIcon")], 34)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, inputvue_type_template_id_1ac302ae_hoisted_6)], 8, inputvue_type_template_id_1ac302ae_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_validation_messages, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     "validation-messages": $options.validationMessages,
     "show-messages": _ctx.showMessages,
     class: _ctx.messagesClass
@@ -11870,7 +11997,7 @@ function inputvue_type_template_id_b98a3d1e_render(_ctx, _cache, $props, $setup,
     "data-qa": "dt-input-messages"
   }), null, 16, ["validation-messages", "show-messages", "class"])], 512);
 }
-;// CONCATENATED MODULE: ./components/input/input.vue?vue&type=template&id=b98a3d1e
+;// CONCATENATED MODULE: ./components/input/input.vue?vue&type=template&id=1ac302ae
 
 ;// CONCATENATED MODULE: ./components/input/input_constants.js
 // Valid input types, any other input types (for example: 'radio' or 'checkbox') should
@@ -12883,7 +13010,7 @@ const MessagesMixin = {
 
 
 ;
-const input_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(inputvue_type_script_lang_js, [['render',inputvue_type_template_id_b98a3d1e_render]])
+const input_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(inputvue_type_script_lang_js, [['render',inputvue_type_template_id_1ac302ae_render]])
 
 /* harmony default export */ const input_input = (input_exports_);
 ;// CONCATENATED MODULE: ./components/input/index.js
@@ -13182,30 +13309,32 @@ const input_group_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(input_
 /* harmony default export */ const input_group_input_group = (input_group_exports_);
 ;// CONCATENATED MODULE: ./components/input_group/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/modal/modal.vue?vue&type=template&id=d71a3468
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/modal/modal.vue?vue&type=template&id=21785ac6
 
-const modalvue_type_template_id_d71a3468_hoisted_1 = ["aria-describedby", "aria-labelledby"];
-const modalvue_type_template_id_d71a3468_hoisted_2 = ["id"];
-const modalvue_type_template_id_d71a3468_hoisted_3 = ["id"];
-const modalvue_type_template_id_d71a3468_hoisted_4 = {
+const modalvue_type_template_id_21785ac6_hoisted_1 = ["aria-describedby", "aria-labelledby"];
+const modalvue_type_template_id_21785ac6_hoisted_2 = ["id"];
+const modalvue_type_template_id_21785ac6_hoisted_3 = ["id"];
+const modalvue_type_template_id_21785ac6_hoisted_4 = {
   key: 2,
   class: "d-modal__content",
   "data-qa": "dt-modal-copy"
 };
-const modalvue_type_template_id_d71a3468_hoisted_5 = {
+const modalvue_type_template_id_21785ac6_hoisted_5 = {
   key: 3,
   class: "d-modal__content",
   "data-qa": "dt-modal-copy"
 };
-const modalvue_type_template_id_d71a3468_hoisted_6 = {
+const modalvue_type_template_id_21785ac6_hoisted_6 = {
   key: 4,
   class: "d-modal__footer"
 };
-function modalvue_type_template_id_d71a3468_render(_ctx, _cache, $props, $setup, $data, $options) {
+function modalvue_type_template_id_21785ac6_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_icon_close = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("icon-close");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
+  const _component_sr_only_close_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("sr-only-close-button");
+
   const _component_dt_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-lazy-show");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_lazy_show, {
@@ -13239,12 +13368,12 @@ function modalvue_type_template_id_d71a3468_render(_ctx, _cache, $props, $setup,
         id: $props.labelledById,
         class: "d-modal__header",
         "data-qa": "dt-modal-title"
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 8, modalvue_type_template_id_d71a3468_hoisted_2)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("h2", {
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 8, modalvue_type_template_id_21785ac6_hoisted_2)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("h2", {
         key: 1,
         id: $props.labelledById,
         class: "d-modal__header",
         "data-qa": "dt-modal-title"
-      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.title), 9, modalvue_type_template_id_d71a3468_hoisted_3)), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", modalvue_type_template_id_d71a3468_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", modalvue_type_template_id_d71a3468_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.copy), 1)), $options.hasFooterSlot ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("footer", modalvue_type_template_id_d71a3468_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.title), 9, modalvue_type_template_id_21785ac6_hoisted_3)), _ctx.$slots.default ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", modalvue_type_template_id_21785ac6_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", modalvue_type_template_id_21785ac6_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.copy), 1)), $options.hasFooterSlot ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("footer", modalvue_type_template_id_21785ac6_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
         key: 5,
         class: "d-modal__close",
         circle: "",
@@ -13257,13 +13386,17 @@ function modalvue_type_template_id_d71a3468_render(_ctx, _cache, $props, $setup,
       }), {
         icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_icon_close)]),
         _: 1
-      }, 16, ["aria-label", "kind", "onClick"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, modalvue_type_template_id_d71a3468_hoisted_1), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $props.show]])]),
+      }, 16, ["aria-label", "kind", "onClick"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), _ctx.showVisuallyHiddenClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_sr_only_close_button, {
+        key: 6,
+        "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
+        onClose: $options.close
+      }, null, 8, ["visually-hidden-close-label", "onClose"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 10, modalvue_type_template_id_21785ac6_hoisted_1), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $props.show]])]),
       _: 3
     })]),
     _: 3
   }, 8, ["show", "class", "aria-hidden", "onClick", "onKeydown", "onAfterEnter"]);
 }
-;// CONCATENATED MODULE: ./components/modal/modal.vue?vue&type=template&id=d71a3468
+;// CONCATENATED MODULE: ./components/modal/modal.vue?vue&type=template&id=21785ac6
 
 ;// CONCATENATED MODULE: ./components/modal/modal_constants.js
 // Modal style modifiers
@@ -13283,6 +13416,8 @@ const MODAL_SIZE_MODIFIERS = {
 
 
 
+
+
 /**
  * Modals focus the user’s attention exclusively on one task or piece of information
  * via a window that sits on top of the page content.
@@ -13294,9 +13429,10 @@ const MODAL_SIZE_MODIFIERS = {
   components: {
     DtLazyShow: lazy_show,
     DtButton: button_button,
-    IconClose: IconClose
+    IconClose: IconClose,
+    SrOnlyCloseButton: common_sr_only_close_button
   },
-  mixins: [modal],
+  mixins: [modal, sr_only_close_button],
   props: {
     /**
      * A set of props to be passed into the modal's close button.
@@ -13476,6 +13612,15 @@ const MODAL_SIZE_MODIFIERS = {
         }
       }
 
+    },
+    $props: {
+      immediate: true,
+      deep: true,
+
+      handler() {
+        this.validateProps();
+      }
+
     }
   },
   methods: {
@@ -13491,6 +13636,13 @@ const MODAL_SIZE_MODIFIERS = {
       if (this.show) {
         this.focusTrappedTabPress(e);
       }
+    },
+
+    validateProps() {
+      if (this.hideClose && !this.visuallyHiddenClose) {
+        console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props
+        need to be set so the component always includes a close button`);
+      }
     }
 
   }
@@ -13503,7 +13655,7 @@ const MODAL_SIZE_MODIFIERS = {
 
 
 ;
-const modal_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(modalvue_type_script_lang_js, [['render',modalvue_type_template_id_d71a3468_render]])
+const modal_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(modalvue_type_script_lang_js, [['render',modalvue_type_template_id_21785ac6_render]])
 
 /* harmony default export */ const modal_modal = (modal_exports_);
 ;// CONCATENATED MODULE: ./components/modal/index.js
@@ -13680,9 +13832,9 @@ const list_section_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(list_
 /* harmony default export */ const list_section = (list_section_exports_);
 ;// CONCATENATED MODULE: ./components/list_section/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/notice/notice.vue?vue&type=template&id=1f326661
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/notice/notice.vue?vue&type=template&id=28b8ab50
 
-function noticevue_type_template_id_1f326661_render(_ctx, _cache, $props, $setup, $data, $options) {
+function noticevue_type_template_id_28b8ab50_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_notice_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-notice-icon");
 
   const _component_dt_notice_content = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-notice-content");
@@ -13709,19 +13861,22 @@ function noticevue_type_template_id_1f326661_render(_ctx, _cache, $props, $setup
   }, 8, ["title-id", "content-id", "title", "role"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_notice_action, {
     "hide-close": $props.hideClose,
     "close-button-props": $props.closeButtonProps,
+    "visually-hidden-close": _ctx.visuallyHiddenClose,
+    "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
     onClose: _cache[0] || (_cache[0] = $event => _ctx.$emit('close'))
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "action")]),
     _: 3
-  }, 8, ["hide-close", "close-button-props"])], 2);
+  }, 8, ["hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])], 2);
 }
-;// CONCATENATED MODULE: ./components/notice/notice.vue?vue&type=template&id=1f326661
+;// CONCATENATED MODULE: ./components/notice/notice.vue?vue&type=template&id=28b8ab50
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/notice/notice.vue?vue&type=script&lang=js
 
 
 
 
+
 /**
  * A notice is an informational and assistive message that appears inline with content.
  * @see https://dialpad.design/components/notice.html
@@ -13734,6 +13889,7 @@ function noticevue_type_template_id_1f326661_render(_ctx, _cache, $props, $setup
     DtNoticeContent: notice_content,
     DtNoticeAction: notice_action
   },
+  mixins: [sr_only_close_button],
   props: {
     /**
      * Sets an ID on the title element of the component. Useful for aria-describedby
@@ -13856,7 +14012,7 @@ function noticevue_type_template_id_1f326661_render(_ctx, _cache, $props, $setup
 
 
 ;
-const notice_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(noticevue_type_script_lang_js, [['render',noticevue_type_template_id_1f326661_render]])
+const notice_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(noticevue_type_script_lang_js, [['render',noticevue_type_template_id_28b8ab50_render]])
 
 /* harmony default export */ const notice = (notice_exports_);
 ;// CONCATENATED MODULE: ./components/notice/index.js
@@ -15854,13 +16010,13 @@ const select_menu_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(select
 ;// CONCATENATED MODULE: ./components/select_menu/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/toast/toast.vue?vue&type=template&id=0507f5c2
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/toast/toast.vue?vue&type=template&id=2a4e3190
 
-const toastvue_type_template_id_0507f5c2_hoisted_1 = ["aria-hidden"];
-const toastvue_type_template_id_0507f5c2_hoisted_2 = {
+const toastvue_type_template_id_2a4e3190_hoisted_1 = ["aria-hidden"];
+const toastvue_type_template_id_2a4e3190_hoisted_2 = {
   class: "d-toast__dialog"
 };
-function toastvue_type_template_id_0507f5c2_render(_ctx, _cache, $props, $setup, $data, $options) {
+function toastvue_type_template_id_2a4e3190_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_notice_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-notice-icon");
 
   const _component_dt_notice_content = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-notice-content");
@@ -15874,7 +16030,7 @@ function toastvue_type_template_id_0507f5c2_render(_ctx, _cache, $props, $setup,
     }]),
     "data-qa": "dt-toast",
     "aria-hidden": (!$data.isShown).toString()
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", toastvue_type_template_id_0507f5c2_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_notice_icon, {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", toastvue_type_template_id_2a4e3190_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_notice_icon, {
     kind: $props.kind
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")]),
@@ -15891,13 +16047,15 @@ function toastvue_type_template_id_0507f5c2_render(_ctx, _cache, $props, $setup,
   }, 8, ["title-id", "content-id", "title", "role"]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_notice_action, {
     "hide-close": $props.hideClose,
     "close-button-props": $props.closeButtonProps,
+    "visually-hidden-close": _ctx.visuallyHiddenClose,
+    "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
     onClose: $options.closeToast
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "action")]),
     _: 3
-  }, 8, ["hide-close", "close-button-props", "onClose"])])], 10, toastvue_type_template_id_0507f5c2_hoisted_1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true);
+  }, 8, ["hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label", "onClose"])])], 10, toastvue_type_template_id_2a4e3190_hoisted_1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true);
 }
-;// CONCATENATED MODULE: ./components/toast/toast.vue?vue&type=template&id=0507f5c2
+;// CONCATENATED MODULE: ./components/toast/toast.vue?vue&type=template&id=2a4e3190
 
 ;// CONCATENATED MODULE: ./components/toast/toast_constants.js
 const TOAST_ROLES = ['status', 'alert'];
@@ -15913,6 +16071,7 @@ const TOAST_MIN_DURATION = 6000;
 
 
 
+
 /**
  * A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions.
  * It contains at-a-glance information about outcomes and can be paired with actions.
@@ -15926,6 +16085,7 @@ const TOAST_MIN_DURATION = 6000;
     DtNoticeContent: notice_content,
     DtNoticeAction: notice_action
   },
+  mixins: [sr_only_close_button],
   props: {
     /**
      * Sets an ID on the title element of the component. Useful for aria-describedby
@@ -16134,7 +16294,7 @@ const TOAST_MIN_DURATION = 6000;
 
 
 ;
-const toast_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(toastvue_type_script_lang_js, [['render',toastvue_type_template_id_0507f5c2_render]])
+const toast_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(toastvue_type_script_lang_js, [['render',toastvue_type_template_id_2a4e3190_render]])
 
 /* harmony default export */ const toast = (toast_exports_);
 ;// CONCATENATED MODULE: ./components/toast/index.js
@@ -17322,11 +17482,11 @@ const root_layout_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_l
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=52b02dba
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=d56f4446
 
-const combobox_with_popovervue_type_template_id_52b02dba_hoisted_1 = ["id"];
-const combobox_with_popovervue_type_template_id_52b02dba_hoisted_2 = ["onMouseleave", "onFocusout"];
-function combobox_with_popovervue_type_template_id_52b02dba_render(_ctx, _cache, $props, $setup, $data, $options) {
+const combobox_with_popovervue_type_template_id_d56f4446_hoisted_1 = ["id"];
+const combobox_with_popovervue_type_template_id_d56f4446_hoisted_2 = ["onMouseleave", "onFocusout"];
+function combobox_with_popovervue_type_template_id_d56f4446_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-loading-list");
 
   const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-empty-list");
@@ -17365,7 +17525,7 @@ function combobox_with_popovervue_type_template_id_52b02dba_render(_ctx, _cache,
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
         inputProps: inputProps,
         onInput: $options.handleDisplayList
-      })], 40, combobox_with_popovervue_type_template_id_52b02dba_hoisted_1)];
+      })], 40, combobox_with_popovervue_type_template_id_d56f4446_hoisted_1)];
     }),
     list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref2 => {
       let {
@@ -17383,13 +17543,16 @@ function combobox_with_popovervue_type_template_id_52b02dba_render(_ctx, _cache,
         offset: $props.popoverOffset,
         sticky: $props.popoverSticky,
         placement: "bottom-start",
+        "initial-focus-element": "none",
         padding: "none",
         role: "listbox",
         "external-anchor": $data.externalAnchor,
         "content-width": $props.contentWidth,
         "content-tabindex": null,
-        modal: $props.modal,
+        modal: false,
         "auto-focus": false,
+        "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
+        "visually-hidden-close": _ctx.visuallyHiddenClose,
         onOpened: opened
       }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createSlots)({
         content: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
@@ -17409,7 +17572,7 @@ function combobox_with_popovervue_type_template_id_52b02dba_render(_ctx, _cache,
         }), null, 16, ["message"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
           key: 2,
           listProps: listProps
-        })], 42, combobox_with_popovervue_type_template_id_52b02dba_hoisted_2)]),
+        })], 42, combobox_with_popovervue_type_template_id_d56f4446_hoisted_2)]),
         _: 2
       }, [_ctx.$slots.header ? {
         name: "headerContent",
@@ -17429,12 +17592,12 @@ function combobox_with_popovervue_type_template_id_52b02dba_render(_ctx, _cache,
           })
         }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 544)]),
         key: "1"
-      } : undefined]), 1032, ["open", "hide-on-click", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "modal", "onOpened"])];
+      } : undefined]), 1032, ["open", "hide-on-click", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "visually-hidden-close-label", "visually-hidden-close", "onOpened"])];
     }),
     _: 3
   }, 16, ["loading", "empty-list", "empty-state-message", "show-list", "on-beginning-of-list", "on-end-of-list", "list-aria-label", "list-id"]);
 }
-;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=52b02dba
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=d56f4446
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js
 
@@ -17443,6 +17606,7 @@ function combobox_with_popovervue_type_template_id_52b02dba_render(_ctx, _cache,
 
 
 
+
 /* harmony default export */ const combobox_with_popovervue_type_script_lang_js = ({
   name: 'DtRecipeComboboxWithPopover',
   components: {
@@ -17451,6 +17615,7 @@ function combobox_with_popovervue_type_template_id_52b02dba_render(_ctx, _cache,
     ComboboxLoadingList: combobox_loading_list,
     ComboboxEmptyList: combobox_empty_list
   },
+  mixins: [sr_only_close_button],
   props: {
     /**
      * String to use for the list's aria-label.
@@ -17573,15 +17738,6 @@ function combobox_with_popovervue_type_template_id_52b02dba_render(_ctx, _cache,
       default: false
     },
 
-    /**
-     * Determines modal state. If enabled popover has a modal overlay
-     * preventing interaction with elements below it, but it is invisible.
-     */
-    modal: {
-      type: Boolean,
-      default: true
-    },
-
     /**
      * Displays the list when the combobox is focused, before the user has typed anything.
      * When this is enabled the list will not close after selection.
@@ -17733,7 +17889,7 @@ function combobox_with_popovervue_type_template_id_52b02dba_render(_ctx, _cache,
 
     onFocusIn(e) {
       if (this.hasSuggestionList && e && this.$refs.input.querySelector('input') === e.target) {
-        // only trigger if we show suggestion list when focus and
+        // only trigger if we show suggestion list when focused, and
         // it's the input specifically that was focused
         this.showComboboxList();
       }
@@ -17746,7 +17902,7 @@ function combobox_with_popovervue_type_template_id_52b02dba_render(_ctx, _cache,
         var _this$$refs$ref;
 
         return (_this$$refs$ref = this.$refs[ref]) === null || _this$$refs$ref === void 0 ? void 0 : _this$$refs$ref.contains(e.relatedTarget);
-      }); // If outside of the combobox then close
+      }) || this.visuallyHiddenClose; // If outside the combobox then close
 
       if (!isComboboxStillFocused) {
         this.closeComboboxList();
@@ -17771,32 +17927,32 @@ function combobox_with_popovervue_type_template_id_52b02dba_render(_ctx, _cache,
 
 
 ;
-const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_52b02dba_render]])
+const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_d56f4446_render]])
 
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_exports_);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=09911ee7
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=478b895c
 
-const combobox_multi_selectvue_type_template_id_09911ee7_hoisted_1 = {
+const combobox_multi_selectvue_type_template_id_478b895c_hoisted_1 = {
   ref: "inputSlotWrapper",
   class: "d-ps-relative"
 };
-const combobox_multi_selectvue_type_template_id_09911ee7_hoisted_2 = {
+const combobox_multi_selectvue_type_template_id_478b895c_hoisted_2 = {
   ref: "chipsWrapper",
   class: "d-ps-absolute d-mx2"
 };
-const combobox_multi_selectvue_type_template_id_09911ee7_hoisted_3 = {
+const combobox_multi_selectvue_type_template_id_478b895c_hoisted_3 = {
   ref: "header"
 };
-const combobox_multi_selectvue_type_template_id_09911ee7_hoisted_4 = {
+const combobox_multi_selectvue_type_template_id_478b895c_hoisted_4 = {
   key: 1,
   class: "d-ta-center d-py16"
 };
-const combobox_multi_selectvue_type_template_id_09911ee7_hoisted_5 = {
+const combobox_multi_selectvue_type_template_id_478b895c_hoisted_5 = {
   ref: "footer"
 };
-function combobox_multi_selectvue_type_template_id_09911ee7_render(_ctx, _cache, $props, $setup, $data, $options) {
+function combobox_multi_selectvue_type_template_id_478b895c_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_chip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-chip");
 
   const _component_dt_input = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-input");
@@ -17812,6 +17968,8 @@ function combobox_multi_selectvue_type_template_id_09911ee7_render(_ctx, _cache,
     "max-height": $props.listMaxHeight,
     "popover-offset": $data.popoverOffset,
     "has-suggestion-list": $props.hasSuggestionList,
+    "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
+    "visually-hidden-close": _ctx.visuallyHiddenClose,
     "content-width": "anchor",
     onSelect: $options.onComboboxSelect
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createSlots)({
@@ -17819,7 +17977,7 @@ function combobox_multi_selectvue_type_template_id_09911ee7_render(_ctx, _cache,
       let {
         onInput
       } = _ref;
-      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_09911ee7_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_09911ee7_hoisted_2, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($props.selectedItems, item => {
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_478b895c_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_478b895c_hoisted_2, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($props.selectedItems, item => {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_chip, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
           ref_for: true,
           ref: "chips",
@@ -17859,19 +18017,19 @@ function combobox_multi_selectvue_type_template_id_09911ee7_render(_ctx, _cache,
       onMousedown: _cache[1] || (_cache[1] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(() => {}, ["prevent"]))
     }, [!$props.loading ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
       key: 0
-    }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", combobox_multi_selectvue_type_template_id_09911ee7_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.loadingMessage), 1))], 544)]),
+    }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", combobox_multi_selectvue_type_template_id_478b895c_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.loadingMessage), 1))], 544)]),
     _: 2
   }, [_ctx.$slots.header ? {
     name: "header",
-    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_09911ee7_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_478b895c_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
     key: "0"
   } : undefined, _ctx.$slots.footer ? {
     name: "footer",
-    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_09911ee7_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_478b895c_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
     key: "1"
-  } : undefined]), 1032, ["show-list", "max-height", "popover-offset", "has-suggestion-list", "onSelect"]);
+  } : undefined]), 1032, ["show-list", "max-height", "popover-offset", "has-suggestion-list", "visually-hidden-close-label", "visually-hidden-close", "onSelect"]);
 }
-;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=09911ee7
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=478b895c
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
 // The item list for default story
@@ -17977,6 +18135,7 @@ const MULTI_SELECT_SIZES = {
 
 
 
+
 /* harmony default export */ const combobox_multi_selectvue_type_script_lang_js = ({
   name: 'DtRecipeComboboxMultiSelect',
   components: {
@@ -17985,6 +18144,7 @@ const MULTI_SELECT_SIZES = {
     DtChip: chip,
     DtValidationMessages: validation_messages
   },
+  mixins: [sr_only_close_button],
   props: {
     /**
      * Label for the combobox
@@ -18158,7 +18318,7 @@ const MULTI_SELECT_SIZES = {
   data() {
     return {
       value: '',
-      popoverOffset: [0, 0],
+      popoverOffset: [0, 4],
       showValidationMessages: false,
       initialInputPadding: {},
       resizeWindowObserver: null
@@ -18390,7 +18550,7 @@ const MULTI_SELECT_SIZES = {
       // If the new chip goes to the next line and the input box expands,
       // move the popover down to the next line. Same when chips are removed
 
-      this.popoverOffset = [0, 0];
+      this.popoverOffset = [0, 4];
     },
 
     getFullWidth(el) {
@@ -18439,7 +18599,7 @@ const MULTI_SELECT_SIZES = {
 
 
 ;
-const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_multi_selectvue_type_script_lang_js, [['render',combobox_multi_selectvue_type_template_id_09911ee7_render]])
+const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_multi_selectvue_type_script_lang_js, [['render',combobox_multi_selectvue_type_template_id_478b895c_render]])
 
 /* harmony default export */ const combobox_multi_select = (combobox_multi_select_exports_);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js