Instrument readouts and controls
Selector Switch <smart-selector-switch>
SelectorSwitch is a switch with a set of named positions, such as a Hand-Off-Auto selector, a duty/standby selector or a local/remote switch.
Accessibility Attributes
The SelectorSwitch is a radio group whose radio buttons are buttons: one tab stop, the arrow keys move between positions, and Enter or Space requests a position. The checked radio is the position in force, as reported by the plant, not the position that was pressed; a requested position is named "requested" until the plant confirms it, and the group name states the position in force. Moving between positions with the arrow keys does not request any of them.
The following ARIA attributes are used inside the SelectorSwitch:
- role="group" - set on the container, with an aria-label that says the label, "selector", the position in force, or "no position" - and the interlock: "P-2101A selector, Auto, interlocked: key switch in Local".
- role="radiogroup" - set on the row of positions, named by the label.
- role="radio" - set on each position, a native button, with aria-checked true on the one in force and an aria-label of its name plus ", selected" or ", requested".
- tabindex - a roving tab stop: 0 on the position in force, or the first when none is, and -1 on the rest.
- aria-disabled="true" - set on every position while interlocked. The switch stays readable and focusable; a request raises blocked and announces the reason.
- aria-hidden="true" - set on the rotary knob, which is a picture of the segments below it.
- role="status" - set on the hint under the positions, so "Requested Hand, waiting for the plant" and "Press Auto again to confirm" are read as they appear.
- title - set on a position from its description, when one is given.
A change of the position in force is announced through a live region with the label and the position name; a blocked request is announced assertively with the reason.
Keyboard Interaction
The following keyboard shortcuts are available to interact with the SelectorSwitch:
| Key | Action |
|---|---|
| Tab | Moves onto the position in force, and off the switch. The switch is one stop. |
| Arrow Right / Arrow Down | Moves focus to the next position, wrapping. Nothing is requested. |
| Arrow Left / Arrow Up | Moves focus to the previous position, wrapping. Nothing is requested. |
| Home / End | Moves focus to the first / last position. |
| Enter / Space | Requests the focused position, raising positionRequest. With confirm on, the first press arms it and the second sends it; a second press within 300 ms of the first does not count. A held key requests once. The focus stays on the position. |
Localization
All strings the SelectorSwitch exposes to assistive technology come from its messages property, so they can be provided in the user's language. Set locale to select a language and add a language through messages. Assigning messages replaces the whole object, so include the existing languages when adding one: el.messages = Object.assign({}, el.messages, { de: pack }); If the built-in en pack is dropped, switching back to English shows raw message keys.
The SelectorSwitch uses the following message keys:
- switchLabel, noPosition, interlockSuffix, positionLabel, selectedSuffix, pendingSuffix
- hand, off, auto - the default positions
- confirmHint, pendingHint, blocked
German, French, Spanish and Chinese packs are included in the Smart.Industrial package. Positions given through the positions property carry their own labels and are not localized by the switch.
Additional information on WAI-ARIA for the SMART Framework can be found here.