Instrument readouts and controls
Numeric Keypad <smart-numeric-keypad>
NumericKeypad is an on-screen keypad for entering a numeric value such as a setpoint on a touch panel.
Accessibility Attributes
The NumericKeypad is one tab stop and accepts input from a physical keyboard: the digits, the decimal point, minus, Backspace, Delete, Enter and Escape work while it has focus, so an operator at a desk does not need the on-screen keys. The entry field is a read-only text box named for the value being entered, the current value and the limits are plain text next to it, and a rejected entry is an alert with the reason, read as soon as Enter is pressed.
The following ARIA attributes are used inside the NumericKeypad:
- role="group" - set on the container, with an aria-label naming the keypad, and tabindex="0" so it is one tab stop that a physical keyboard types into.
- role="textbox" with aria-readonly - set on the entry, with an aria-label naming what is being entered - "Entry, FIC-101 setpoint". Its text is what has been typed.
- role="alert" - set on the refusal. When Enter refuses an entry the reason - "Above the maximum of 120.0 m³/h" - is written there and read at once.
- aria-label - set on every key that is not a digit: the sign, decimal point, backspace, clear and step keys, and the accept and cancel keys carry their words.
- tabindex="-1" - set on the on-screen keys. They are for touch and pointer use; the keyboard reaches the same functions through the container.
- aria-disabled - indicates that the keypad is disabled.
Keyboard Interaction
The following keyboard shortcuts are available to interact with the NumericKeypad:
| Key | Action |
|---|---|
| Tab | Moves onto the keypad, and off it. The keypad is one stop. |
| 0-9 | Types a digit. The first key after opening replaces the shown value; a digit beyond the precision does nothing. |
| . or , | Types the decimal point, unless the precision is 0. |
| - | Changes the sign, when negative values are allowed. |
| Backspace / Delete | Removes the last character / clears the entry. |
| Enter | Accepts the entry, raising change - or refuses it with the reason, raising invalid, and leaves it on screen. |
| Escape | Cancels the entry and shows the value in force again, raising cancel. |
The on-screen keys take no keyboard focus: everything they do, the keyboard does through the container, and a keypad of sixteen tab stops would be sixteen presses to reach Enter.
Localization
All strings the NumericKeypad 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 NumericKeypad uses the following message keys:
- keypadLabel, entryLabel, current, limits, limitsMin, limitsMax
- accept, cancel, clear, backspace, decimal, sign, step
- aboveMax, belowMin, notANumber, tooPrecise, empty
German, French, Spanish and Chinese packs are included in the Smart.Industrial package. Strings that are also exposed as properties default to empty and fall back to the pack, so the default text stays translatable while an explicit property value takes precedence.
Additional information on WAI-ARIA for the SMART Framework can be found here.