@vectojs/core 1.6.1 → 1.6.2

package/README.md

@@ -112,6 +112,11 @@ This projection is intentionally thin. Applications still own accessible names,
 focus order, contrast, and correct control semantics. See the
 [accessibility guide](https://vectojs.org/learn/accessibility/).
 
+Non-control workspaces that own keyboard shortcuts can opt into focus order
+explicitly: return `{ role: 'region', label: 'Canvas workspace', tabIndex: 0 }`.
+The Scene refreshes the projected `tabindex` when attributes change. Keep native
+text inputs and editable content in charge of their own editing shortcuts.
+
 Interactive projected nodes capture the active pointer on `pointerdown` and route
 `pointermove`, `pointerup`, and `pointercancel` through normal VMT capture/bubble propagation.
 Treat `pointercancel` as rollback: discard transient gesture state and do not create durable

package/dist/index.js

@@ -297,6 +297,20 @@ var ComputeParticleEntity = (_class = class extends _chunkDFNK6OV6js.Entity {
 }, _class);
 
 // src/tree/Scene.ts
+var INTERACTIVE_A11Y_ROLES = /* @__PURE__ */ new Set([
+  "button",
+  "switch",
+  "checkbox",
+  "radio",
+  "link",
+  "tab",
+  "menuitem",
+  "slider",
+  "combobox"
+]);
+function isNativelyFocusable(element) {
+  return element instanceof HTMLButtonElement || element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || element instanceof HTMLAnchorElement && element.hasAttribute("href");
+}
 var REDUCED_MOTION_FPS = 30;
 function parseInlinePx(value) {
   if (!value || !value.endsWith("px")) return null;
@@ -910,20 +924,7 @@ var Scene = (_class2 = class _Scene {
           }
           node.emit("blur", {});
         });
-        const INTERACTIVE_ROLES = /* @__PURE__ */ new Set([
-          "button",
-          "switch",
-          "checkbox",
-          "radio",
-          "link",
-          "tab",
-          "menuitem",
-          "slider",
-          "combobox"
-        ]);
-        const nativelyFocusable = el instanceof HTMLButtonElement || el instanceof HTMLInputElement || el instanceof HTMLSelectElement || el instanceof HTMLTextAreaElement || el instanceof HTMLAnchorElement && el.hasAttribute("href");
-        if (!nativelyFocusable && attrs.role && INTERACTIVE_ROLES.has(attrs.role)) {
-          el.setAttribute("tabindex", "0");
+        if (!isNativelyFocusable(el) && attrs.role && INTERACTIVE_A11Y_ROLES.has(attrs.role)) {
           el.addEventListener("keydown", (e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
@@ -945,6 +946,13 @@ var Scene = (_class2 = class _Scene {
       if (attrs.label !== void 0 && el.getAttribute("aria-label") !== attrs.label) {
         el.setAttribute("aria-label", attrs.label);
       }
+      const implicitTabIndex = !isNativelyFocusable(el) && attrs.role && INTERACTIVE_A11Y_ROLES.has(attrs.role) ? 0 : null;
+      const desiredTabIndex = _nullishCoalesce(attrs.tabIndex, () => ( implicitTabIndex));
+      if (desiredTabIndex === null) {
+        if (el.hasAttribute("tabindex")) el.removeAttribute("tabindex");
+      } else if (el.getAttribute("tabindex") !== String(desiredTabIndex)) {
+        el.setAttribute("tabindex", String(desiredTabIndex));
+      }
       if (attrs.inputType !== void 0 && el.getAttribute("type") !== attrs.inputType) {
         el.setAttribute("type", attrs.inputType);
       }

package/dist/index.mjs

@@ -297,6 +297,20 @@ var ComputeParticleEntity = class extends Entity {
 };
 
 // src/tree/Scene.ts
+var INTERACTIVE_A11Y_ROLES = /* @__PURE__ */ new Set([
+  "button",
+  "switch",
+  "checkbox",
+  "radio",
+  "link",
+  "tab",
+  "menuitem",
+  "slider",
+  "combobox"
+]);
+function isNativelyFocusable(element) {
+  return element instanceof HTMLButtonElement || element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || element instanceof HTMLAnchorElement && element.hasAttribute("href");
+}
 var REDUCED_MOTION_FPS = 30;
 function parseInlinePx(value) {
   if (!value || !value.endsWith("px")) return null;
@@ -910,20 +924,7 @@ var Scene = class _Scene {
           }
           node.emit("blur", {});
         });
-        const INTERACTIVE_ROLES = /* @__PURE__ */ new Set([
-          "button",
-          "switch",
-          "checkbox",
-          "radio",
-          "link",
-          "tab",
-          "menuitem",
-          "slider",
-          "combobox"
-        ]);
-        const nativelyFocusable = el instanceof HTMLButtonElement || el instanceof HTMLInputElement || el instanceof HTMLSelectElement || el instanceof HTMLTextAreaElement || el instanceof HTMLAnchorElement && el.hasAttribute("href");
-        if (!nativelyFocusable && attrs.role && INTERACTIVE_ROLES.has(attrs.role)) {
-          el.setAttribute("tabindex", "0");
+        if (!isNativelyFocusable(el) && attrs.role && INTERACTIVE_A11Y_ROLES.has(attrs.role)) {
           el.addEventListener("keydown", (e) => {
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
@@ -945,6 +946,13 @@ var Scene = class _Scene {
       if (attrs.label !== void 0 && el.getAttribute("aria-label") !== attrs.label) {
         el.setAttribute("aria-label", attrs.label);
       }
+      const implicitTabIndex = !isNativelyFocusable(el) && attrs.role && INTERACTIVE_A11Y_ROLES.has(attrs.role) ? 0 : null;
+      const desiredTabIndex = attrs.tabIndex ?? implicitTabIndex;
+      if (desiredTabIndex === null) {
+        if (el.hasAttribute("tabindex")) el.removeAttribute("tabindex");
+      } else if (el.getAttribute("tabindex") !== String(desiredTabIndex)) {
+        el.setAttribute("tabindex", String(desiredTabIndex));
+      }
       if (attrs.inputType !== void 0 && el.getAttribute("type") !== attrs.inputType) {
         el.setAttribute("type", attrs.inputType);
       }

package/dist/tree/Entity.d.ts

@@ -129,6 +129,8 @@ export interface A11yAttributes {
     role?: string;
     /** Accessible name applied via `aria-label`. */
     label?: string;
+    /** Explicit keyboard tab order for projected non-native interaction regions. */
+    tabIndex?: number;
     /** Destination URL; only meaningful for `tag: 'a'`. */
     href?: string;
     /** Link target; only meaningful for `tag: 'a'`. Defaults to current window. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/core",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "publishConfig": {
     "access": "public"
   },