@carbon/vue 3.0.25 → 3.0.27

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@carbon/vue",
-  "version": "3.0.24",
+  "version": "3.0.26",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5595,6 +5595,14 @@
             "module": "./src/components/CvTooltip/CvTooltip.vue",
             "symbol": "default"
           }
+        },
+        {
+          "name": "PanelFocusTestComponent",
+          "description": "",
+          "source": {
+            "module": "./src/components/CvUIShell/__tests__/PanelFocusTestComponent.vue",
+            "symbol": "default"
+          }
         }
       ]
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.25",
+  "version": "3.0.27",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
   "packageManager": "yarn@3.2.0",
   "main": "dist/carbon-vue-3.umd.min.js",

package/src/components/CvDatePicker/CvDatePicker.vue

@@ -40,7 +40,8 @@
             ref="date"
             type="text"
             data-date-picker-input
-            role="datepicker"
+            data-testid="datepicker"
+            :aria-description="placeholder"
             :data-invalid="isInvalid || null"
             :disabled="disabled || null"
             :data-date-picker-input-from="`${getKind === 'range'}`"
@@ -85,7 +86,8 @@
             ref="todate"
             type="text"
             data-date-picker-input
-            role="todatepicker"
+            data-testid="todatepicker"
+            :aria-description="placeholder"
             :data-date-picker-input-to="`${kind === 'range'}`"
             :data-invalid="isInvalid || null"
             :disabled="disabled || null"

package/src/components/CvSvg/_CvSvg.vue

@@ -33,7 +33,7 @@ export default {
         return h(props.svg);
       } else if (isSvg.value) {
         // an SVG document
-        return h('svg', { domProps: { innerHTML: props.svg } });
+        return h('svg', { innerHTML: props.svg });
       } else {
         if (isSymbol.value) {
           return h('svg', {}, [h('use', { attrs: { href: props.svg } })]);

package/src/components/CvSvg/__tests__/__snapshots__/CvSvg.spec.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Svg with fake icon renders the SVG inline 1`] = `
+<svg>
+  <!--?xml version="1.0" encoding="utf-8"?--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="root">
+    <g fill-rule="evenodd" id="g">
+      <path id="path" d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"></path>
+    </g>
+  </svg>
+</svg>
+`;

package/src/components/CvUIShell/CvHeader.vue

@@ -192,10 +192,10 @@ function onCvPanelFocusout(payload) {
     item => item.ariaControls === srcComponent.id
   );
   if (
-    srcComponent.el !== srcEvent.relatedTarget &&
-    !srcComponent.el.contains(srcEvent.relatedTarget) &&
+    srcComponent.el.value !== srcEvent.relatedTarget &&
+    !srcComponent.el.value.contains(srcEvent.relatedTarget) &&
     found &&
-    found.el !== srcEvent.relatedTarget
+    found.el.value !== srcEvent.relatedTarget
   ) {
     onCvPanelControlToggle(found, false);
   }

package/src/components/CvUIShell/__tests__/PanelFocusTestComponent.vue

@@ -0,0 +1,47 @@
+<script setup>
+import CvHeader from '../CvHeader.vue';
+import CvHeaderGlobalAction from '../CvHeaderGlobalAction.vue';
+import CvHeaderPanel from '../CvHeaderPanel.vue';
+import CvSwitcher from '../CvSwitcher.vue';
+import CvSwitcherItem from '../CvSwitcherItem.vue';
+import CvSwitcherItemLink from '../CvSwitcherItemLink.vue';
+</script>
+
+<template>
+  <cv-header>
+    <template #header-global>
+      <cv-header-global-action
+        data-testid="action-button"
+        aria-label="List links"
+        aria-controls="links-panel"
+        label="Links"
+      >
+        Links
+      </cv-header-global-action>
+    </template>
+    <template #right-panels>
+      <cv-header-panel id="links-panel" data-testid="links-panel">
+        <cv-switcher>
+          <cv-switcher-item>
+            <cv-switcher-item-link
+              href="javascript:void(0)"
+              data-testid="link-1"
+              selected
+            >
+              Selected app
+            </cv-switcher-item-link>
+          </cv-switcher-item>
+          <cv-switcher-item>
+            <cv-switcher-item-link
+              href="javascript:void(0)"
+              data-testid="link-2"
+            >
+              Other app
+            </cv-switcher-item-link>
+          </cv-switcher-item>
+        </cv-switcher>
+      </cv-header-panel>
+    </template>
+  </cv-header>
+  <input type="text" data-testid="outer-input" />
+</template>

package/src/index.js

@@ -158,3 +158,4 @@ export { default as CvSkipToContent } from './components/CvUIShell/CvSkipToConte
 export { default as CvSwitcher } from './components/CvUIShell/CvSwitcher.vue';
 export { default as CvSwitcherItem } from './components/CvUIShell/CvSwitcherItem.vue';
 export { default as CvSwitcherItemLink } from './components/CvUIShell/CvSwitcherItemLink.vue';
+export { default as PanelFocusTestComponent } from './components/CvUIShell/__tests__/PanelFocusTestComponent.vue';