The switch component is used to display on and off content. It includes the role=”switch” attribute so the screen reader distinguishes it from a checkbox. The span with class name p-switch__label acts as the label, and is associated with the status of the switch input.
The element is focusable, and the Spacebar changes the state of the switch the same way a click would.
This component strives to follow WCAG 2.1 (level AA) guidelines, and care must be taken to ensure this effort is maintained when the component is implemented across other projects. This section offers advice to that effect:
aria-checked=”true” or aria-checked=”false” will set the switch to on or off respectively.aria-readonly is set to false as default, meaning the user can change the value of the switch. Change this to true if the switch is meant to be read only (i.e. disabled).