@carbon/vue 3.0.26 → 3.0.29

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@carbon/vue",
-  "version": "3.0.25",
+  "version": "3.0.28",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -770,6 +770,14 @@
                 "type": "string"
               },
               "default": "'main'"
+            },
+            {
+              "name": "id",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "'main-content'"
             }
           ],
           "slots": [
@@ -2280,7 +2288,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "undefined"
+              "default": "'menuitem'"
             }
           ],
           "slots": [
@@ -2320,6 +2328,14 @@
           "name": "CvHeaderNav",
           "description": "",
           "attributes": [
+            {
+              "name": "ariaLabel",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "undefined"
+            },
             {
               "name": "ariaLabelledBy",
               "value": {
@@ -5595,6 +5611,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.26",
+  "version": "3.0.29",
   "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/CvDropdown/CvDropdown.vue

@@ -323,6 +323,13 @@ const wrapperStyleOverride = computed(() => {
 });
 const el = ref(null);
 function onClickOut() {
+  // Move focus to button if focus is inside dropdown list
+  const dropListEl = dropList.value;
+  if (dropListEl && dropListEl.contains(document.activeElement)) {
+    if (button.value && typeof button.value.focus === 'function') {
+      button.value.focus();
+    }
+  }
   open.value = false;
 }
 onClickOutside(el, onClickOut);
@@ -372,8 +379,14 @@ function onUp() {
   }
 }
 function onEsc() {
+  // Move focus to button if focus is inside dropdown list
+  const dropListEl = dropList.value;
+  if (dropListEl && dropListEl.contains(document.activeElement)) {
+    if (button.value && typeof button.value.focus === 'function') {
+      button.value.focus();
+    }
+  }
   open.value = false;
-  doFocus();
 }
 const button = ref(null);
 const listBox = ref(null);
@@ -384,8 +397,10 @@ function onTab(ev) {
       open.value = false;
     } else if (ev.target === null || listBox.value?.contains(ev.target)) {
       // list has focus, close and return focus to dropdown
+      if (button.value && typeof button.value.focus === 'function') {
+        button.value.focus();
+      }
       open.value = false;
-      doFocus();
       ev.preventDefault();
     }
   }
@@ -394,9 +409,6 @@ function onClick(ev) {
   if (props.disabled) {
     ev.preventDefault();
   } else {
-    open.value = !open.value;
-    doFocus(); // open or close (Some browsers do not focus on button when clicked)
-
     let target = ev.target;
     while (
       !target.classList.contains(`${carbonPrefix}--dropdown-link`) &&
@@ -408,6 +420,14 @@ function onClick(ev) {
     if (target.classList.contains(`${carbonPrefix}--dropdown-link`)) {
       const targetItemEl = target.parentNode;
       dataValue.value = targetItemEl.getAttribute('data-value');
+      // Move focus to button before closing
+      if (button.value && typeof button.value.focus === 'function') {
+        button.value.focus();
+      }
+      open.value = false;
+    } else {
+      open.value = !open.value;
+      doFocus(); // open or close (Some browsers do not focus on button when clicked)
     }
   }
 }

package/src/components/CvUIShell/CvContent.vue

@@ -2,11 +2,17 @@
 import { carbonPrefix } from '../../global/settings';
 defineProps({
   tagType: { type: String, default: 'main' },
+  id: { type: String, default: 'main-content' },
 });
 </script>
 
 <template>
-  <component :is="tagType" :class="`${carbonPrefix}--content`">
+  <component
+    :is="tagType"
+    :id="id"
+    :class="`${carbonPrefix}--content`"
+    tabindex="-1"
+  >
     <slot />
   </component>
 </template>

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/CvHeaderMenu.vue

@@ -2,6 +2,7 @@
   <li
     ref="el"
     :class="`cv-header-menu ${carbonPrefix}--header__submenu`"
+    role="menuitem"
     @mouseenter="doHoverToggle(true)"
     @mouseleave="doHoverToggle(false)"
   >
@@ -10,9 +11,9 @@
       :aria-expanded="data.expanded ? 'true' : 'false'"
       :class="`${carbonPrefix}--header__menu-item ${carbonPrefix}--header__menu-title`"
       href="javascript:void(0)"
-      role="menuitem"
       tabindex="0"
       :aria-label="$attrs.ariaLabel"
+      role="button"
       @click="doToggle"
       @keydown.space.prevent
       @keyup.space.prevent="doToggle"

package/src/components/CvUIShell/CvHeaderMenuItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <li class="cv-header-menu-item" :role="role">
+  <li class="cv-header-menu-item" role="none">
     <component
       :is="tagType"
       v-bind="{ ...$attrs, ...linkProps }"
@@ -7,8 +7,9 @@
         `${carbonPrefix}--header__menu-item`,
         { [`${carbonPrefix}--header__menu-item--current`]: activePage },
       ]"
-      role="menuitem"
       :aria-current="ariaCurrent"
+      :role="role"
+      :tabindex="tabindex"
     >
       <span :class="`${carbonPrefix}--text-truncate--end`">
         <slot />
@@ -25,7 +26,7 @@ import { computed } from 'vue';
 const props = defineProps({
   active: Boolean,
   ariaCurrent: { type: String, default: undefined },
-  role: { type: String, default: undefined },
+  role: { type: String, default: 'menuitem' },
   ...propsLink,
 });
 
@@ -35,4 +36,8 @@ const linkProps = useLinkProps(props);
 const activePage = computed(() => {
   return props.active && props.ariaCurrent !== 'page';
 });
+
+const tabindex = computed(() => {
+  return props.role === 'menuitem' ? '0' : undefined;
+});
 </script>

package/src/components/CvUIShell/CvHeaderNav.vue

@@ -3,16 +3,25 @@
     <ul
       :class="`${carbonPrefix}--header__menu-bar`"
       role="menubar"
-      :ariaLabeldBy="ariaLabelledBy"
+      aria-orientation="horizontal"
+      :aria-label="ariaLabel || $attrs['aria-label']"
+      :aria-labelledby="ariaLabelledBy || $attrs['aria-labelledby']"
     >
       <slot />
     </ul>
   </nav>
 </template>
 
+<script>
+export default {
+  inheritAttrs: false,
+};
+</script>
+
 <script setup>
 import { carbonPrefix } from '../../global/settings';
 defineProps({
+  ariaLabel: { type: String, default: undefined },
   ariaLabelledBy: { type: String, default: undefined },
 });
 </script>

package/src/components/CvUIShell/CvHeaderPanel.vue

@@ -8,6 +8,7 @@
       { [`${carbonPrefix}--header-panel--expanded`]: panelExpanded },
     ]"
     :aria-hidden="!panelExpanded ? 'true' : 'false'"
+    :inert="!panelExpanded"
     @focusout="onFocusout"
     @mousedown="onMouseDown"
   >
@@ -20,6 +21,7 @@ import { carbonPrefix } from '../../global/settings';
 import {
   computed,
   inject,
+  nextTick,
   onBeforeUnmount,
   onMounted,
   reactive,
@@ -99,9 +101,49 @@ watch(
   }
 );
 
+function manageFocusableElements(isExpanded) {
+  if (!el.value) return;
+
+  const focusableElements = el.value.querySelectorAll(
+    'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+  );
+
+  focusableElements.forEach(element => {
+    if (isExpanded) {
+      // Restore original tabindex when expanded
+      const originalTabindex = element.getAttribute('data-original-tabindex');
+      if (originalTabindex !== null) {
+        if (originalTabindex === 'null') {
+          element.removeAttribute('tabindex');
+        } else {
+          element.setAttribute('tabindex', originalTabindex);
+        }
+        element.removeAttribute('data-original-tabindex');
+      }
+    } else {
+      // Store original tabindex and set to -1 when collapsed
+      const currentTabindex = element.getAttribute('tabindex');
+      element.setAttribute('data-original-tabindex', currentTabindex || 'null');
+      element.setAttribute('tabindex', '-1');
+    }
+  });
+}
+
 const emit = defineEmits(['update:expanded', 'panel-resize']);
 watch(panelExpanded, current => {
   emit('update:expanded', current);
   emit('panel-resize', { id: props.id, expanded: current });
+
+  // Manage focusable elements
+  nextTick(() => {
+    manageFocusableElements(current);
+  });
+});
+
+// Initial setup of focusable elements
+onMounted(() => {
+  nextTick(() => {
+    manageFocusableElements(panelExpanded.value);
+  });
 });
 </script>

package/src/components/CvUIShell/CvSideNav.vue

@@ -14,6 +14,7 @@
       },
     ]"
     :aria-hidden="!panelExpanded && !fixed ? 'true' : 'false'"
+    :inert="!panelExpanded && !fixed"
     @focusout="onFocusout"
     @mousedown="onMouseDown"
     @mouseenter="onHoverToggle(true)"
@@ -33,6 +34,7 @@
 import {
   computed,
   inject,
+  nextTick,
   onBeforeUnmount,
   onMounted,
   reactive,
@@ -110,6 +112,35 @@ watch(
     panelExpanded.value = props.expanded;
   }
 );
+// Manage focusable elements when panel visibility changes
+function manageFocusableElements(isExpanded, isFixed) {
+  if (!el.value || isFixed) return;
+
+  const focusableElements = el.value.querySelectorAll(
+    'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+  );
+
+  focusableElements.forEach(element => {
+    if (isExpanded) {
+      // Restore original tabindex when expanded
+      const originalTabindex = element.getAttribute('data-original-tabindex');
+      if (originalTabindex !== null) {
+        if (originalTabindex === 'null') {
+          element.removeAttribute('tabindex');
+        } else {
+          element.setAttribute('tabindex', originalTabindex);
+        }
+        element.removeAttribute('data-original-tabindex');
+      }
+    } else {
+      // Store original tabindex and set to -1 when collapsed
+      const currentTabindex = element.getAttribute('tabindex');
+      element.setAttribute('data-original-tabindex', currentTabindex || 'null');
+      element.setAttribute('tabindex', '-1');
+    }
+  });
+}
+
 const emit = defineEmits(['update:expanded', 'panel-resize']);
 const isPanelExpanded = computed(
   () => panelExpanded.value || expandedViaHoverState.value
@@ -117,6 +148,11 @@ const isPanelExpanded = computed(
 watch(isPanelExpanded, current => {
   emit('update:expanded', current);
   emit('panel-resize', { id: props.id, expanded: current });
+
+  // Manage focusable elements for non-fixed nav
+  nextTick(() => {
+    manageFocusableElements(current, props.fixed);
+  });
 });
 
 const isChildOfHeader = computed(() => {

package/src/components/CvUIShell/CvUIShell.stories.mdx

@@ -19,6 +19,7 @@ import CvSideNavLink from './CvSideNavLink.vue';
 import CvSideNavMenu from './CvSideNavMenu.vue';
 import CvSideNavMenuDivider from './CvSideNavMenuDivider.vue';
 import CvSideNavMenuItem from './CvSideNavMenuItem.vue';
+import CvContent from './CvContent.vue';
 import {
   Notification20,
   UserAvatar20,
@@ -55,6 +56,7 @@ export const Template = args => ({
     CvSideNavMenu,
     CvSideNavMenuDivider,
     CvSideNavMenuItem,
+    CvContent,
     Notification20,
     UserAvatar20,
     Login20,
@@ -89,22 +91,12 @@ const defaultTemplate = `
     [Platform]
   </cv-header-name>
   <cv-header-nav aria-label="Carbon nav">
-    <cv-header-menu-item href="javascript:void(0)">
-      Link 1
-    </cv-header-menu-item>
-    <cv-header-menu-item href="javascript:void(0)">
-      Link 2
-    </cv-header-menu-item>
+    <cv-header-menu-item href="javascript:void(0)">Link 1</cv-header-menu-item>
+    <cv-header-menu-item href="javascript:void(0)">Link 2</cv-header-menu-item>
     <cv-header-menu aria-label="Link 3" title="Link 3">
-      <cv-header-menu-item href="javascript:void(0)">
-        Submenu Link 1
-      </cv-header-menu-item>
-      <cv-header-menu-item href="javascript:void(0)">
-        Submenu Link 2
-      </cv-header-menu-item>
-      <cv-header-menu-item href="javascript:void(0)">
-        Submenu Link 3
-      </cv-header-menu-item>
+      <cv-header-menu-item href="javascript:void(0)">Submenu Link 1</cv-header-menu-item>
+      <cv-header-menu-item href="javascript:void(0)">Submenu Link 2</cv-header-menu-item>
+      <cv-header-menu-item href="javascript:void(0)">Submenu Link 3</cv-header-menu-item>
     </cv-header-menu>
   </cv-header-nav>
   <template v-slot:header-global>
@@ -162,6 +154,10 @@ const defaultTemplate = `
     </cv-header-panel>
   </template>
 </cv-header>
+<cv-content>
+  <h1>Main Content</h1>
+  <p>This is the main content area that the skip link targets.</p>
+</cv-content>
 `;
 const railTemplate = `
 <cv-header aria-label="Carbon header">
@@ -196,6 +192,10 @@ const railTemplate = `
     </cv-side-nav>
   </template>
 </cv-header>
+<cv-content>
+  <h1>Main Content</h1>
+  <p>This is the main content area that the skip link targets.</p>
+</cv-content>
 `;
 const fixedSideNavTemplate = `
 <cv-header aria-label="Carbon header">
@@ -231,6 +231,10 @@ const fixedSideNavTemplate = `
     </cv-side-nav-link>
   </cv-side-nav-items>
 </cv-side-nav>
+<cv-content>
+  <h1>Main Content</h1>
+  <p>This is the main content area that the skip link targets.</p>
+</cv-content>
 `;
 
 # UI Shell components

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';