Estados de los elementos de la interfaz de usuario

Resumen de los estados

El aspecto y el comportamiento de los elementos de la interfaz de usuario se ven afectados por múltiples factores: permisos, coherencia de los datos, interacciones disponibles... Como resultado de estos factores, existen algunos estados estándares que los elementos utilizan para comunicar con claridad al usuario lo que está sucediendo en cada momento y lo que podrían permitir que el usuario haga.

Para los componentes de Jutro, se trata de la lista de estados predefinidos y estarán disponibles para estos usos:

• Solo lectura
• Deshabilitado
• Solo visualización
• Deshabilitado accesible

Aunque algunos de estos comportamientos pueden aplicarse principalmente a componentes relacionados con la entrada de datos, otros tipos de componentes pueden tener estados relacionados (por ejemplo, “deshabilitado”) que tienen la misma intención.

Solo lectura

El estado solo lectura comunica al usuario que el valor de entrada no se puede cambiar debido a factores externos (por ejemplo, falta de acceso a la escritura).

El usuario puede hacer algo para habilitarlo, por ejemplo, ponerse en contacto con un administrador.

Ejemplo:

Deshabilitado

Comunica al usuario que el valor del elemento de la interfaz de usuario no se puede cambiar debido a factores locales (por ejemplo, la casilla de verificación sobre un campo de entrada debe marcarse primero para habilitar el acceso a este campo de entrada).

El usuario puede habilitarlo interactuando con la página.

Los elementos deshabilitados no son interactivos, por eso, no pueden recibir el foco (excepto los “elementos deshabilitados accesibles”). Utilice las flechas del teclado para acceder a los elementos de la interfaz de usuario deshabilitados mediante un lector de pantalla.

Solo visualización

Comunica al usuario que el elemento de la interfaz de usuario se utiliza en modo de visualización (por ejemplo, páginas de resumen, etc.) o en modo de edición (por ejemplo, formularios), pero nunca se puede editar.

Deshabilitado accesible

El estado deshabilitado accesible es un método que hace que los componentes deshabilitados cumplan con las pautas de accesibilidad mediante la modificación de algunos de los comportamientos relacionados con la deshabilitación:

Cualquier componente en el que se implemente este estado tendrá estas características:

• Se le eliminará el atributo HTML disabled.
• Se le agregará el atributo HTML aria-disabled.
• Se hará que todas las funciones de devolución de llamada, como onClick y onBlur, estén silenciadas y no se las puede llamar.

Según el componente, quizás sea necesario realizar otras modificaciones personalizadas.

Note: Solo en el componente Button se implementa este estado. Consulte su documentación para obtener más detalles.

Prioridad de los estados

Si dos o más de las propiedades disabled, displayOnly, y readOnly se establecen en true al mismo tiempo, la prioridad es la siguiente:

displayOnly > readOnly > disabled