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
buttonse establece entrue. - La propiedad
enabledrefleja 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:
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:
Widget myInputChip = InputChip(
onPressed: () {},
label: Semantics(
button: true,
child: Text('My Input Chip'),
),
);
Código después de la migración:
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:
Widget myInputChip = InputChip(
onPressed: () {},
label: Semantics(
button: true,
hint: 'Example Hint',
child: Text('My Input Chip'),
),
);
Código después de la migración:
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:
ActionChipChipChoiceChipFilterChipInputChip- Botones de Material
- Material Chips
Semantics-
SemanticsProperties.button -
SemanticsProperties.enabled
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)
A menos que se indique lo contrario, la documentación de este sitio refleja Flutter 3.44.0. Página actualizada por última vez el 2026-05-11. Ver código fuente oreportar un problema.