Accessibility and Usability Enhancements for the VoiceCapture

[lucasferreiralimax]

This Pull Request improves the VoiceCapture component in Angular by implementing several accessibility features and adding a new clipboard integration for better usability.

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 informs assistive technologies that the content is presented as a modal, restricting the focus to elements inside the dialog.

2. Added aria-expanded Attribute

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

   [attr.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," making the component's purpose clearer for assistive technologies.

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

4. Clipboard Integration

   • Added a new feature that copies the final transcript text to the clipboard when the clipboard input property is set to true. This enhances usability by allowing users to easily copy the voice capture results.

   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 bc0110d):

https://voicecapture-angular--pr2-enhance-a11y-feeqfckn.web.app

_{(expires Wed, 20 Nov 2024 00:35:40 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 918e31b670ca87cfdd858717fa475202a29ec6fd}