Keyboard Navigation of Smart HTML Elements
JavaScriptJavaScriptAngularAngularVueVueReactReact

Grid for Vue

Vue 3 version using Smart custom elements and template refs.

What this topic covers: practical setup, the framework-specific API access pattern, and copy-adapt guidance for the examples in this page.

<script setup>
import { onMounted, ref } from 'vue';
import 'smart-webcomponents/source/styles/smart.default.css';
import 'smart-webcomponents/source/modules/smart.grid.js';

const component = ref();
const componentProps = {
  // Copy this topic's JavaScript configuration here.
};

onMounted(() => {
  Object.assign(component.value, componentProps);
});
</script>

<template>
  <smart-grid ref="component"></smart-grid>
</template>

Use component.value for API methods in this topic.

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.

Keyboard Navigation

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

Related Properties

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).
For AI tooling

Developer Quick Reference

Topic: keyboard-navigation   Component: Grid   Framework: Vue

Main methods: (none detected)

Common config keys: (none detected)

Implementation Notes

Compatibility: Vue 3+   API access pattern: const component = ref() + component.value.method()

Lifecycle guidance: Use template refs with