Resource Picker <smart-resource-picker>

Accessibility Attributes

The ResourcePicker is a combobox: a text field with a list of options that opens under it. The field is named by the label, the list is named, the active option is announced as the arrow keys move through it, and the interface of the selected resource is part of what is read with the name. A typed resource that is not accepted is explained in a status line.

The following ARIA attributes are used inside the ResourcePicker:

• role="combobox" - set on the text field, with aria-autocomplete="list", aria-haspopup="listbox", aria-expanded for whether the list is open and aria-controls pointing at the list.
• aria-label - names the field with the label, or "Resource" when there is none. A label element is also paired with the field through for.
• role="listbox" with an aria-label - set on the list; each resource is an option with aria-selected for the one in force, and a typed entry that does not parse is an option with aria-disabled.
• aria-activedescendant - set on the field to the active option, so the option under the arrow keys is announced without moving focus out of the field.
• aria-busy - set on the refresh button while discovery runs.
• role="status" - set on the hint line, so "Not a resource name" is announced when a typed entry is refused.
• aria-disabled - indicates that the picker is disabled.

Keyboard Interaction

The field and the refresh button are each a tab stop.

• Typing in the field filters the list by name, alias and description, and opens it.
• Down and Up arrow open the list and move through the options.
• Enter selects the active option, or accepts the typed text when custom entries are allowed and it parses as a resource name.
• Escape closes the list and shows the value again.
• Tab leaves the field, closing the list.
• On the refresh button, Enter or Space raises the discovery request.

Localization

All strings the ResourcePicker 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 ResourcePicker uses the following message keys:

• placeholder, refresh, searching
• noResources, noMatch, custom, invalid, unavailable
• kind-gpib, kind-tcpip, kind-usb, kind-serial, kind-daq, kind-pxi, kind-other
• listLabel, controlLabel

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.