srcdev-nuxt-components 9.4.5 → 9.4.6

package/app/components/03.organisms/responsive-header/ResponsiveHeader.vue

@@ -9,7 +9,7 @@
       ref="mainNav"
       class="main-navigation"
       :class="{ 'is-animated': isAnimated }"
-      aria-label="Main navigation"
+      :aria-label="mainNavAriaLabel"
       @mouseleave="hoveredItemKey = null"
       @focusout="handleNavFocusout"
     >
@@ -78,7 +78,7 @@
       <div aria-hidden="true" class="nav-indicator-hovered"></div>
       <div aria-hidden="true" class="nav-indicator-active"></div>
     </nav>
-    <nav ref="secondaryNav" class="secondary-navigation" aria-label="Secondary navigation">
+    <nav ref="secondaryNav" class="secondary-navigation" :aria-label="secondaryNavAriaLabel">
       <details
         ref="overflowDetails"
         class="overflow-details"
@@ -100,7 +100,11 @@
           />
         </summary>
         <div class="overflow-details-nav" role="menu">
-          <NavigationItems :main-navigation-state="mainNavigationState" :panel-variant="panelVariant" />
+          <NavigationItems
+            :main-navigation-state="mainNavigationState"
+            :panel-variant="panelVariant"
+            :aria-label="overflowMenuAriaLabel"
+          />
         </div>
       </details>
       <slot v-if="slots.secondaryNavigation" name="secondaryNavigation"></slot>
@@ -126,6 +130,12 @@ interface Props {
   styleClassPassthrough?: string | string[];
   allowExpandOnGesture?: boolean;
   panelVariant?: "modern" | "classic";
+  /** aria-label on the primary nav landmark — override for localisation. */
+  mainNavAriaLabel?: string;
+  /** aria-label on the secondary (overflow) nav landmark — override for localisation. */
+  secondaryNavAriaLabel?: string;
+  /** aria-label on the overflow menu itself (forwarded to NavigationItems) — override for localisation. */
+  overflowMenuAriaLabel?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -142,6 +152,9 @@ const props = withDefaults(defineProps<Props>(), {
   // Forwarded to NavigationItems' overflow submenu panels — see its own default for why
   // "classic" is the safe default (CLAUDE.md pitfall #19).
   panelVariant: "classic",
+  mainNavAriaLabel: "Main navigation",
+  secondaryNavAriaLabel: "Secondary navigation",
+  overflowMenuAriaLabel: "Overflow navigation menu",
 });
 
 const collapseNavigationBelowWidth = computed(

package/app/components/03.organisms/site-header/SiteHeader.vue

@@ -2,7 +2,7 @@
   <PageRow tag="div" :variant="pageRowVariant" :style-class-passthrough="styleClassPassthrough">
     <template #default>
       <header class="site-header">
-        <nav class="home-navigation" aria-label="Home Navigation">
+        <nav class="home-navigation" :aria-label="homeNavAriaLabel">
           <SkipLinks>
             <template #homeLink>
               <slot name="branding"></slot>
@@ -17,6 +17,9 @@
           :collapse-at-main-nav-intersection="collapseAtMainNavIntersection"
           :allow-expand-on-gesture="allowExpandOnGesture"
           :style-class-passthrough="navStyleClassPassthrough"
+          :main-nav-aria-label="mainNavAriaLabel"
+          :secondary-nav-aria-label="secondaryNavAriaLabel"
+          :overflow-menu-aria-label="overflowMenuAriaLabel"
         >
           <template v-if="slots.secondaryNavigation" #secondaryNavigation>
             <slot name="secondaryNavigation"></slot>
@@ -43,6 +46,14 @@ interface Props {
   pageRowVariant?: "full" | "popout" | "content" | "inset-content";
   styleClassPassthrough?: string | string[];
   navStyleClassPassthrough?: string | string[];
+  /** aria-label on the home/branding nav landmark — override for localisation. */
+  homeNavAriaLabel?: string;
+  /** Forwarded to ResponsiveHeader's mainNavAriaLabel — override for localisation. */
+  mainNavAriaLabel?: string;
+  /** Forwarded to ResponsiveHeader's secondaryNavAriaLabel — override for localisation. */
+  secondaryNavAriaLabel?: string;
+  /** Forwarded to ResponsiveHeader's overflowMenuAriaLabel — override for localisation. */
+  overflowMenuAriaLabel?: string;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -58,6 +69,10 @@ withDefaults(defineProps<Props>(), {
   pageRowVariant: "content",
   styleClassPassthrough: () => [],
   navStyleClassPassthrough: () => [],
+  homeNavAriaLabel: "Home Navigation",
+  mainNavAriaLabel: "Main navigation",
+  secondaryNavAriaLabel: "Secondary navigation",
+  overflowMenuAriaLabel: "Overflow navigation menu",
 });
 
 const slots = useSlots();

package/app/components/03.organisms/site-header/tests/__snapshots__/SiteHeader.spec.ts.snap

@@ -9,7 +9,7 @@ exports[`SiteHeader > renders correct HTML structure with default props 1`] = `
         <nav class="skip-links-nav" aria-label="Skip navigation"><a href="#main-content" class="skip-link">Skip to main content</a><a href="#footer-content" class="skip-link">Skip to footer</a></nav>
       </div>
     </nav>
-    <div class="responsive-header-stub"></div>
+    <div class="responsive-header-stub" main-nav-aria-label="Main navigation" secondary-nav-aria-label="Secondary navigation" overflow-menu-aria-label="Overflow navigation menu"></div>
   </header>
 </div>"
 `;

package/app/types/components/index.ts

@@ -17,3 +17,4 @@ export * from "./content-docs.d"
 export * from "./breadcrumb"
 export * from "./cookie-consent-banner.d"
 export * from "./display-tooltip-defined.d"
+export * from "./marquee-scroller.d"

package/app/types/components/marquee-scroller.d.ts

@@ -0,0 +1,10 @@
+export interface MarqueeItem {
+  id: number
+  content: string
+}
+
+export interface MarqueeItemConfig {
+  width?: string
+  height?: string
+  gap?: string
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.4.5",
+  "version": "9.4.6",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",

package/app/components/marquee-scroller/MarqueeScroller.vue

@@ -1,289 +0,0 @@
-<template>
-  <div
-    v-if="displayComponent"
-    class="marquee-scroller"
-    :class="{ reverse: reverse, paused: isPaused, 'reduced-motion': prefersReducedMotion }"
-    role="region"
-    :aria-label="ariaLabel || 'Scrolling content'"
-    :aria-live="isPaused ? 'polite' : 'off'"
-    tabindex="0"
-    @keydown="handleKeydown"
-    @focus="handleFocus"
-    @blur="handleBlur"
-  >
-    <!-- Screen reader instructions -->
-    <div class="sr-only">
-      {{ ariaDescription || "Use spacebar to pause/play animation, arrow keys when focused for manual control" }}
-    </div>
-
-    <!-- Pause/Play button -->
-    <button
-      v-if="showControls"
-      class="control-btn"
-      @click="togglePause"
-      :aria-label="isPaused ? 'Play animation' : 'Pause animation'"
-      type="button"
-    >
-      <span aria-hidden="true">{{ isPaused ? "▶" : "⏸" }}</span>
-    </button>
-
-    <div class="marquee-track" :aria-hidden="!isPaused">
-      <div class="marquee-group">
-        <div v-for="item in marqueeData" :key="item.id" class="item">
-          <slot :name="item.id"></slot>
-        </div>
-      </div>
-      <div class="marquee-group" aria-hidden="true">
-        <div v-for="item in marqueeData" :key="`duplicate-${item.id}`" class="item">
-          <slot :name="item.id"></slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  animationRuntime: {
-    type: String,
-    default: "40s",
-  },
-  reverse: {
-    type: Boolean,
-    default: false,
-  },
-  marqueeData: {
-    type: Array as PropType<Array<{ id: number; content: string }>>,
-    default: () => [],
-  },
-  itemConfig: {
-    type: Object,
-    default: () => ({
-      width: "50px",
-      height: "50px",
-      gap: "16px",
-    }),
-    required: true,
-  },
-  // Accessibility props
-  ariaLabel: {
-    type: String,
-    default: null,
-  },
-  ariaDescription: {
-    type: String,
-    default: null,
-  },
-  showControls: {
-    type: Boolean,
-    default: false,
-  },
-  respectReducedMotion: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const displayComponent = ref(false);
-const isPaused = ref(false);
-const isFocused = ref(false);
-const prefersReducedMotion = ref(false);
-
-const height = computed(() => props.itemConfig.height);
-const width = computed(() => props.itemConfig.width);
-const gap = computed(() => props.itemConfig.gap || "16px");
-
-// Check for reduced motion preference
-const checkReducedMotion = () => {
-  if (typeof window !== "undefined" && props.respectReducedMotion) {
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    prefersReducedMotion.value = mediaQuery.matches;
-
-    // Listen for changes
-    mediaQuery.addEventListener("change", (e) => {
-      prefersReducedMotion.value = e.matches;
-      if (e.matches) {
-        isPaused.value = true;
-      }
-    });
-  }
-};
-
-const togglePause = () => {
-  isPaused.value = !isPaused.value;
-};
-
-const handleKeydown = (event: KeyboardEvent) => {
-  switch (event.key) {
-    case " ":
-    case "Spacebar":
-      event.preventDefault();
-      togglePause();
-      break;
-    case "ArrowLeft":
-    case "ArrowRight":
-      // Could add manual stepping functionality here
-      event.preventDefault();
-      break;
-  }
-};
-
-const handleFocus = () => {
-  isFocused.value = true;
-  if (props.respectReducedMotion) {
-    isPaused.value = true;
-  }
-};
-
-const handleBlur = () => {
-  isFocused.value = false;
-  if (!prefersReducedMotion.value) {
-    isPaused.value = false;
-  }
-};
-
-onMounted(() => {
-  displayComponent.value = true;
-  checkReducedMotion();
-
-  // Auto-pause if user prefers reduced motion
-  if (prefersReducedMotion.value) {
-    isPaused.value = true;
-  }
-});
-</script>
-
-<style lang="css">
-@layer components {
-.marquee-scroller {
-  width: 100%;
-  height: v-bind(height);
-  overflow: hidden;
-  mask-image: linear-gradient(to right, transparent, #000 10% 90%, transparent);
-  position: relative;
-
-  /* Focus styles */
-  &:focus {
-    outline: 2px solid var(--color-focus, #0066cc);
-    outline-offset: 2px;
-  }
-
-  /* Paused state */
-  &.paused .marquee-track {
-    animation-play-state: paused;
-  }
-
-  /* Reduced motion - disable animation completely */
-  &.reduced-motion .marquee-track {
-    animation: none !important;
-  }
-
-  &:hover .marquee-track {
-    animation-play-state: paused;
-  }
-
-  &:hover .item {
-    filter: grayscale(1);
-  }
-
-  /* Screen reader only text */
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  /* Control button */
-  .control-btn {
-    position: absolute;
-    inset-block-start: 8px;
-    inset-inline-end: 8px;
-    z-index: 10;
-    background: rgba(0, 0, 0, 0.7);
-    color: white;
-    border: none;
-    border-radius: 4px;
-    padding: 8px;
-    cursor: pointer;
-    font-size: 14px;
-    transition: background-color 0.2s;
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.9);
-    }
-
-    &:focus {
-      outline: 2px solid var(--color-focus, #0066cc);
-      outline-offset: 2px;
-    }
-  }
-
-  .marquee-track {
-    display: flex;
-    width: fit-content;
-    gap: v-bind(gap);
-    animation: marqueeMove v-bind(animationRuntime) linear infinite;
-  }
-
-  &.reverse .marquee-track {
-    animation-direction: reverse;
-  }
-
-  .marquee-group {
-    display: flex;
-    gap: v-bind(gap);
-    flex-shrink: 0;
-  }
-
-  .item {
-    width: v-bind(width);
-    height: v-bind(height);
-    display: grid;
-    place-items: center;
-    aspect-ratio: 1 / 1;
-    transition: filter 0.5s;
-    flex-shrink: 0;
-
-    border: 1px solid light-dark(var(--slate-10), var(--slate-00));
-    border-radius: 4px;
-
-    &:hover {
-      filter: grayscale(0);
-    }
-  }
-}
-
-@keyframes marqueeMove {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-50%);
-  }
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-  .marquee-scroller {
-    .control-btn {
-      background: ButtonFace;
-      color: ButtonText;
-      border: 1px solid ButtonText;
-    }
-  }
-}
-
-/* Respect user's motion preferences */
-@media (prefers-reduced-motion: reduce) {
-  .marquee-scroller .marquee-track {
-    animation: none !important;
-  }
-}
-}
-</style>