Introduction:
Recent updates to Lightning Web Components bring a range of enhancements aimed at improving both functionality and accessibility. These updates include new attributes and modifications designed to offer greater customization and control over user interface elements.
Lightning-Datatable:
Lightning Web Components have introduced modifications to various components, along with new attributes and behaviors. The lightning-datatable component now features a new attribute, wrap-table-header, which enables header text to wrap within column widths. Furthermore, it now supports a custom data source component, allowing for the dynamic determination of custom data types at runtime.
Example for Lightning-Datatable changes:
<!– New attribute: wrap-table-header –>
<lightning-datatable
key-field=”id”
data={data}
columns={columns}
wrap-table-header={true}>
</lightning-datatable>
Wrap-Table-Header:
Notice that the wrap-table-header attribute is set to true, which allows the header text to wrap within column widths.
Lightning-Input:
The lightning-input component now includes a new role attribute, which facilitates the creation of accessible combo boxes. Additionally, accessibility features have been updated or introduced, such as the inclusion of ARIA attributes for various input types and the removal of the role=alert attribute for certain input types.
Example for lightning-input changes:
<!– New attribute: role –>
<lightning-input
type=”text”
role=”combobox”>
</lightning-input>
Lightning-Record-Picker:
Under the new rules, focus will be directed to the title text when a header is available. If no header is present, the focus will shift to the first interactive element in the body; if there are none, it will focus on the close button.
Updates to accessibility behaviors have been made for the lightning-pill and lightning-pill-container components, particularly concerning keyboard navigation and the activation of remove buttons. Additionally, the lightning-record-form and lightning-record-picker components now feature new behaviors related to multiple currencies and field-level help.
Example for lightning-record-picker changes:
<!– 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 offers help text, while the disabled attribute disables the component.
Lightning – Tab set:
The lightning-tabset component has been updated with new attributes such as heading-label, heading-level, and heading-visible, allowing for customized assistive text and control over visibility. Accessibility improvements now enable keyboard navigation to the ‘more’ menu using tab and arrow keys. These updates are designed to enhance the flexibility and accessibility of Lightning Web Components for creating user interfaces.
Example for lightning-tabset changes:
<!– 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 attributes enable customization of assistive text for tab set headings, set the heading level, and manage the visibility of the heading text above the tab set.
See how FieldAx can transform your Field Operations.
Try it today! Book Demo
You are one click away from your customized FieldAx Demo!
Conclusion:
These enhancements, including the new attributes for customizing assistive text, setting heading levels, and managing visibility, significantly improve the flexibility and accessibility of Lightning Web Components. These changes ensure a more adaptable and user-friendly experience when building and interacting with user interfaces.
Author Bio
