Introduction:
In this article, learn about new changes added in Lightning Web Components latest Salesforce update.
Attributes:” field-level-help and disabled”
The lightning-pill and lightning-pill-container components now have updated accessibility behaviors, particularly in terms of keyboard navigation and the activation of remove buttons. The lightning-record-form and lightning-record-picker components have introduced new behaviors related to multiple currencies and field-level help.
Example:
<!– New attributes: field-level-help and disabled –>
<lightning-record-picker
field-level-help=”Select a record”
disabled>
</lightning-record-picker>
The field-level-help attribute provides help text, and the disabled attribute disables the component.
Attributes: “role”
The lightning-input component introduces a new attribute called role, enabling the creation of accessible combo boxes. Accessibility behaviors have been added or modified, including passing down ARIA attributes for various input types and removing the role=alert attribute for specific input types.
Example:
<!– New attribute: role –>
<lightning-input
type=”text”
role=”combobox”>
</lightning-input>
With the new rules, the focus will be on the title text when a header is present. If there is no header, it will focus on the first interactive element in the body, and if there is none, it will focus on the close button.
Attributes: “wrap-table-header”
The lightning-datatable component now includes a new attribute called wrap-table-header, allowing the header text to wrap within column widths. Additionally, it supports a custom data source component for dynamic determination of custom data types at runtime.
Example:
<!– New attribute: wrap-table-header –>
<lightning-datatable
key-field=”id”
data={data}
columns={columns}
wrap-table-header={true}>
</lightning-datatable>
As you can see, the wrap-table-header attribute is set to true, allowing the header text to wrap within column widths.
Attributes: “heading-label, heading-level, heading-visible”
The lightning-tabset component sees the addition of new attributes like heading-label, heading-level, and heading-visible for customized assistive text and visibility control. Accessibility behaviors have been modified to allow keyboard navigation to the ‘more’ menu using tab and arrow keys. These changes aim to enhance the flexibility and accessibility of Lightning Web Components in building user interfaces.
Example:
<!– New attributes: heading-label, heading-level, heading-visible –>
<lightning-tabset
heading-label=”Custom Tabs”
heading-level=”3″
heading-visible={true}>
<!– Tab components go here –>
</lightning-tabset>
These new updates allow Personalization of Supportive text for tabset headings, set the heading level, and control view of the heading text above the tabset.
Conclusion:
While using these updates We create the user friendly Lightning Web Components. And more update and changes are available in latest Spring’24 update. Can learn more updates details through following official link.
Reference link: https://help.salesforce.com/s/articleView?id=release-notes.rn_lwc_components.htm&release=248&type=5
Author Bio
