Keyboard Navigation of Smart HTML Elements
JavaScriptJavaScriptAngularAngularVueVueReactReact

Grid for React

React version of this topic (compatible with React 19+). Keep the same configuration logic from JavaScript and pass it as component props.

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

import React, { useMemo, useRef } from 'react';
import { Grid } from 'smart-webcomponents-react/grid';
import 'smart-webcomponents-react/source/styles/smart.default.css';

export default function App() {
  const componentRef = useRef(null);
  const componentProps = useMemo(() => ({
    // Copy this topic's JavaScript configuration here.
  }), []);

  return <Grid ref={componentRef} {...componentProps}></Grid>;
}

Use componentRef.current 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: React

Main methods: (none detected)

Common config keys: (none detected)

Implementation Notes

Compatibility: React 19+   API access pattern: const componentRef = useRef(null) + componentRef.current.method()

Lifecycle guidance: Use useMemo for large config objects and call imperative API through componentRef.current after first render.

Common pitfalls:

  • Recreating columns/dataSource objects on every render can reset component state.
  • Calling API methods before ref is available causes runtime errors.
  • Mixing controlled and imperative updates without sync can lead to stale UI.

Validation checklist:

  • Keep config objects memoized when possible.
  • Guard API calls with ref existence checks.
  • Verify CSS theme import is present once per app.