Avoids z-input-message screen reader alert duplication

[francesco-santi-1]

Fix - z-input-message - alert duplication

Motivation and Context

This implementation resolves an issue where VoiceOver reads the same text multiple times in z-input-message using role="alert".

Priority

• 1 - Highest
• 2 - High
• 3 - Medium
• 4 - Low
• 5 - Lowest
• 6 - Not a Priority

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• Feature (non-breaking change which adds functionality)
• Component (add a Component as approved by Design System)
• Docs (add documentation)
• Chore (changes that adds small enhancement)
• Breaking (fix or feature that would cause existing functionality to not work as expected)

Testing

In order to test the problem you can copy/paste the following snippet in the index.html file of the project

  <main>
    <z-input id="password" ariaLabel="Inserisci la tua password" placeholder="Inserisci la tua password" type="password"
      status="error" message="Errore iniziale"></z-input>

    <button id="btn">Cambia messaggio di errore</button>
  </main>

  <script>
    const messages = [
      'Password non valida',
      'La password è troppo corta',
      'La password deve contenere un numero',
      'La password deve contenere un carattere speciale'
    ];

    const input = document.getElementById('password');
    const button = document.getElementById('btn');

    button.addEventListener('click', () => {
      const randomMessage =
        messages[Math.floor(Math.random() * messages.length)];

      input.setAttribute('message', randomMessage);
      input.setAttribute('status', 'error');
    });
  </script>