Accessibility and Usability Enhancements for the VoiceCapture

[lucasferreiralimax]

This Pull Request introduces accessibility improvements and a new clipboard feature for the VoiceCapture component in Vue, aimed at providing a better user experience, especially for those relying on assistive technologies.

Changes Implemented

1. Added aria-modal and role="dialog"

   • Included the aria-modal="true" attribute and role="dialog" to the main container (<section>) when the component is active. This indicates to assistive technologies that the content is a modal dialog and restricts the focus to elements inside.

2. Added aria-expanded Attribute

   • Implemented the aria-expanded attribute with dynamic values (true or false) based on the start state. This attribute indicates whether the voice capture modal is open or closed, providing better clarity for screen readers.

   :aria-expanded="start ? 'true' : 'false'"

3. Enhanced ARIA Labels

   • Updated the buttons with ARIA labels (aria-label) using translations for "Start voice capture" and "Close voice capture." This ensures the component's purpose is clear to users of assistive technologies.

   <button
     class="exit"
     type="button"
     @click="deactivateVoice"
     :aria-label="getTranslation('close')"
   >

4. Clipboard Integration

   • Added a new feature to copy the final transcript text to the clipboard when the clipboard prop is set to true. This improves usability by allowing users to easily copy the captured voice text.

   if (this.clipboard) {
     navigator.clipboard.writeText(this.finalTranscript).then(
       () => {
         console.log('Text copied to clipboard');
       },
       (err) => {
         console.error('Could not copy text to clipboard', err);
       }
     );
   }

[github-actions]

Visit the preview URL for this PR (updated for commit f9a9f4f):

https://voicecapture-vue--pr2-enhance-a11y-oll55v5v.web.app

_{(expires Wed, 20 Nov 2024 00:37:21 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: cfc73b8c7b2eb73438f9dfb4b3b28779ec1d6020}