Saltar al contenido principal

Semántica del botón Material Chip

Los Material Chips interactivos ahora están marcados semánticamente como botones.

Resumen

#

Flutter ahora aplica la etiqueta semántica de button a todos los Material Chips interactivos con fines de accesibilidad.

Contexto

#

Los Material Chips interactivos (es decir, ActionChip, ChoiceChip, FilterChip y InputChip) ahora están marcados semánticamente como botones. Sin embargo, el Chip de información no interactivo no lo está.

Marcar los Chips como botones ayuda a las herramientas de accesibilidad, motores de búsqueda y otro software de análisis semántico a entender el significado de una aplicación. Por ejemplo, permite a los lectores de pantalla (como TalkBack en Android y VoiceOver en iOS) anunciar un Chip cliqueable como un "botón", lo que puede ayudar a los usuarios a navegar por tu aplicación. Antes de este cambio, los usuarios de herramientas de accesibilidad podían tener una experiencia deficiente, a menos que hubieras implementado una solución alternativa agregando manualmente la semántica faltante a los widgets de Chip en tu aplicación.

Descripción del cambio

#

Se modifica el widget Semantics más externo que envuelve todas las clases Chip para describir sus propiedades semánticas.

Los siguientes cambios se aplican a ActionChip, ChoiceChip, FilterChip, e InputChip:

  • La propiedad button se establece en true.
  • La propiedad enabled refleja si el Chip es actualmente cliqueable (al tener un callback configurado).

Estos cambios de propiedad alinean el comportamiento semántico de los Chips interactivos con el de otros botones de Material.

Para el Chip de información no interactivo:

  • La propiedad button se establece en false.
  • La propiedad enabled se establece en null.

Guía de migración

#

Es posible que no necesites realizar ninguna migración. Este cambio solo te afecta si solucionaste el problema de que los Material Chips no tenían la semántica de button envolviendo el Widget dado al campo label de un Chip con un Widget Semantics marcado como button: true. En este caso, la semántica de button interna y externa entra en conflicto, haciendo que el área tocable del botón se reduzca al tamaño de la etiqueta después de que se introduzca este cambio. Corrige este problema ya sea eliminando ese Widget Semantics y reemplazándolo con su hijo, o eliminando la propiedad button: true si aún es necesario aplicar otras propiedades semánticas al Widget label del Chip.

The following snippets use InputChip como ejemplo, pero el mismo proceso se aplica también a ActionChip, ChoiceChip y FilterChip.

Case 1: Remove the Semantics widget.

Código antes de la migración:

dart
Widget myInputChip = InputChip(
  onPressed: () {},
  label: Semantics(
    button: true,
    child: Text('My Input Chip'),
  ),
);

Código después de la migración:

dart
Widget myInputChip = InputChip(
  onPressed: () {},
  label: Text('My Input Chip'),
);

Case 2: Remove button:true from the Semantics widget.

Código antes de la migración:

dart
Widget myInputChip = InputChip(
  onPressed: () {},
  label: Semantics(
    button: true,
    hint: 'Example Hint',
    child: Text('My Input Chip'),
  ),
);

Código después de la migración:

dart
Widget myInputChip = InputChip(
  onPressed: () {},
  label: Semantics(
    hint: 'Example Hint',
    child: Text('My Input Chip'),
  ),
);

Timeline

#

Introducido en la versión: 1.23.0-7.0.pre
En la versión estable: 2.0.0

Referencias

#

Documentación de la API:

Problema relevante:

  • Issue 58010: InputChip no anuncia ninguna acción para a11y en iOS

PRs relevantes:

  • PR 60141: Ajuste de la semántica de accesibilidad de Material Chip para coincidir con los botones
  • PR 60645: Revertir "Ajuste de la semántica de accesibilidad de Material Chip para coincidir con los botones" (#60141)
  • PR 61048: Volver a introducir "Ajuste de la semántica de accesibilidad de Material Chip para coincidir con los botones" (#60141)