Resumen del Problema de Anuncios de Errores Duplicados en Vuetify v-text-field con Lectores de Pantalla

Descripción del Problema

Se ha identificado un problema con los anuncios de errores en formularios Vuetify que utilizan el componente v-text-field. Al implementar reglas de validación en campos de texto, los lectores de pantalla, particularmente NVDA, anuncian el mismo mensaje de error dos veces al navegar entre los campos del formulario. Este fenómeno sucede, por ejemplo, cuando se presenta la validación del número de aeroplano y el apellido, donde el error "El número de aeroplano es requerido" se pronuncia dos veces.

Ejemplo de Implementación

La implementación de los campos de texto se presenta de la siguiente manera:

<v-col cols="12" md="4" class="py-0">
  <v-text-field 
    class="aeroplanNumber_unmasking" 
    :label="t('aeroplanNumber') + '*'"
    :aria-label="t('aeroplanNumber')"
    v-model="aeroplanNumber" 
    variant="underlined" 
    @keypress="onlyNumeric"
    :rules="[aeroplanNumberVaidation.required, aeroplanNumberVaidation.min, aeroplanNumberVaidation.max]"
    maxlength="9"
  >
  </v-text-field>
</v-col>
<v-col cols="12" md="4" class="py-0">
  <v-text-field 
    class="lastName_unmasking" 
    :label="t('surName') + '*'" 
    :aria-label="t('surName')"
    v-model="surName"
    validate-on="blur"
    variant="underlined" 
    :rules="[lastNameValidation.required, lastNameValidation.min]"
    maxlength="15"
  >
  </v-text-field>
</v-col>

Validaciones Implementadas

Las validaciones de los campos son las siguientes:

const aeroplanNumberVaidation = {
  required: value => !!value || t('loyaltyAeroplanRequired'),
  min: v => v.length >= 9 || t('aeroplanNumberLessError'),
  max: v => v.length <= 9 || t('aeroplanNumberGreaterError'),
};

const lastNameValidation = {
  required: value => !!value || t('surNameRequired'),
  min: v => v.length >= 3 || t('surNameError'),
};

Solución Propuesta

Para resolver el problema de los anuncios de error duplicados:

1. Verifica la Gestión de Cambios de Enfoque: Asegúrate de que los mensajes de error solo se anuncien una vez al cambiar el enfoque entre campos. Podrías implementar un sistema que limite las notificaciones solo a los cambios de estado significativos en la validación.

2. Modificación de Reglas de Validación: Considera modificar las reglas de validación de modo que solo se verifiquen y se anuncien los errores relevantes cuando el campo se ha tocado o ha cambiado, y no al perder el enfoque.

3. Implementación de aria-live: Puedes utilizar un contenedor con aria-live="assertive" o aria-live="polite" para anunciar los mensajes de error. Asegúrate de que el componente solo actualice su contenido cuando un nuevo error sea relevante.

Al implementar estos cambios, es posible mejorar la experiencia para los usuarios de lectores de pantalla y evitar la confusión causada por mensajes replicados.