Configuring Widget Focus
When viewing a mashup, you can interact with widgets using the mouse or keyboard. As you navigate through a layout using the TAB key, items that are currently in focus are highlighted with a blue border. In ThingWorx 9.4 and later, the blue focus border is only applied when interacting with a widget using the keyboard. In previous versions of ThingWorx, the border is applied when using the mouse or the keyboard. The following image shows a Text Area widget in a focused state.
All widgets in ThingWorx support a focus state. However, some widgets have specific focus behavior. For example, in the Dropdown widget, the focus is set on the filter when the drop-down list opens. In the Dynamic Panel widget, the default focus is set on the size handle.
The following sections describe different aspects of mashup accessibility features:
Auto Focus
The FocusOnLoad widget property is available for some widgets such as Checkbox, Textfield, and Text Area. You can use the property to set the initial focus on a specific widget when a mashup is viewed at run time. You should set auto focus for all mashups that require user interaction. For example, you can set auto focus on the first text field in a form, which helps users identify what actions they should perform more quickly. For more information about auto focus, see Configuring Auto Focus.
Keyboard Navigation
You can use common keyboard shortcuts to navigate between items using the following keys.
Key | Description |
|---|---|
TAB SHIFT+TAB | Moves the focus box to the next or previous widget in the mashup. |
ENTER SPACE | Expands or collapses a parent item that contains a submenu. Opens or closes a section. |
UP/DOWN arrow | Focuses on the next or the previous element within a widget. |
RIGHT/LEFT arrow | Focuses on the next or the previous element within a widget. |
HOME | Focuses on the first item in the a group of parallel elements. |
END | Focuses on the last item in a group of parallel elements. |
Configuring the Tab Sequence for Widgets in a Mashup
The tab sequence is a number that you can set for each widget in a mashup using the TabSequence property. The value of the number determines the focus order when navigating a mashup using the TAB key. By default, the order is set based on the widget position in the DOM. For more information about Tab sequence, see Configuring the Tab Sequence.
Enabling Legacy Focus Mode
In ThingWorx 9.4 or later, the focus box around widgets is only displayed when using the keyboard to navigate a mashup. In previous versions, the focus box is displayed when using the mouse or the keyboard. You can control the focus behavior using the LegacyFocus mashup property. By default, this property is set to false when you create new mashups. To maintain backwards compatibility, this property is enabled in mashups that are created in previous versions. For more information , see Enabling Legacy Focus in a Mashup.