@zap-wunschlachen/wl-shared-components 1.0.35 → 1.0.38

package/App.vue

@@ -1,18 +1,13 @@
 <template>
   <div class="app">
     <div class="element-container">
-      <Button
-        :color="siteColors['slot-bg']"
-        :label="'Some Text'"
-        class="!font-bold mx-2" :text-color="siteColors['slot-text']"
-      >
-      </Button>
+      <StagingBanner show/>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from '@/components/Button/Button.vue';
+import StagingBanner from "@/components/StagingBanner/StagingBanner.vue";
 import { siteColors } from "@/utils/index";
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zap-wunschlachen/wl-shared-components",
-  "version": "1.0.35",
+  "version": "1.0.38",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/components/Audio/Waveform.vue

@@ -52,6 +52,7 @@ function createWaveform() {
       cursorWidth: 0,
       height: containerHeight,
       width: containerWidth,
+      backend: 'WebAudio',
     })
 
     ws.on('audioprocess', (currentTime) => {

package/src/components/Button/Button.vue

@@ -11,7 +11,7 @@
     :variant="variant"
     :size="size"
     :readonly="readonly"
-    :style="buttonStyle"
+    :style="rootStyle"
     data-testid="root"
   >
     <slot>{{ label }}</slot>
@@ -127,10 +127,48 @@ const buttonStyle = computed(() => {
   }
   return {};
 });
+
+// Compute a CSS variable for focus color to avoid hardcoded values.
+// Use provided color prop, fall back to siteColors.btn_bg, then to a sensible default.
+const focusColor = computed(() => {
+  const col = props.color || siteColors['btn_bg'] || '#172774';
+  return col;
+});
+
+// Expose a style object that includes the focus color custom property.
+const rootStyle = computed(() => ({
+  ...buttonStyle.value,
+  '--wl-button-focus-color': focusColor.value
+}));
 </script>
 
 <style>
 .wl-button.v-btn--variant-outlined {
   border-width: 1.5px;
 }
+
+/* Accessibility: Focus Indicators (WCAG 2.4.7) */
+.wl-button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.wl-button.v-btn--variant-outlined:focus-visible {
+  /* Use component-provided focus color with fallback */
+  outline-color: var(--wl-button-focus-color, var(--Dental-Blue-0, #172774));
+  outline-width: 3px;
+  box-shadow: 0 0 0 4px rgba(0,0,0,0.08), 0 0 0 6px rgba(255,255,255,0.06) inset;
+}
+
+.wl-button.v-btn--variant-flat:focus-visible {
+  outline-color: white;
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
+}
+
+/* High contrast mode support */
+@media (forced-colors: active) {
+  .wl-button {
+    border: 2px solid currentColor;
+  }
+}
 </style>

package/src/components/CheckBox/CheckBox.css

@@ -183,3 +183,32 @@
 .label-text {
   font-weight: 300;
 }
+
+/* =====================================================
+   ACCESSIBILITY: Focus Indicators
+   WCAG 2.4.7: Focus Visible (Level AA)
+   ===================================================== */
+
+.input-checkbox:focus-visible {
+  outline: 2px solid var(--Dental-Blue-0);
+  outline-offset: 2px;
+}
+
+.input-success:focus-visible {
+  outline-color: var(--Success-Green-0);
+}
+
+.input-error:focus-visible {
+  outline-color: var(--Error-Red-0);
+}
+
+/* High contrast mode support */
+@media (forced-colors: active) {
+  .input-checkbox {
+    border: 2px solid currentColor;
+  }
+
+  .input-checkbox:checked::before {
+    background-color: currentColor;
+  }
+}

package/src/components/CheckBox/Checkbox.vue

@@ -1,16 +1,21 @@
 <template>
-  <label :class="labelClasses" data-testid="root">
+  <label :class="labelClasses" data-testid="root" :for="checkboxId">
     <span class="checkbox-container">
       <input
         type="checkbox"
+        :id="checkboxId"
         :name="value"
         :checked="isChecked"
         @change="updateValue"
         :class="inputClasses"
         :disabled="disabled"
+        :aria-checked="isChecked"
+        :aria-disabled="disabled"
+        :aria-invalid="error"
+        :aria-describedby="error ? `${checkboxId}-error` : undefined"
       />
     </span>
-    {{ label }}
+    <span class="label-text">{{ label }}</span>
   </label>
 </template>
 
@@ -82,6 +87,9 @@ const props = defineProps({
 // Define events that can be emitted from the component
 const emit = defineEmits(['update:modelValue', 'input-error']);
 
+// Generate stable unique ID for accessibility
+const checkboxId = `checkbox-${props.value}-${Math.random().toString(36).substr(2, 9)}`;
+
 // Computed property to check if the checkbox is selected
 const isChecked = computed(() => {
   if (Array.isArray(props.modelValue)) {

package/src/components/Dialog/Dialog.vue

@@ -3,9 +3,16 @@
     <!-- Scoped slot for the activator with click handler to open dialog -->
     <slot name="activator" :openDialog="openDialog" />
 
-    <!-- Dialog component with direct binding to dialog.value -->
-    <v-dialog v-model="dialog" width="auto">
-      <slot :closeDialog="closeDialog" name="content"></slot>
+    <!-- Dialog component with accessibility attributes -->
+    <v-dialog
+      v-model="dialog"
+      width="auto"
+      role="dialog"
+      aria-modal="true"
+      :aria-labelledby="dialogTitleId"
+      @keydown.escape="closeDialog"
+    >
+      <slot :closeDialog="closeDialog" :titleId="dialogTitleId" name="content"></slot>
     </v-dialog>
   </div>
 </template>
@@ -17,13 +24,15 @@ import './Dialog.css';
 // Reactive dialog state
 const dialog = ref(false);
 
+// Generate unique ID for accessibility (stable across re-renders)
+const dialogTitleId = `dialog-title-${Math.random().toString(36).slice(2, 9)}`;
+
 // Methods to open and close the dialog
 const openDialog = () => {
-  console.log('entereed 1');
   dialog.value = true;
 };
+
 const closeDialog = () => {
-  console.log('entereed 2');
   dialog.value = false;
 };
 </script>

package/src/components/Input/Input.vue

@@ -25,6 +25,9 @@
     @click:prepend-inner="onPrependInnerClick"
     @click:append="onAppendClick"
     @click:append-inner="onAppendInnerClick"
+    :error="error"
+    :aria-invalid="error || undefined"
+    :aria-describedby="hint ? inputHintId : undefined"
     data-testid="root"
   >
     <!-- Prepend Slot (before v-field) -->
@@ -49,8 +52,8 @@
 
     <!-- Details Slot (for messages, hints, etc.) -->
     <template #details>
-      <div class="d-flex flex-row ga-1 align-center">
-        <v-icon icon="heroicons:exclamation-circle"></v-icon>
+      <div v-if="hint" class="d-flex flex-row ga-1 align-center" :id="inputHintId" role="alert" aria-hidden="true">
+        <v-icon icon="heroicons:exclamation-circle" aria-hidden="true"></v-icon>
         <span>{{ hint }}</span>
       </div>
     </template>
@@ -76,6 +79,9 @@ const emit = defineEmits([
    return props.placeholder || t('wl.input.placeholder');
  });
 
+// Generate unique ID for accessibility - connects input to hint/error message
+const inputHintId = `input-hint-${Math.random().toString(36).slice(2, 11)}`;
+
 // Define the component props
 const props = defineProps({
   /**

package/src/components/Loader/Loader.css

@@ -49,3 +49,23 @@ div:focus-visible {
     outline: 2px solid;
     outline-offset: 2px;
 }
+
+/* Screen reader only text - visually hidden but accessible */
+.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;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+    .loader-spinner-arc {
+        animation: none;
+    }
+}

package/src/components/Loader/Loader.vue

@@ -5,6 +5,7 @@
         <!-- Spinner and loading text -->
         <div class="loader-content">
             <div role="status">
+                <span class="sr-only">Loading, please wait...</span>
                 <svg
                     aria-hidden="true"
                     class="loader-svg"

package/src/components/OtpInput/OtpInput.vue

@@ -21,7 +21,7 @@
         type="number"
       >
         <template #loader>
-          <Loader :size="40" />
+          <Loader :size="40"/>
         </template>
       </v-otp-input>
     </div>

package/src/components/Select/Select.vue

@@ -28,6 +28,7 @@
     :return-object="returnObject"
     :placeholder="placeholder"
     :persistent-placeholder="persistentPlaceholder"
+    :aria-invalid="error || undefined"
     v-model="internalValue"
     @click:append="onClickAppend"
     @click:append-inner="onClickAppendInner"

package/src/components/StagingBanner/StagingBanner.css

@@ -0,0 +1,19 @@
+.staging-banner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: #ff6b35;
+  color: white;
+  text-align: center;
+  padding: 10px;
+  z-index: 99999;
+  font-weight: bold;
+  font-size: 14px;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+
+.staging-banner--hidden {
+  display: none;
+}

package/src/components/StagingBanner/StagingBanner.vue

@@ -0,0 +1,82 @@
+<template>
+  <div v-if="isVisible" class="staging-banner">
+    {{ displayText }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import './StagingBanner.css';
+
+const props = defineProps({
+  /**
+   * Custom text to display in the banner.
+   * Default: "⚠️ STAGING - Testumgebung (keine echten Daten)"
+   */
+  text: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Force the banner to show regardless of hostname.
+   * Useful for testing or manual control.
+   */
+  show: {
+    type: Boolean,
+    default: undefined
+  },
+  /**
+   * Whether to auto-detect staging based on hostname.
+   * Looks for "staging." or "staging-" in the hostname.
+   * Default: true
+   */
+  autoDetect: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Whether to add padding to the body to account for the banner.
+   * Default: true
+   */
+  addBodyPadding: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Custom padding value for the body (in pixels).
+   * Default: 40
+   */
+  bodyPaddingPx: {
+    type: Number,
+    default: 40
+  }
+});
+
+const isStaging = ref(false);
+
+const displayText = computed(() => {
+  return props.text || '⚠️ STAGING - Testumgebung (keine echten Daten)';
+});
+
+const isVisible = computed(() => {
+  // If show prop is explicitly set, use that
+  if (props.show !== undefined) {
+    return props.show;
+  }
+  // Otherwise use auto-detection result
+  return props.autoDetect && isStaging.value;
+});
+
+onMounted(() => {
+  // Check if running in browser
+  if (typeof window !== 'undefined') {
+    const hostname = window.location.hostname;
+    isStaging.value = hostname.includes('staging.') || hostname.includes('staging-');
+
+    // Add body padding if visible and option is enabled
+    if (isVisible.value && props.addBodyPadding) {
+      document.body.style.paddingTop = `${props.bodyPaddingPx}px`;
+    }
+  }
+});
+</script>

package/src/components/accessibility.css

@@ -0,0 +1,218 @@
+/**
+ * Global Accessibility Styles
+ *
+ * These styles ensure WCAG 2.1 AA compliance for all components.
+ * Required for German accessibility requirements (BITV 2.0).
+ */
+
+/* =====================================================
+   FOCUS INDICATORS
+   WCAG 2.4.7: Focus Visible (Level AA)
+   ===================================================== */
+
+/* Universal focus-visible style for all interactive elements */
+.wl-button:focus-visible,
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+[tabindex="0"]:focus-visible {
+  outline: 2px solid var(--Dental-Blue-0, #172774);
+  outline-offset: 2px;
+}
+
+/* High contrast focus for dark backgrounds */
+.wl-button.v-btn--variant-flat:focus-visible {
+  outline-color: white;
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
+}
+
+/* Checkbox focus indicator */
+.input-checkbox:focus-visible {
+  outline: 2px solid var(--Dental-Blue-0, #172774);
+  outline-offset: 2px;
+}
+
+/* Button focus styles */
+.wl-button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.wl-button.v-btn--variant-outlined:focus-visible {
+  outline: 2px solid var(--Dental-Blue-0, #172774);
+  outline-offset: 2px;
+}
+
+/* Input focus styles */
+.v-text-field input:focus-visible,
+.v-textarea textarea:focus-visible {
+  outline: none; /* Vuetify handles this via border */
+}
+
+.v-text-field:focus-within {
+  border-color: var(--Dental-Blue-0, #172774) !important;
+}
+
+/* Select/Combobox focus */
+.wl-select .v-field:focus-within {
+  border-color: var(--Dental-Blue-0, #172774) !important;
+}
+
+/* =====================================================
+   REDUCED MOTION
+   WCAG 2.3.3: Animation from Interactions (Level AAA)
+   ===================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* =====================================================
+   HIGH CONTRAST MODE
+   Windows High Contrast Mode Support
+   ===================================================== */
+
+@media (forced-colors: active) {
+  .wl-button {
+    border: 2px solid currentColor;
+  }
+
+  .input-checkbox {
+    border: 2px solid currentColor;
+  }
+
+  .input-checkbox:checked::before {
+    background-color: currentColor;
+  }
+}
+
+/* =====================================================
+   DISABLED STATES
+   Ensure disabled elements maintain contrast
+   WCAG 1.4.3: Contrast (Minimum) - Note: Disabled elements are exempt
+   but we still aim for visibility
+   ===================================================== */
+
+.wl-button:disabled,
+.wl-button[aria-disabled="true"] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.input-checkbox:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* =====================================================
+   SKIP LINKS
+   WCAG 2.4.1: Bypass Blocks (Level A)
+   ===================================================== */
+
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: var(--Dental-Blue-0, #172774);
+  color: white;
+  padding: 8px 16px;
+  z-index: 10000;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+
+/* =====================================================
+   SCREEN READER ONLY
+   Visually hidden but accessible to screen readers
+   ===================================================== */
+
+.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;
+}
+
+/* =====================================================
+   ICON BUTTONS
+   Ensure icon-only buttons are accessible
+   ===================================================== */
+
+.icon-button {
+  position: relative;
+}
+
+/* Show in development environments */
+body.dev-mode .icon-button:not([aria-label]):not([aria-labelledby])::after {
+  content: "Warning: Missing accessible name";
+  position: absolute;
+  background: red;
+  color: white;
+  font-size: 10px;
+  padding: 2px;
+  display: block;
+}
+
+/* =====================================================
+   LOADING STATES
+   WCAG 4.1.3: Status Messages (Level AA)
+   ===================================================== */
+
+.loading-indicator {
+  /* Announce loading state to screen readers */
+}
+
+[aria-busy="true"] {
+  cursor: wait;
+}
+
+/* =====================================================
+   ERROR STATES
+   Ensure error messages are visible and announced
+   ===================================================== */
+
+.error-message {
+  color: var(--Error-Red-0, #d32f2f);
+  font-weight: 500;
+}
+
+[aria-invalid="true"] {
+  border-color: var(--Error-Red-0, #d32f2f) !important;
+}
+
+/* =====================================================
+   MINIMUM TOUCH TARGET SIZE
+   WCAG 2.5.5: Target Size (Level AAA) - 44x44px minimum
+   ===================================================== */
+
+.touch-target-min {
+  min-width: 44px;
+  min-height: 44px;
+}
+
+/* =====================================================
+   TEXT SPACING
+   WCAG 1.4.12: Text Spacing (Level AA)
+   Content should support user adjustments
+   ===================================================== */
+
+/* These rules ensure content adapts when users adjust text spacing */
+

package/src/components/index.ts

@@ -24,5 +24,6 @@ export { default as Loader } from './Loader/Loader.vue';
 export { default as AnamneseNotification } from './Appointment/Card/AnamneseNotification.vue';
 export { default as ErrorPage } from './ErrorPage/ErrorPage.vue';
 export { default as MaintenanceBanner } from './MaintenanceBanner/MaintenanceBanner.vue';
+export { default as StagingBanner } from './StagingBanner/StagingBanner.vue';
 export { default as Logo } from './Icons/Logo.vue';
 export { default as MiniLogo } from './Icons/MiniLogo.vue';