@carbon/vue 3.0.26 → 3.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5904,7 +5904,7 @@ const __exports__ = CvDataTableSkeletonvue_type_script_setup_true_lang_js;
5904
5904
 
5905
5905
  /***/ }),
5906
5906
 
5907
- /***/ 3347:
5907
+ /***/ 8192:
5908
5908
  /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
5909
5909
 
5910
5910
  "use strict";
@@ -8768,9 +8768,9 @@ var monthSelectPlugin_monthToStr = function monthToStr(monthNumber, shorthand, l
8768
8768
 
8769
8769
  var _hoisted_1 = ["id", "data-date-picker", "data-date-picker-type"];
8770
8770
  var _hoisted_2 = ["for"];
8771
- var _hoisted_3 = ["id", "data-invalid", "disabled", "data-date-picker-input-from", "pattern", "placeholder"];
8771
+ var _hoisted_3 = ["id", "aria-description", "data-invalid", "disabled", "data-date-picker-input-from", "pattern", "placeholder"];
8772
8772
  var _hoisted_4 = ["for"];
8773
- var _hoisted_5 = ["id", "data-date-picker-input-to", "data-invalid", "disabled", "pattern", "placeholder"];
8773
+ var _hoisted_5 = ["id", "aria-description", "data-date-picker-input-to", "data-invalid", "disabled", "pattern", "placeholder"];
8774
8774
 
8775
8775
 
8776
8776
 
@@ -9092,7 +9092,8 @@ var _hoisted_5 = ["id", "data-date-picker-input-to", "data-invalid", "disabled",
9092
9092
  ref: date,
9093
9093
  type: "text",
9094
9094
  "data-date-picker-input": "",
9095
- role: "datepicker",
9095
+ "data-testid": "datepicker",
9096
+ "aria-description": __props.placeholder,
9096
9097
  "data-invalid": isInvalid.value || null,
9097
9098
  disabled: __props.disabled || null,
9098
9099
  "data-date-picker-input-from": "".concat(getKind.value === 'range'),
@@ -9127,7 +9128,8 @@ var _hoisted_5 = ["id", "data-date-picker-input-to", "data-invalid", "disabled",
9127
9128
  ref: todate,
9128
9129
  type: "text",
9129
9130
  "data-date-picker-input": "",
9130
- role: "todatepicker",
9131
+ "data-testid": "todatepicker",
9132
+ "aria-description": __props.placeholder,
9131
9133
  "data-date-picker-input-to": "".concat(__props.kind === 'range'),
9132
9134
  "data-invalid": isInvalid.value || null,
9133
9135
  disabled: __props.disabled || null,
@@ -9152,10 +9154,10 @@ var _hoisted_5 = ["id", "data-date-picker-input-to", "data-invalid", "disabled",
9152
9154
  });
9153
9155
  ;// ./src/components/CvDatePicker/CvDatePicker.vue?vue&type=script&setup=true&lang=js
9154
9156
 
9155
- ;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/CvDatePicker/CvDatePicker.vue?vue&type=style&index=0&id=8eb50384&lang=scss
9157
+ ;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/CvDatePicker/CvDatePicker.vue?vue&type=style&index=0&id=3cc101f2&lang=scss
9156
9158
  // extracted by mini-css-extract-plugin
9157
9159
 
9158
- ;// ./src/components/CvDatePicker/CvDatePicker.vue?vue&type=style&index=0&id=8eb50384&lang=scss
9160
+ ;// ./src/components/CvDatePicker/CvDatePicker.vue?vue&type=style&index=0&id=3cc101f2&lang=scss
9159
9161
 
9160
9162
  ;// ./src/components/CvDatePicker/CvDatePicker.vue
9161
9163
 
@@ -9560,6 +9562,13 @@ var _hoisted_7 = ["aria-disabled"];
9560
9562
  });
9561
9563
  var el = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null);
9562
9564
  function onClickOut() {
9565
+ // Move focus to button if focus is inside dropdown list
9566
+ var dropListEl = dropList.value;
9567
+ if (dropListEl && dropListEl.contains(document.activeElement)) {
9568
+ if (button.value && typeof button.value.focus === 'function') {
9569
+ button.value.focus();
9570
+ }
9571
+ }
9563
9572
  open.value = false;
9564
9573
  }
9565
9574
  (0,index_esm/* onClickOutside */.X2)(el, onClickOut);
@@ -9606,8 +9615,14 @@ var _hoisted_7 = ["aria-disabled"];
9606
9615
  }
9607
9616
  }
9608
9617
  function onEsc() {
9618
+ // Move focus to button if focus is inside dropdown list
9619
+ var dropListEl = dropList.value;
9620
+ if (dropListEl && dropListEl.contains(document.activeElement)) {
9621
+ if (button.value && typeof button.value.focus === 'function') {
9622
+ button.value.focus();
9623
+ }
9624
+ }
9609
9625
  open.value = false;
9610
- doFocus();
9611
9626
  }
9612
9627
  var button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null);
9613
9628
  var listBox = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null);
@@ -9619,8 +9634,10 @@ var _hoisted_7 = ["aria-disabled"];
9619
9634
  open.value = false;
9620
9635
  } else if (ev.target === null || (_listBox$value = listBox.value) !== null && _listBox$value !== void 0 && _listBox$value.contains(ev.target)) {
9621
9636
  // list has focus, close and return focus to dropdown
9637
+ if (button.value && typeof button.value.focus === 'function') {
9638
+ button.value.focus();
9639
+ }
9622
9640
  open.value = false;
9623
- doFocus();
9624
9641
  ev.preventDefault();
9625
9642
  }
9626
9643
  }
@@ -9629,9 +9646,6 @@ var _hoisted_7 = ["aria-disabled"];
9629
9646
  if (props.disabled) {
9630
9647
  ev.preventDefault();
9631
9648
  } else {
9632
- open.value = !open.value;
9633
- doFocus(); // open or close (Some browsers do not focus on button when clicked)
9634
-
9635
9649
  var target = ev.target;
9636
9650
  while (!target.classList.contains("".concat(settings/* carbonPrefix */.s, "--dropdown-link")) && (_dropList$value2 = dropList.value) !== null && _dropList$value2 !== void 0 && _dropList$value2.contains(target)) {
9637
9651
  var _dropList$value2;
@@ -9640,6 +9654,14 @@ var _hoisted_7 = ["aria-disabled"];
9640
9654
  if (target.classList.contains("".concat(settings/* carbonPrefix */.s, "--dropdown-link"))) {
9641
9655
  var targetItemEl = target.parentNode;
9642
9656
  dataValue.value = targetItemEl.getAttribute('data-value');
9657
+ // Move focus to button before closing
9658
+ if (button.value && typeof button.value.focus === 'function') {
9659
+ button.value.focus();
9660
+ }
9661
+ open.value = false;
9662
+ } else {
9663
+ open.value = !open.value;
9664
+ doFocus(); // open or close (Some browsers do not focus on button when clicked)
9643
9665
  }
9644
9666
  }
9645
9667
  }
@@ -10014,7 +10036,7 @@ var CvForm = __webpack_require__(9005);
10014
10036
  // EXTERNAL MODULE: ./src/components/CvForm/CvFormGroup.vue + 2 modules
10015
10037
  var CvFormGroup = __webpack_require__(8657);
10016
10038
  // EXTERNAL MODULE: ./src/components/CvForm/CvFormItem.vue + 2 modules
10017
- var CvFormItem = __webpack_require__(8653);
10039
+ var CvFormItem = __webpack_require__(1034);
10018
10040
  ;// ./src/components/CvForm/index.js
10019
10041
 
10020
10042
 
@@ -10676,7 +10698,7 @@ const __exports__ = CvFormGroupvue_type_script_setup_true_lang_js;
10676
10698
 
10677
10699
  /***/ }),
10678
10700
 
10679
- /***/ 8653:
10701
+ /***/ 1034:
10680
10702
  /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
10681
10703
 
10682
10704
  "use strict";
@@ -19961,18 +19983,24 @@ var settings = __webpack_require__(8470);
19961
19983
  tagType: {
19962
19984
  type: String,
19963
19985
  default: 'main'
19986
+ },
19987
+ id: {
19988
+ type: String,
19989
+ default: 'main-content'
19964
19990
  }
19965
19991
  },
19966
19992
  setup: function setup(__props) {
19967
19993
  return function (_ctx, _cache) {
19968
19994
  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveDynamicComponent)(__props.tagType), {
19969
- class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)("".concat((0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(settings/* carbonPrefix */.s), "--content"))
19995
+ id: __props.id,
19996
+ class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)("".concat((0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(settings/* carbonPrefix */.s), "--content")),
19997
+ tabindex: "-1"
19970
19998
  }, {
19971
19999
  default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function () {
19972
20000
  return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")];
19973
20001
  }),
19974
20002
  _: 3
19975
- }, 8, ["class"]);
20003
+ }, 8, ["id", "class"]);
19976
20004
  };
19977
20005
  }
19978
20006
  });
@@ -20194,7 +20222,7 @@ var _hoisted_1 = ["id"];
20194
20222
  var found = data.panelControllers.find(function (item) {
20195
20223
  return item.ariaControls === srcComponent.id;
20196
20224
  });
20197
- if (srcComponent.el !== srcEvent.relatedTarget && !srcComponent.el.contains(srcEvent.relatedTarget) && found && found.el !== srcEvent.relatedTarget) {
20225
+ if (srcComponent.el.value !== srcEvent.relatedTarget && !srcComponent.el.value.contains(srcEvent.relatedTarget) && found && found.el.value !== srcEvent.relatedTarget) {
20198
20226
  onCvPanelControlToggle(found, false);
20199
20227
  }
20200
20228
  }
@@ -20476,6 +20504,7 @@ var _hoisted_2 = ["aria-label", "aria-labelledby"];
20476
20504
  ref_key: "el",
20477
20505
  ref: el,
20478
20506
  class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)("cv-header-menu ".concat((0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(settings/* carbonPrefix */.s), "--header__submenu")),
20507
+ role: "menuitem",
20479
20508
  onMouseenter: _cache[1] || (_cache[1] = function ($event) {
20480
20509
  return doHoverToggle(true);
20481
20510
  }),
@@ -20487,9 +20516,9 @@ var _hoisted_2 = ["aria-label", "aria-labelledby"];
20487
20516
  "aria-expanded": data.expanded ? 'true' : 'false',
20488
20517
  class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)("".concat((0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(settings/* carbonPrefix */.s), "--header__menu-item ").concat((0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(settings/* carbonPrefix */.s), "--header__menu-title")),
20489
20518
  href: "javascript:void(0)",
20490
- role: "menuitem",
20491
20519
  tabindex: "0",
20492
20520
  "aria-label": _ctx.$attrs.ariaLabel,
20521
+ role: "button",
20493
20522
  onClick: doToggle,
20494
20523
  onKeydown: [_cache[0] || (_cache[0] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)(function () {}, ["prevent"]), ["space"])), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)(doToggle, ["prevent"]), ["enter"])],
20495
20524
  onKeyup: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)(doToggle, ["prevent"]), ["space"]),
@@ -20712,7 +20741,10 @@ var cvLink = __webpack_require__(7174);
20712
20741
 
20713
20742
 
20714
20743
 
20715
- var _hoisted_1 = ["role"];
20744
+ var _hoisted_1 = {
20745
+ class: "cv-header-menu-item",
20746
+ role: "none"
20747
+ };
20716
20748
 
20717
20749
 
20718
20750
 
@@ -20726,7 +20758,7 @@ var _hoisted_1 = ["role"];
20726
20758
  },
20727
20759
  role: {
20728
20760
  type: String,
20729
- default: undefined
20761
+ default: 'menuitem'
20730
20762
  }
20731
20763
  }, cvLink/* props */.xk),
20732
20764
  setup: function setup(__props) {
@@ -20736,14 +20768,15 @@ var _hoisted_1 = ["role"];
20736
20768
  var activePage = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(function () {
20737
20769
  return props.active && props.ariaCurrent !== 'page';
20738
20770
  });
20771
+ var tabindex = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(function () {
20772
+ return props.role === 'menuitem' ? '0' : undefined;
20773
+ });
20739
20774
  return function (_ctx, _cache) {
20740
- return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("li", {
20741
- class: "cv-header-menu-item",
20742
- role: __props.role
20743
- }, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveDynamicComponent)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(tagType)), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)((0,objectSpread2/* default */.A)((0,objectSpread2/* default */.A)({}, _ctx.$attrs), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(linkProps)), {
20775
+ return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("li", _hoisted_1, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.resolveDynamicComponent)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(tagType)), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.mergeProps)((0,objectSpread2/* default */.A)((0,objectSpread2/* default */.A)({}, _ctx.$attrs), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(linkProps)), {
20744
20776
  class: ["".concat((0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(settings/* carbonPrefix */.s), "--header__menu-item"), (0,defineProperty/* default */.A)({}, "".concat((0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(settings/* carbonPrefix */.s), "--header__menu-item--current"), activePage.value)],
20745
- role: "menuitem",
20746
- "aria-current": __props.ariaCurrent
20777
+ "aria-current": __props.ariaCurrent,
20778
+ role: __props.role,
20779
+ tabindex: tabindex.value
20747
20780
  }), {
20748
20781
  default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function () {
20749
20782
  return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("span", {
@@ -20751,7 +20784,7 @@ var _hoisted_1 = ["role"];
20751
20784
  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")], 2)];
20752
20785
  }),
20753
20786
  _: 3
20754
- }, 16, ["class", "aria-current"]))], 8, _hoisted_1);
20787
+ }, 16, ["class", "aria-current", "role", "tabindex"]))]);
20755
20788
  };
20756
20789
  }
20757
20790
  });
@@ -20843,17 +20876,27 @@ __webpack_require__.d(__webpack_exports__, {
20843
20876
  "default": function() { return /* binding */ CvHeaderNav; }
20844
20877
  });
20845
20878
 
20879
+ // EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.assign.js
20880
+ var es_object_assign = __webpack_require__(9218);
20846
20881
  // EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
20847
20882
  var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__(4100);
20848
20883
  // EXTERNAL MODULE: ./src/global/settings.js
20849
20884
  var settings = __webpack_require__(8470);
20850
20885
  ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/CvUIShell/CvHeaderNav.vue?vue&type=script&setup=true&lang=js
20851
20886
 
20852
- var _hoisted_1 = ["ariaLabeldBy"];
20853
20887
 
20854
- /* harmony default export */ var CvHeaderNavvue_type_script_setup_true_lang_js = ({
20888
+ var _hoisted_1 = ["aria-label", "aria-labelledby"];
20889
+
20890
+ var __default__ = {
20891
+ inheritAttrs: false
20892
+ };
20893
+ /* harmony default export */ var CvHeaderNavvue_type_script_setup_true_lang_js = (/*@__PURE__*/Object.assign(__default__, {
20855
20894
  __name: 'CvHeaderNav',
20856
20895
  props: {
20896
+ ariaLabel: {
20897
+ type: String,
20898
+ default: undefined
20899
+ },
20857
20900
  ariaLabelledBy: {
20858
20901
  type: String,
20859
20902
  default: undefined
@@ -20866,11 +20909,13 @@ var _hoisted_1 = ["ariaLabeldBy"];
20866
20909
  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("ul", {
20867
20910
  class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)("".concat((0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(settings/* carbonPrefix */.s), "--header__menu-bar")),
20868
20911
  role: "menubar",
20869
- ariaLabeldBy: __props.ariaLabelledBy
20912
+ "aria-orientation": "horizontal",
20913
+ "aria-label": __props.ariaLabel || _ctx.$attrs['aria-label'],
20914
+ "aria-labelledby": __props.ariaLabelledBy || _ctx.$attrs['aria-labelledby']
20870
20915
  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1)], 2);
20871
20916
  };
20872
20917
  }
20873
- });
20918
+ }));
20874
20919
  ;// ./src/components/CvUIShell/CvHeaderNav.vue?vue&type=script&setup=true&lang=js
20875
20920
 
20876
20921
  ;// ./src/components/CvUIShell/CvHeaderNav.vue
@@ -20897,6 +20942,10 @@ __webpack_require__.d(__webpack_exports__, {
20897
20942
 
20898
20943
  // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js + 2 modules
20899
20944
  var defineProperty = __webpack_require__(139);
20945
+ // EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.to-string.js
20946
+ var es_object_to_string = __webpack_require__(5086);
20947
+ // EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom-collections.for-each.js
20948
+ var web_dom_collections_for_each = __webpack_require__(8379);
20900
20949
  // EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
20901
20950
  var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__(4100);
20902
20951
  // EXTERNAL MODULE: ./src/global/settings.js
@@ -20906,7 +20955,9 @@ var event_bus = __webpack_require__(9535);
20906
20955
  ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/CvUIShell/CvHeaderPanel.vue?vue&type=script&setup=true&lang=js
20907
20956
 
20908
20957
 
20909
- var _hoisted_1 = ["id", "aria-hidden"];
20958
+
20959
+
20960
+ var _hoisted_1 = ["id", "aria-hidden", "inert"];
20910
20961
 
20911
20962
 
20912
20963
 
@@ -20988,6 +21039,29 @@ var _hoisted_1 = ["id", "aria-hidden"];
20988
21039
  }, function () {
20989
21040
  panelExpanded.value = props.expanded;
20990
21041
  });
21042
+ function manageFocusableElements(isExpanded) {
21043
+ if (!el.value) return;
21044
+ var focusableElements = el.value.querySelectorAll('a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])');
21045
+ focusableElements.forEach(function (element) {
21046
+ if (isExpanded) {
21047
+ // Restore original tabindex when expanded
21048
+ var originalTabindex = element.getAttribute('data-original-tabindex');
21049
+ if (originalTabindex !== null) {
21050
+ if (originalTabindex === 'null') {
21051
+ element.removeAttribute('tabindex');
21052
+ } else {
21053
+ element.setAttribute('tabindex', originalTabindex);
21054
+ }
21055
+ element.removeAttribute('data-original-tabindex');
21056
+ }
21057
+ } else {
21058
+ // Store original tabindex and set to -1 when collapsed
21059
+ var currentTabindex = element.getAttribute('tabindex');
21060
+ element.setAttribute('data-original-tabindex', currentTabindex || 'null');
21061
+ element.setAttribute('tabindex', '-1');
21062
+ }
21063
+ });
21064
+ }
20991
21065
  var emit = __emit;
20992
21066
  (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(panelExpanded, function (current) {
20993
21067
  emit('update:expanded', current);
@@ -20995,6 +21069,18 @@ var _hoisted_1 = ["id", "aria-hidden"];
20995
21069
  id: props.id,
20996
21070
  expanded: current
20997
21071
  });
21072
+
21073
+ // Manage focusable elements
21074
+ (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(function () {
21075
+ manageFocusableElements(current);
21076
+ });
21077
+ });
21078
+
21079
+ // Initial setup of focusable elements
21080
+ (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(function () {
21081
+ (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(function () {
21082
+ manageFocusableElements(panelExpanded.value);
21083
+ });
20998
21084
  });
20999
21085
  return function (_ctx, _cache) {
21000
21086
  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
@@ -21003,6 +21089,7 @@ var _hoisted_1 = ["id", "aria-hidden"];
21003
21089
  ref: el,
21004
21090
  class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(["cv-header-panel", "".concat((0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(settings/* carbonPrefix */.s), "--header-panel"), (0,defineProperty/* default */.A)({}, "".concat((0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(settings/* carbonPrefix */.s), "--header-panel--expanded"), panelExpanded.value)]),
21005
21091
  "aria-hidden": !panelExpanded.value ? 'true' : 'false',
21092
+ inert: !panelExpanded.value,
21006
21093
  onFocusout: onFocusout,
21007
21094
  onMousedown: onMouseDown
21008
21095
  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")], 42, _hoisted_1);
@@ -21035,6 +21122,10 @@ __webpack_require__.d(__webpack_exports__, {
21035
21122
 
21036
21123
  // EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/defineProperty.js + 2 modules
21037
21124
  var defineProperty = __webpack_require__(139);
21125
+ // EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.to-string.js
21126
+ var es_object_to_string = __webpack_require__(5086);
21127
+ // EXTERNAL MODULE: ./node_modules/core-js/modules/web.dom-collections.for-each.js
21128
+ var web_dom_collections_for_each = __webpack_require__(8379);
21038
21129
  // EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.fixed.js
21039
21130
  var es_string_fixed = __webpack_require__(9607);
21040
21131
  // EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
@@ -21133,7 +21224,9 @@ var event_bus = __webpack_require__(9535);
21133
21224
 
21134
21225
 
21135
21226
 
21136
- var CvSideNavvue_type_script_setup_true_lang_js_hoisted_1 = ["id", "aria-hidden"];
21227
+
21228
+
21229
+ var CvSideNavvue_type_script_setup_true_lang_js_hoisted_1 = ["id", "aria-hidden", "inert"];
21137
21230
 
21138
21231
 
21139
21232
 
@@ -21211,6 +21304,30 @@ var CvSideNavvue_type_script_setup_true_lang_js_hoisted_1 = ["id", "aria-hidden"
21211
21304
  }, function () {
21212
21305
  panelExpanded.value = props.expanded;
21213
21306
  });
21307
+ // Manage focusable elements when panel visibility changes
21308
+ function manageFocusableElements(isExpanded, isFixed) {
21309
+ if (!el.value || isFixed) return;
21310
+ var focusableElements = el.value.querySelectorAll('a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])');
21311
+ focusableElements.forEach(function (element) {
21312
+ if (isExpanded) {
21313
+ // Restore original tabindex when expanded
21314
+ var originalTabindex = element.getAttribute('data-original-tabindex');
21315
+ if (originalTabindex !== null) {
21316
+ if (originalTabindex === 'null') {
21317
+ element.removeAttribute('tabindex');
21318
+ } else {
21319
+ element.setAttribute('tabindex', originalTabindex);
21320
+ }
21321
+ element.removeAttribute('data-original-tabindex');
21322
+ }
21323
+ } else {
21324
+ // Store original tabindex and set to -1 when collapsed
21325
+ var currentTabindex = element.getAttribute('tabindex');
21326
+ element.setAttribute('data-original-tabindex', currentTabindex || 'null');
21327
+ element.setAttribute('tabindex', '-1');
21328
+ }
21329
+ });
21330
+ }
21214
21331
  var emit = __emit;
21215
21332
  var isPanelExpanded = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(function () {
21216
21333
  return panelExpanded.value || expandedViaHoverState.value;
@@ -21221,6 +21338,11 @@ var CvSideNavvue_type_script_setup_true_lang_js_hoisted_1 = ["id", "aria-hidden"
21221
21338
  id: props.id,
21222
21339
  expanded: current
21223
21340
  });
21341
+
21342
+ // Manage focusable elements for non-fixed nav
21343
+ (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(function () {
21344
+ manageFocusableElements(current, props.fixed);
21345
+ });
21224
21346
  });
21225
21347
  var isChildOfHeader = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(function () {
21226
21348
  return !!bus.value;
@@ -21253,6 +21375,7 @@ var CvSideNavvue_type_script_setup_true_lang_js_hoisted_1 = ["id", "aria-hidden"
21253
21375
  ref: el,
21254
21376
  class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(["cv-side-nav", "".concat((0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(settings/* carbonPrefix */.s), "--side-nav"), "".concat((0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(settings/* carbonPrefix */.s), "--side-nav__navigation"), (_ref2 = {}, (0,defineProperty/* default */.A)(_ref2, "".concat((0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(settings/* carbonPrefix */.s), "--side-nav--expanded"), panelExpanded.value), (0,defineProperty/* default */.A)(_ref2, "".concat((0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(settings/* carbonPrefix */.s), "--side-nav--rail"), __props.rail), (0,defineProperty/* default */.A)(_ref2, "".concat((0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(settings/* carbonPrefix */.s), "--side-nav--collapsed"), !panelExpanded.value && __props.fixed), (0,defineProperty/* default */.A)(_ref2, "".concat((0,external_commonjs_vue_commonjs2_vue_root_Vue_.unref)(settings/* carbonPrefix */.s), "--side-nav--ux"), isChildOfHeader.value), _ref2)]),
21255
21377
  "aria-hidden": !panelExpanded.value && !__props.fixed ? 'true' : 'false',
21378
+ inert: !panelExpanded.value && !__props.fixed,
21256
21379
  onFocusout: onFocusout,
21257
21380
  onMousedown: onMouseDown,
21258
21381
  onMouseenter: _cache[0] || (_cache[0] = function ($event) {
@@ -42232,7 +42355,7 @@ var map = {
42232
42355
  "./CvDataTable/CvDataTableHeading.vue": 1829,
42233
42356
  "./CvDataTable/CvDataTableRow.vue": 7270,
42234
42357
  "./CvDataTable/CvDataTableSkeleton.vue": 9587,
42235
- "./CvDatePicker/CvDatePicker.vue": 3347,
42358
+ "./CvDatePicker/CvDatePicker.vue": 8192,
42236
42359
  "./CvDatePicker/CvDatePickerSkeleton.vue": 8607,
42237
42360
  "./CvDropdown/CvDropdown.vue": 2124,
42238
42361
  "./CvDropdown/CvDropdownItem.vue": 4895,
@@ -42242,7 +42365,7 @@ var map = {
42242
42365
  "./CvFileUploader/CvFileUploaderSkeleton.vue": 4238,
42243
42366
  "./CvForm/CvForm.vue": 9005,
42244
42367
  "./CvForm/CvFormGroup.vue": 8657,
42245
- "./CvForm/CvFormItem.vue": 8653,
42368
+ "./CvForm/CvFormItem.vue": 1034,
42246
42369
  "./CvGrid/CvColumn.vue": 2117,
42247
42370
  "./CvGrid/CvGrid.vue": 6999,
42248
42371
  "./CvGrid/CvRow.vue": 1927,
@@ -43115,6 +43238,7 @@ __webpack_require__.d(__webpack_exports__, {
43115
43238
  CvToggle: function() { return /* reexport */ CvToggle["default"]; },
43116
43239
  CvToggleSkeleton: function() { return /* reexport */ CvToggle_Skeleton["default"]; },
43117
43240
  CvTooltip: function() { return /* reexport */ CvTooltip["default"]; },
43241
+ PanelFocusTestComponent: function() { return /* reexport */ PanelFocusTestComponent; },
43118
43242
  "default": function() { return /* binding */ entry_lib; }
43119
43243
  });
43120
43244
 
@@ -43222,7 +43346,7 @@ var CvDataTableRow = __webpack_require__(7270);
43222
43346
  // EXTERNAL MODULE: ./src/components/CvDataTable/CvDataTableSkeleton.vue + 2 modules
43223
43347
  var CvDataTableSkeleton = __webpack_require__(9587);
43224
43348
  // EXTERNAL MODULE: ./src/components/CvDatePicker/CvDatePicker.vue + 15 modules
43225
- var CvDatePicker = __webpack_require__(3347);
43349
+ var CvDatePicker = __webpack_require__(8192);
43226
43350
  // EXTERNAL MODULE: ./src/components/CvDatePicker/CvDatePickerSkeleton.vue + 4 modules
43227
43351
  var CvDatePickerSkeleton = __webpack_require__(8607);
43228
43352
  // EXTERNAL MODULE: ./src/components/CvDropdown/CvDropdown.vue + 2 modules
@@ -43242,7 +43366,7 @@ var CvForm = __webpack_require__(9005);
43242
43366
  // EXTERNAL MODULE: ./src/components/CvForm/CvFormGroup.vue + 2 modules
43243
43367
  var CvFormGroup = __webpack_require__(8657);
43244
43368
  // EXTERNAL MODULE: ./src/components/CvForm/CvFormItem.vue + 2 modules
43245
- var CvFormItem = __webpack_require__(8653);
43369
+ var CvFormItem = __webpack_require__(1034);
43246
43370
  // EXTERNAL MODULE: ./src/components/CvGrid/CvColumn.vue + 3 modules
43247
43371
  var CvColumn = __webpack_require__(2117);
43248
43372
  // EXTERNAL MODULE: ./src/components/CvGrid/CvGrid.vue + 2 modules
@@ -43393,6 +43517,94 @@ var CvSwitcher = __webpack_require__(9198);
43393
43517
  var CvSwitcherItem = __webpack_require__(7525);
43394
43518
  // EXTERNAL MODULE: ./src/components/CvUIShell/CvSwitcherItemLink.vue + 2 modules
43395
43519
  var CvSwitcherItemLink = __webpack_require__(7233);
43520
+ // EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
43521
+ var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__(4100);
43522
+ ;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/cli-service/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/CvUIShell/__tests__/PanelFocusTestComponent.vue?vue&type=script&setup=true&lang=js
43523
+
43524
+
43525
+
43526
+
43527
+
43528
+
43529
+
43530
+ /* harmony default export */ var PanelFocusTestComponentvue_type_script_setup_true_lang_js = ({
43531
+ __name: 'PanelFocusTestComponent',
43532
+ setup: function setup(__props) {
43533
+ return function (_ctx, _cache) {
43534
+ return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Fragment, null, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(CvHeader["default"], null, {
43535
+ "header-global": (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function () {
43536
+ return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(CvHeaderGlobalAction["default"], {
43537
+ "data-testid": "action-button",
43538
+ "aria-label": "List links",
43539
+ "aria-controls": "links-panel",
43540
+ label: "Links"
43541
+ }, {
43542
+ default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function () {
43543
+ return _cache[0] || (_cache[0] = [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createTextVNode)(" Links ")]);
43544
+ }),
43545
+ _: 1
43546
+ })];
43547
+ }),
43548
+ "right-panels": (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function () {
43549
+ return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(CvHeaderPanel["default"], {
43550
+ id: "links-panel",
43551
+ "data-testid": "links-panel"
43552
+ }, {
43553
+ default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function () {
43554
+ return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(CvSwitcher["default"], null, {
43555
+ default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function () {
43556
+ return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(CvSwitcherItem["default"], null, {
43557
+ default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function () {
43558
+ return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(CvSwitcherItemLink["default"], {
43559
+ href: "javascript:void(0)",
43560
+ "data-testid": "link-1",
43561
+ selected: ""
43562
+ }, {
43563
+ default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function () {
43564
+ return _cache[1] || (_cache[1] = [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createTextVNode)(" Selected app ")]);
43565
+ }),
43566
+ _: 1
43567
+ })];
43568
+ }),
43569
+ _: 1
43570
+ }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(CvSwitcherItem["default"], null, {
43571
+ default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function () {
43572
+ return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createVNode)(CvSwitcherItemLink["default"], {
43573
+ href: "javascript:void(0)",
43574
+ "data-testid": "link-2"
43575
+ }, {
43576
+ default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withCtx)(function () {
43577
+ return _cache[2] || (_cache[2] = [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createTextVNode)(" Other app ")]);
43578
+ }),
43579
+ _: 1
43580
+ })];
43581
+ }),
43582
+ _: 1
43583
+ })];
43584
+ }),
43585
+ _: 1
43586
+ })];
43587
+ }),
43588
+ _: 1
43589
+ })];
43590
+ }),
43591
+ _: 1
43592
+ }), _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("input", {
43593
+ type: "text",
43594
+ "data-testid": "outer-input"
43595
+ }, null, -1))], 64);
43596
+ };
43597
+ }
43598
+ });
43599
+ ;// ./src/components/CvUIShell/__tests__/PanelFocusTestComponent.vue?vue&type=script&setup=true&lang=js
43600
+
43601
+ ;// ./src/components/CvUIShell/__tests__/PanelFocusTestComponent.vue
43602
+
43603
+
43604
+
43605
+ const __exports__ = PanelFocusTestComponentvue_type_script_setup_true_lang_js;
43606
+
43607
+ /* harmony default export */ var PanelFocusTestComponent = (__exports__);
43396
43608
  ;// ./src/index.js
43397
43609
 
43398
43610
 
@@ -43578,6 +43790,7 @@ var components = ctx.keys().map(function (k) {
43578
43790
 
43579
43791
 
43580
43792
 
43793
+
43581
43794
 
43582
43795
 
43583
43796
  ;// ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js