@designcrowd/fe-shared-lib 1.6.9-ModalAccessibility → 1.6.10-voiceText

package/index.js

@@ -22,6 +22,7 @@ export { default as WebsiteContextualUpgradeModal } from './src/experiences/comp
 export { WEBSITE_UPGRADE_CONTEXT_TYPES } from './src/experiences/models/websiteContextualModel';
 
 export { setSharedLibLocaleAsync, tr } from './src/useSharedLibTranslate';
+export { useVoiceToText } from './src/useVoiceToText';
 
 export { default as Button } from './src/atoms/components/Button/Button.vue';
 export { default as ButtonGroup } from './src/atoms/components/ButtonGroup/ButtonGroup.vue';
@@ -59,4 +60,5 @@ export { default as Select } from './src/atoms/components/Select/Select.vue';
 export { default as NumberStepper } from './src/atoms/components/NumberStepper/NumberStepper.vue';
 export { default as CopyToClipboardText } from './src/atoms/components/CopyToClipboardText/CopyToClipboardText.vue';
 export { default as SparkleIcon } from './src/atoms/components/SparkleIcon/SparkleIcon.vue';
+export { default as VoiceToTextButton } from './src/atoms/components/VoiceToTextButton/VoiceToTextButton.vue';
 export { default as SideNavigationPanel } from './src/experiences/components/SideNavigationPanel/SideNavigationPanel.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.6.9-ModalAccessibility",
+  "version": "1.6.10-voiceText",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/src/atoms/components/Icon/Icon.vue

@@ -237,6 +237,7 @@ import IconLinkInBioFilled from './icons/link-in-bio-filled.vue';
 import IconMedia from './icons/media.vue';
 import IconMinusCircleLight from './icons/minus-circle-light.vue';
 import IconMinus from './icons/minus.vue';
+import IconMicrophone from './icons/microphone.vue';
 import IconMobile from './icons/mobile.vue';
 import IconOther from './icons/other.vue';
 import IconPageButtons from './icons/page-buttons.vue';
@@ -636,6 +637,7 @@ export default {
     IconContactMessage,
     IconMinus,
     IconMinusCircleLight,
+    IconMicrophone,
     IconMobile,
     IconMug,
     IconOther,

package/src/atoms/components/Icon/icons/microphone.vue

@@ -0,0 +1,5 @@
+<template>
+  <path
+    d="M8 1a2 2 0 0 0-2 2v4a2 2 0 1 0 4 0V3a2 2 0 0 0-2-2zM4.5 7a.5.5 0 0 1 .5.5V8a3 3 0 1 0 6 0v-.5a.5.5 0 0 1 1 0V8a4 4 0 0 1-3.5 3.97V14h2a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1h2v-2.03A4 4 0 0 1 4 8v-.5a.5.5 0 0 1 .5-.5z"
+  />
+</template>

package/src/atoms/components/Modal/Modal.vue

@@ -1,10 +1,7 @@
 <template>
   <div
     v-show="visible"
-    role="dialog"
-    aria-modal="true"
     :aria-hidden="visible ? 'false' : 'true'"
-    :aria-label="ariaLabel"
     class="tw-bg-black tw-flex tw-items-center tw-justify-center tw-fixed tw-w-full tw-h-full tw-top-0 tw-left-0 tw-z-50"
     :class="{
       'tw-px-4': fullScreenBreakpoint === undefined && !isImageMode,
@@ -50,7 +47,6 @@
           v-if="!mandatory"
           class="tw-absolute tw-right-0 tw-top-0 tw-border-none tw-text-secondary-500 tw-appearance-none tw-bg-transparent tw-p-0 tw-w-8 tw-h-8 tw-ml-auto tw-cursor-pointer"
           data-test-modal-close-btn
-          aria-label="Close"
           @click="close($event)"
         >
           <span class="tw-sr-only">Close modal</span>
@@ -165,11 +161,6 @@ export default {
       required: false,
       default: false,
     },
-    ariaLabel: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
   },
   computed: {
     isImageMode() {

package/src/atoms/components/VoiceToTextButton/VoiceToTextButton.stories.js

@@ -0,0 +1,107 @@
+import VoiceToTextButton from './VoiceToTextButton.vue';
+import TextInput from '../TextInput/TextInput.vue';
+
+export default {
+  title: 'Components/VoiceToTextButton',
+  component: VoiceToTextButton,
+};
+
+export const Default = () => ({
+  components: { VoiceToTextButton },
+  template: '<VoiceToTextButton />',
+});
+
+export const WithTranscriptDisplay = () => ({
+  components: { VoiceToTextButton, TextInput },
+  data() {
+    return {
+      transcript: '',
+      isListening: false,
+      error: null,
+    };
+  },
+  template: `
+    <div class="tw-flex tw-flex-col tw-gap-4 tw-max-w-md">
+      <div class="tw-flex tw-gap-2 tw-items-end">
+        <TextInput
+          v-model="transcript"
+          label="Search"
+          placeholder="Click the mic and speak..."
+          class="tw-flex-1"
+        />
+        <VoiceToTextButton
+          @on-transcript="transcript = $event"
+          @on-interim-transcript="transcript = $event"
+          @on-start="isListening = true; error = null"
+          @on-stop="isListening = false"
+          @on-error="error = $event"
+        />
+      </div>
+      <div class="tw-text-sm tw-text-grayscale-600">
+        <p v-if="isListening" class="tw-text-primary-500 tw-font-medium">
+          Listening... speak now
+        </p>
+        <p v-else-if="error" class="tw-text-error-500">
+          {{ error }}
+        </p>
+        <p v-else>
+          Click the microphone button to start voice input
+        </p>
+      </div>
+    </div>
+  `,
+});
+
+WithTranscriptDisplay.story = {
+  name: 'Interactive Demo',
+};
+
+export const Disabled = () => ({
+  components: { VoiceToTextButton },
+  template: `
+    <div class="tw-flex tw-gap-4 tw-items-center">
+      <div class="tw-text-center">
+        <VoiceToTextButton />
+        <p class="tw-text-xs tw-mt-2 tw-text-grayscale-600">Enabled</p>
+      </div>
+      <div class="tw-text-center">
+        <VoiceToTextButton :disabled="true" />
+        <p class="tw-text-xs tw-mt-2 tw-text-grayscale-600">Disabled</p>
+      </div>
+    </div>
+  `,
+});
+
+Disabled.story = {
+  name: 'Disabled State',
+};
+
+export const LanguageVariants = () => ({
+  components: { VoiceToTextButton },
+  data() {
+    return {
+      languages: [
+        { code: 'en-US', name: 'English (US)' },
+        { code: 'de-DE', name: 'German' },
+        { code: 'fr-FR', name: 'French' },
+        { code: 'es-ES', name: 'Spanish' },
+      ],
+    };
+  },
+  template: `
+    <div class="tw-flex tw-flex-wrap tw-gap-4">
+      <div
+        v-for="lang in languages"
+        :key="lang.code"
+        class="tw-text-center tw-p-2 tw-border tw-border-grayscale-300 tw-rounded"
+      >
+        <VoiceToTextButton :lang="lang.code" />
+        <p class="tw-text-xs tw-mt-2">{{ lang.name }}</p>
+      </div>
+    </div>
+  `,
+});
+
+LanguageVariants.story = {
+  name: 'Language Variants',
+};

package/src/atoms/components/VoiceToTextButton/VoiceToTextButton.vue

@@ -0,0 +1,84 @@
+<template>
+  <Button
+    v-if="isSupported"
+    icon="microphone"
+    :disabled="disabled"
+    variant="outline"
+    :class="{ 'voice-listening': isListening }"
+    :aria-label="isListening ? 'Stop voice input' : 'Start voice input'"
+    data-test="voice-to-text-button"
+    @on-click="toggle"
+  />
+</template>
+
+<script setup>
+import { watch, toRef } from 'vue';
+import Button from '../Button/Button.vue';
+import { useVoiceToText } from '../../../useVoiceToText';
+
+const props = defineProps({
+  lang: {
+    type: String,
+    default: 'en-US',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['on-transcript', 'on-interim-transcript', 'on-start', 'on-stop', 'on-error']);
+
+const { isSupported, isListening, transcript, isFinal, error, toggle, setLang } = useVoiceToText({
+  lang: props.lang,
+});
+
+// Keep recognition language in sync with prop
+watch(toRef(props, 'lang'), setLang);
+
+// Watch for transcript changes and emit appropriate events
+watch(
+  [transcript, isFinal],
+  ([newTranscript, newIsFinal]) => {
+    if (newIsFinal && newTranscript) {
+      emit('on-transcript', newTranscript);
+    } else if (newTranscript) {
+      emit('on-interim-transcript', newTranscript);
+    }
+  },
+  { flush: 'sync' },
+);
+
+// Watch for listening state changes
+watch(isListening, (newVal, oldVal) => {
+  if (newVal && !oldVal) {
+    emit('on-start');
+  }
+  if (!newVal && oldVal) {
+    emit('on-stop');
+  }
+});
+
+// Watch for errors
+watch(error, (newError) => {
+  if (newError) {
+    emit('on-error', newError);
+  }
+});
+</script>
+
+<style scoped>
+.voice-listening {
+  animation: voice-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes voice-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 var(--color-primary, rgba(242, 27, 63, 0.4));
+  }
+  50% {
+    box-shadow: 0 0 0 8px transparent;
+  }
+}
+</style>

package/src/useVoiceToText.js

@@ -0,0 +1,174 @@
+import { ref, computed, readonly } from 'vue';
+
+// Singleton instance and state (lazily initialized)
+let recognition = null;
+let isInitialized = false;
+let errorClearTimeout = null;
+let state = null;
+
+// Error message mapping per spec
+const ERROR_MESSAGES = {
+  'not-allowed': 'Microphone permission was denied. Please allow access.',
+  'language-not-supported': 'This language is not supported.',
+  network: 'A network error occurred. Please check your connection.',
+  'audio-capture': 'No microphone was found or microphone is not working.',
+};
+
+const ERROR_CLEAR_DELAY = 5000;
+
+function getState() {
+  if (!state) {
+    state = {
+      isListening: ref(false),
+      transcript: ref(''),
+      isFinal: ref(false),
+      error: ref(null),
+    };
+  }
+  return state;
+}
+
+/**
+ * Singleton composable that wraps the Web Speech API (SpeechRecognition).
+ * All calls to useVoiceToText() return the same shared instance.
+ *
+ * @param {Object} options
+ * @param {string} options.lang - BCP 47 language tag (default: 'en-US')
+ * @returns {Object} Voice-to-text state and controls
+ */
+export function useVoiceToText(options = {}) {
+  const { lang = 'en-US' } = options;
+
+  // Get or create shared state
+  const { isListening, transcript, isFinal, error } = getState();
+
+  // Check for browser support
+  const SpeechRecognition =
+    typeof window !== 'undefined' ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
+
+  const isSupported = computed(() => !!SpeechRecognition);
+
+  // Initialize singleton once
+  if (!isInitialized && SpeechRecognition) {
+    recognition = new SpeechRecognition();
+    recognition.continuous = true;
+    recognition.interimResults = true;
+
+    recognition.onresult = (event) => {
+      let interimTranscript = '';
+      let finalTranscript = '';
+
+      for (let i = event.resultIndex; i < event.results.length; i += 1) {
+        const result = event.results[i];
+        if (result.isFinal) {
+          finalTranscript += result[0].transcript;
+        } else {
+          interimTranscript += result[0].transcript;
+        }
+      }
+
+      if (finalTranscript) {
+        transcript.value = finalTranscript;
+        isFinal.value = true;
+      } else {
+        transcript.value = interimTranscript;
+        isFinal.value = false;
+      }
+    };
+
+    recognition.onerror = (event) => {
+      // Suppress no-speech and aborted errors per spec
+      if (event.error === 'no-speech' || event.error === 'aborted') {
+        return;
+      }
+
+      const message = ERROR_MESSAGES[event.error] || 'An error occurred with speech recognition.';
+      error.value = message;
+
+      // eslint-disable-next-line no-console
+      console.warn('[useVoiceToText]', event.error, message);
+
+      // Auto-clear error after timeout
+      if (errorClearTimeout) {
+        clearTimeout(errorClearTimeout);
+      }
+      errorClearTimeout = setTimeout(() => {
+        error.value = null;
+      }, ERROR_CLEAR_DELAY);
+    };
+
+    recognition.onend = () => {
+      isListening.value = false;
+    };
+
+    isInitialized = true;
+  }
+
+  // Update language on existing instance
+  if (recognition) {
+    recognition.lang = lang;
+  }
+
+  const start = () => {
+    if (!recognition || isListening.value) return;
+
+    // Clear previous state
+    transcript.value = '';
+    isFinal.value = false;
+    error.value = null;
+    if (errorClearTimeout) {
+      clearTimeout(errorClearTimeout);
+      errorClearTimeout = null;
+    }
+
+    try {
+      recognition.start();
+      isListening.value = true;
+    } catch (e) {
+      // Handle case where recognition is already started
+      // eslint-disable-next-line no-console
+      console.warn('[useVoiceToText] Failed to start:', e.message);
+    }
+  };
+
+  const stop = () => {
+    if (!recognition || !isListening.value) return;
+
+    try {
+      recognition.stop();
+    } catch (e) {
+      // Handle case where recognition is already stopped
+      // eslint-disable-next-line no-console
+      console.warn('[useVoiceToText] Failed to stop:', e.message);
+    }
+  };
+
+  const toggle = () => {
+    if (isListening.value) {
+      stop();
+    } else {
+      start();
+    }
+  };
+
+  const setLang = (newLang) => {
+    if (recognition) {
+      recognition.lang = newLang;
+    }
+  };
+
+  return {
+    // State (reactive, read-only)
+    isSupported,
+    isListening: readonly(isListening),
+    transcript: readonly(transcript),
+    isFinal: readonly(isFinal),
+    error: readonly(error),
+
+    // Actions
+    start,
+    stop,
+    toggle,
+    setLang,
+  };
+}