Validate accessible field labels in development
Introduce development-time validation for the label prop on form fields to guard against blank values and guide towards the alternative labelling options that are available.
This validation helps ensure that all fields are accessible to screen readers and other assistive technologies.
Standardise disabled & critical state across form fields
Improves the consistency of form fields when combining both disabled and critical tone, which includes:
critical bordersmessage and not reserving space for it unless explicitly providing the reserveMessageSpace prop.Ensure no space above field with undefined label
Fixes an issue where passing undefined as the label to a form field would result in an unwanted space above the field.
Improve internal form field spacing
Refined the spacing between internal elements of form fields to align with the latest spacing guidelines.
This change impacts the Stack spacing between label and description, the form field itself and the message slots.
Move secondary ButtonIcon tone to icons
Following the deprecation of the secondary tone of ButtonIcon, this updates all internal usages to apply the secondary tone directly to the icon.
Adopt small sized ButtonIcon for field actions
Switch over to small (previously standard) sized ButtonIcon for field actions such as clear field, or toggle password visibility.
Hide field borders in dark containers
Reduce visual noise when a form field is displayed in a dark container by hiding the default border. As fields are light on light backgrounds, the border is used to delineate its bounds against the container, which is not relevant in a dark container.
Add support for caution tone to form fields
Provide support for applying a caution tone to form fields.
Specifying this tone will show the IconCaution alongside the provided message.
EXAMPLE USAGE:
<TextField tone="caution" message="Caution message" />
Show description on form fields when no label provided
Previously, a FieldLabel without a label would return nothing. However, now that form fields can opt for indirect or hidden labels (via aria-label or aria-labelledby), the description should still be shown if provided.
Note: The secondaryLabel and tertiaryLabel remain conditional based on the presence of a label. This is due to their location in the layout being anchored off the label.
EXAMPLE USAGE:
<FieldLabel description="Description now visible without label" />
Support data attribute boolean values
The data attribute map now supports boolean values. This provides an improvement for the developer experience, no longer having to convert values to strings explicitly.
EXAMPLE USAGE:
<Component data={{ 'custom-attribute': true, }} /> // => <div data-custom-attribute="true" />
TextField: Add inputMode and step support
Provide support for the native inputMode and step attributes.
The inputMode will also be defaulted based on the specified type. For example: <TextField type="number" /> will default the inputMode to numeric.
EXAMPLE USAGE:
<TextField inputMode="numeric" step=".01" />
Autosuggest, PasswordField, TextField, useToast: Add id to internal close/clear buttons
Autosuggest, Dialog, Drawer, OverflowMenu, Tag, TextField, useToast: Migrate to use ButtonIcon
Adopt new ButtonIcon for clear/close actions in favour of custom internal buttons.
Autosuggest, TextField: Add clearLabel prop
To support translations, the clear button in the field can now be customised using the clearLabel prop.
EXAMPLE USAGE:
<Autosuggest clearLabel="Clear" // ... />
Alert, Autosuggest, Tag, TextField: Use neutral tone button style for clear action
Autosuggest, Dropdown, MonthPicker, PasswordField, TextField, Textarea: Hide placeholder text when field is disabled
Autosuggest, Checkbox, CheckboxStandalone, Dropdown, MonthPicker, TextField, Textarea, Radio, RadioGroup: Dim the field value and label when field is disabled
Autosuggest, TextField: Hide clear button when field is disabled.
Buttons, Fields, TextLinks, Toggle: Use span for field state overlays instead of div
Produce more valid HTML as div elements are not as flexible with which elements they can be inside (from a validators perspective).
Display formAccent outline on form elements when focused
Autosuggest, Dropdown, MonthPicker, PasswordField, Textarea, TextField: Add aria-label & aria-labelledby support
In some cases it may be necessary for a field to be labelled by another element or even not to have a visual label. Instead of providing a label either aria-label or aria-labelledby can be provided.
EXAMPLE USAGE:
// Standard field label <TextField label="My field" /> // Hidden field label <TextField aria-label="My field" /> // Labelled by another element <Heading id="title">Title</Heading> <TextField aria-labelledby="title" />
TextField: Add prefix prop
The prefix prop allows you to prepend read-only content on the left-hand side of the field. This is typically used for currency symbols, country codes, etc.
EXAMPLE USAGE
<TextField prefix="+61" {...rest} />
TextField,Dropdown,PasswordField,MonthPicker,Textarea: Apply aria-describedby to form elements only when needed
Only apply aria-describedby to form elements when needed, e.g. either a message, description, or an explicit aria-describedby is passed.
TextField, PasswordField, Textarea, Autosuggest, Dropdown, MonthPicker: Add decription to aria-describedby
TextField, PasswordField, Textarea, Dropdown: Add support for multiple field descriptions
Previously, if a custom aria-describedby prop was passed, it would take precedence over the message prop, which also uses aria-describedby. Both descriptions can now be applied at the same time.
TextField, Autosuggest, PasswordField: Improved support for field buttons with browser extensions.
The implementation of internal spacing within fields has been adjusted to better support browser extensions for password managers.
Affects the following components:
TextField, Autosuggest, PasswordField: Prevent field buttons firing on right click
Field buttons, such as clear and password visibility toggle, fire on mouse down to ensure focus is retained on the relevant field. We now ensure that the button only recognises left mouse button clicks.
Affects the following components:
Hide webkit native clear field on search type inputs