New and Changed Lightning Web Components

Changed Lightning Web Components

These components have changed.

lightning-checkbox-group

These accessibility behaviors are new.

• The <abbr> element now specifies aria-hidden="true" for the asterisk (*) that denotes a required field.
• A <span> element that contains the "required" assistive text has been added for screen readers.

lightning-button-icon

This attribute is new.

• tooltip—If you provide a tooltip value, the component assigns this value to the aria-description attribute on the trigger button.

lightning-click-to-dial

When the component is in a disabled state, a <span> tag that specifies role="link" and aria-disabled="true" has been added for screen readers.

lightning-combobox

To accommodate high magnification when zoom is greater than 200%, the text label on the combobox wraps to the next line instead of truncates.

lightning-datatable

These accessibility behaviors are new.

• The button size on the action dropdown of the column header has been increased to 24 px by 24 px to improve the touch target size.
• Clicking the resize handler on the column header divider now lets you resize without dragging on the column divider. To commit the resize, click anywhere on the page. The column edge tracks your mouse pointer. To exit the click-resize mode without commiting the resize, press the Esc key or tab to remove focus from the column edge. Previously, you could resize a column with your mouse by click-dragging only.

This property in the rows object for the errors attribute is new.

• rowTitle—Optional string for the error icon's assistive text, which is used in place of the row's scope cell value. Set rowTitle when the scope cell value isn't a string, such as when the custom cell type outputs an object. Screen readers then announce a meaningful row label instead of [object Object]. If you don't set rowTitle and the scope cell value isn't a usable string, the assistive text falls back to Row Number {N}, where {N} is the row's 1-based index, so screen readers always announce a meaningful identifier.

The action type has a new property.

• alternativeText—Sets the accessible name of the row action trigger button. The default is "Show actions".

lightning-formatted-address

A hidden span tag for assistive text (Show in Google Maps) has been added on the map link for screen readers.

lightning-helptext

The button size has been increased to 24 px by 24 px to improve the touch target size.

The button icon now specifies the container variant and has a default size of small with a width of 24 px instead of 16 px.

lightning-input

These accessibility behaviors are new.

• datetime—When a validation error is returned on the field set, the component now also specifies aria-describedby on the time field to associate it with the error message.
• time—The component now specifies aria-autocomplete="none".
• toggle—The component now specifies aria-hidden for the on and off state text.

To accommodate high magnification when zoom is at 400% or greater, the date picker defaults to vertical scrolling and suppresses horizontal scrolling.

The error messages for the date and time fields now suggest a clear example time format, such as 11:30 AM, instead of displaying abstract CLDR pattern strings, such as h:mm a.

lightning-input-address

These attributes have changed.

• address-label—The status message uses the address label instead of the mailing address for screen reader announcements.
• show-address-lookup—A visible label (Search Address) is shown right after the address-label value.

lightning-input-field

The email field uses the placeholder name@example.com. This change also applies to email fields on a record detail page.

lightning-record-picker

When a filter value is present, the combobox wrapper specifies role=group and aria-labelledby.

lightning-slider

These attributes are new.

• unit—Appends a label to the range display to describe the unit, such as:
  • Percentages (%)
  • Currency symbols ($, €, and others)
  • Custom text suffixes (kg, px, and others)
  For example, if you use the % unit, the range label shows 0-100% instead of 0-100. The default is an empty string, which shows the plain min-max range with no unit.
• unit-position—Controls where the unit appears relative to the range. Valid values are:
  • prefix—Places the unit before the range and value. Use prefix for currency units. This is the default unit position.
  • suffix—Places the unit after the range and value. Use suffix for percentages.
• format-number—Provides number-to-text conversion for range endpoints and value. Supports custom domain and compact formatting, such as $1.5M or $50M.
• minimum-fraction-digits—Sets a minimum floor for fractional decimal places independent of the step for decimal precision. Setting minimum-fraction-digits greater than 0 keeps the min endpoint bare (0) while padding the max endpoint (1500.0). If step has higher precision than minimum-fraction-digits, the finer step precision takes priority. For example, if step="0.05" and minimum-fraction-digits="1", the range shows 0-1500.00.

Range boundaries are now shown with step precision. For example, if you specify step="0.1", the range display shows 0.0-100.0 instead of 0-100.

lightning-tabset

The overflow More button now uses role=presentation instead of role=tab to avoid nesting interactive controls inside a tab.

lightning-vertical-navigation-item-icon

This attribute is new.

• icon-assistive-text—The alternative text describing the icon's meaning to assistive technologies, for example, Open link in a new window. Set to an empty string when the icon is decorative or its meaning is conveyed by surrounding content.