call focus() on the DOM node when a focusable component is being focused (#77)

Author: eigil

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+# [1.3.0]
+## Added
+- new `init` config option `shouldFocusDOMNode` that focuses the underlying _accessible_ DOM node too.
+
 # [1.2.0]
 ## Added
 - new `init` config option `useGetBoundingClientRect` that affects the measurements of sizes and coordinates.

README.md

@@ -248,6 +248,14 @@ For example if you have an element with `translateX(50)`, the X position with th
 The choice depends on how often you are using transforms, and whether you want it to result into coordinates shift or not.
 Sometimes you would want element to be *visually* translated, but its coordinates to be calculated as it was before the translation.
 
+##### `shouldFocusDOMNode`: boolean (default: false)
+This flag makes the underlying _accessible_ DOM node to become focused as well. This is useful for [_accessible_](https://developer.mozilla.org/en-US/docs/Web/Accessibility) web applications.
+Note that it is the developer's responsibility to make the elements accessible! There are [many resources](https://www.google.com/search?q=web+accessibility) online on the subject. [HTML Semantics and Accessibility Cheat Sheet](https://webaim.org/resources/htmlcheatsheet/) is perhaps a good start,
+as it dives directly into the various html tags and how it complies with accessibility. Non-accessible tags like `<div>` needs to have the [tabindex](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets) attribute set.
+Also consider `role` and `aria-label` attributes. But that depends on the application.
+
+The flag is ignored if `nativeMode` is set.
+
 ### `setKeyMap`
 Method to set custom key codes. I.e. when the device key codes differ from a standard browser arrow key codes.
 ```jsx

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@noriginmedia/norigin-spatial-navigation",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "React hooks based Spatial Navigation solution",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package.json

@@ -163,6 +163,8 @@ class SpatialNavigationService {
    */
   private focusKey: string;
 
+  private shouldFocusDOMNode: boolean;
+
   /**
    * This collection contains focus keys of the elements that are having a child focused
    * Might be handy for styling of certain parent components if their child is focused.
@@ -526,6 +528,7 @@ class SpatialNavigationService {
     this.throttle = 0;
     this.throttleKeypresses = false;
     this.useGetBoundingClientRect = false;
+    this.shouldFocusDOMNode = false;
 
     this.pressedKeys = {};
 
@@ -563,13 +566,15 @@ class SpatialNavigationService {
     nativeMode = false,
     throttle: throttleParam = 0,
     throttleKeypresses = false,
-    useGetBoundingClientRect = false
+    useGetBoundingClientRect = false,
+    shouldFocusDOMNode = false
   } = {}) {
     if (!this.enabled) {
       this.enabled = true;
       this.nativeMode = nativeMode;
       this.throttleKeypresses = throttleKeypresses;
       this.useGetBoundingClientRect = useGetBoundingClientRect;
+      this.shouldFocusDOMNode = shouldFocusDOMNode && !nativeMode;
 
       this.debug = debug;
 
@@ -1235,6 +1240,10 @@ class SpatialNavigationService {
     if (this.isFocusableComponent(this.focusKey)) {
       const newComponent = this.focusableComponents[this.focusKey];
 
+      if (this.shouldFocusDOMNode && newComponent.node) {
+        newComponent.node.focus();
+      }
+
       newComponent.onUpdateFocus(true);
       newComponent.onFocus(
         this.getNodeLayoutByFocusKey(this.focusKey),