Build your web apps using Smart Custom Elements
Keyboard Navigation of Smart HTML Elements
To enable easier access to functionalities of Smart custom elements for all users, even those with disabilities or using assistive technology, keyboard shortcuts and navigation are enabled for the elements, where applicable.
Keyboard interaction for user interface components is encouraged by the WAI-ARIA (Accessible Rich Internet Applications) standard and the WAI-ARIA Authoring Practices 1.1 document has been used by the Smart HTML Elements development team as a basis for the implemented keyboard support.
To be able to use an element's keyboard shortcuts/navigation, it has to be focused (be the document's activeElement). This can be done by clicking on it, or by navigating through the document's tab indexes by pressing Tab (navigate forward) or Shift + Tab (navigate backward). Once focus is received by the element, its keyboard shortcuts can be used.
Each custom element's keyboard shortcuts are listed on its respective Overview page (e.g. https://www.htmlelements.com/docs/accordion/).
Frequently Used Keboard Shortcuts
- Arrow up - increments value or navigates to previous item
- Arrow down - decrements value or navigates to next item
- Arrow left - navigates to previous item
- Arrow right - navigates to next item
- Enter - activates/toggles a button/pop-up or confirms edit operation
- Space - activates/toggles a button/pop-up
- Escape - deactivates a pop-up or cancels edit operation
- F2 - initiates edit operation
- Control/Shift - modifies selection behavior (in elements that support extended selection)
- Alt + Arrow down - activates a pop-up
- Alt + Arrow up - deactivates a pop-up
- Tab - focuses the next element
- Shift + Tab - focuses the previous element
All Smart web components implement the following Boolean properties that can be used to control their focusing behavior, which, in turn affects keyboard navigation:
- unfocusable - if enabled, prevents the focusing of the element with the keyboard (Tab/Shift + Tab);
- disabled - if enabled, elements are disabled and cannot be interacted with in any way;
- readonly - if enabled, elements cannot be edited, but can be focused with Tab/Shift + Tab and can be interacted with (e.g. pop-ups can be opened).