UI elements states

States summary

UI elements' look and feel and behavior are affected by multiple factors: permissions, data consistency, available interactions... As a result of these factors, there are some standard states that the elements use to clearly communicate to the user what is happening at any moment and what they might allow the user to do.

For Jutro components this is the list of predefined states and they will be made available in those cases where the use case apply:

• Read-only
• Disabled
• Display-only
• Accessible-disabled

Although some of these behaviors might mainly apply to input related components, other component types might have related states (e.g. 'disabled') that have the same intention.

Read-only

Read-only state communicates to the user that the input value cannot be changed because of outside factors (eg. lack of write access).

A user can take action to enable it by, for example, contacting an administrator.

Sample:

Disabled

Communicates to the user that the UI element value cannot be changed because of local factors (eg. the checkbox above an input field has to be checked first to enable access to this input field).

A user can take action to enable it by interacting with the page.

Disabled elements are not interactive so they cannot be focused (exception "accessible-disabled elements"). Use keyboard arrows to access the disabled UI elements using a screen reader.

Display-only

Communicates to the user that the UI element is used in display mode (eg. summary pages etc) or used in edit mode (eg. forms) but can never be editable.

Accessible-disabled

The accessible disabled state is an approach that keeps disabled components accessibility compliant by modifying the some of the disabled related behaviors:

Any component implementing this state will:

• Remove the disabled HTML attribute
• Add the aria-disabled HTML attribute
• Mute and make all callback functions, such as onClick and onBlur, unable to be called

Depending on the component, other custom modifications might need to be performed.

note

Only Button component implements this state. Check its documentation for further details.

States precedence

If two or more of the properties disabled, displayOnly, and readOnly are set to true at the same time, the precedence is as follows:

displayOnly > readOnly > disabled