Instrument readouts and controls
Knob <smart-knob>
Knob is a rotary control for setting a value.
Accessibility Attributes
The Knob is a rotary control that extends Tank, so it inherits the WAI-ARIA slider behaviour. It is focusable, announces itself as a slider with its current value, and can be operated fully from the keyboard without the circular drag.
The following ARIA attributes are used inside the Knob:
- role="slider" - inherited from Tank. A knob is a bounded numeric control, which is what a slider is, the roundness is presentation.
- aria-label - the aria-label the application sets on the knob, kept as its name. Without one, the knob is named by the knobLabel message, "Knob" in English, and the name follows a change of locale. It is set after Tank's own render(), which writes the name "Tank".
- aria-valuenow - kept in step with the value on every redraw. A slider whose aria-valuenow never moves is worse than one with no ARIA at all, because it actively reports the wrong number.
- aria-valuemin / aria-valuemax - the ends of the scale.
- aria-valuetext - the value as the readout shows it, at precisionDigits. With showUnit set, it carries the unit - "6.2 bar" rather than "6.2". showUnit is false by default, so set it for the unit to be read out.
- aria-description - set while quality is uncertain, bad or stale, from the qualityUncertain, qualityBad and qualityStale messages, and removed when it is good.
- tabindex - 0, so the knob is reachable by keyboard. Tank puts itself in the tab order from inside code this component replaces, so it is set explicitly, without it the knob would announce as a slider and then be unreachable.
- aria-hidden="true" - set on the dial graphic and the readout text, both of which duplicate what the ARIA value attributes already carry.
Keyboard Interaction
The following keyboard shortcuts are available to interact with the Knob:
| Key | Action |
|---|---|
| Arrow Up/Right | Increases the value by interval, which is 1 by default. When interval is not a positive number, the step is a hundredth of the range. Right is reversed when rightToLeft is set; up never is. |
| Arrow Down/Left | Decreases it by the same step. |
| Page Up / Page Down | Moves ten steps at a time. |
| Home / End | Jumps to the minimum / maximum. |
The keyboard path clamps and coerces exactly as a drag does, so an arrow key cannot walk past the maximum or land off the interval grid.
Localization
All strings the Knob 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 Knob uses the following message keys:
- knobLabel
- qualityUncertain, qualityBad, qualityStale
Additional information on WAI-ARIA for the SMART Framework can be found here.