@reykjavik/hanna-react 0.10.139 → 0.10.140

package/CHANGELOG.md

@@ -4,6 +4,13 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.140
+
+_2024-11-21_
+
+- `Layout`:
+  - fix: Clicking "Skip to navigation" focuses the first focusable element
+
 ## 0.10.139
 
 _2024-11-20_

package/FocusTrap.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FocusTrap = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 /**
  * A focus trap element that can be used to keep keyboard focus within a
  * container block.
@@ -21,7 +22,7 @@ const FocusTrap = (props) => {
             if (!container) {
                 return;
             }
-            const focusables = container.querySelectorAll('a[href], input, select, textarea, button, summary, iframe, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
+            const focusables = container.querySelectorAll(hanna_utils_1.focusElement.keyboardFocusableSelector);
             const delta = props.atTop ? -1 : 1;
             let i = delta < 0 ? focusables.length - 1 : 0;
             let newTarget;

package/Layout.js

@@ -24,7 +24,7 @@ const Layout = (props) => {
             react_1.default.createElement("div", { className: "Layout__header", role: "banner" },
                 (0, _Layouts_js_1.renderLayoutHomeLink)('Layout', logoLink, siteName),
                 ' ',
-                navChildren && (react_1.default.createElement("a", { className: "Layout__header__navlink", href: "#pagenav", onClick: a11yHelpers_js_1.handleAnchorLinkClick, "aria-label": txt.skipLinkLabel }, txt.skipLinkLabel))),
+                navChildren && (react_1.default.createElement("a", { className: "Layout__header__navlink", href: "#pagenav", onClick: (e) => (0, a11yHelpers_js_1.handleAnchorLinkClick)(e, true), "aria-label": txt.skipLinkLabel }, txt.skipLinkLabel))),
             react_1.default.createElement("div", { className: "Layout__main", role: "main" }, mainChildren || children),
             navChildren && (react_1.default.createElement("div", { className: "Layout__nav", id: "pagenav", tabIndex: -1, role: "navigation" }, navChildren)),
             react_1.default.createElement("div", { className: "Layout__footer", role: "complementary" }, footerChildren))));

package/esm/FocusTrap.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { focusElement } from '@reykjavik/hanna-utils';
 /**
  * A focus trap element that can be used to keep keyboard focus within a
  * container block.
@@ -17,7 +18,7 @@ export const FocusTrap = (props) => {
             if (!container) {
                 return;
             }
-            const focusables = container.querySelectorAll('a[href], input, select, textarea, button, summary, iframe, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
+            const focusables = container.querySelectorAll(focusElement.keyboardFocusableSelector);
             const delta = props.atTop ? -1 : 1;
             let i = delta < 0 ? focusables.length - 1 : 0;
             let newTarget;

package/esm/Layout.js

@@ -20,7 +20,7 @@ export const Layout = (props) => {
             React.createElement("div", { className: "Layout__header", role: "banner" },
                 renderLayoutHomeLink('Layout', logoLink, siteName),
                 ' ',
-                navChildren && (React.createElement("a", { className: "Layout__header__navlink", href: "#pagenav", onClick: handleAnchorLinkClick, "aria-label": txt.skipLinkLabel }, txt.skipLinkLabel))),
+                navChildren && (React.createElement("a", { className: "Layout__header__navlink", href: "#pagenav", onClick: (e) => handleAnchorLinkClick(e, true), "aria-label": txt.skipLinkLabel }, txt.skipLinkLabel))),
             React.createElement("div", { className: "Layout__main", role: "main" }, mainChildren || children),
             navChildren && (React.createElement("div", { className: "Layout__nav", id: "pagenav", tabIndex: -1, role: "navigation" }, navChildren)),
             React.createElement("div", { className: "Layout__footer", role: "complementary" }, footerChildren))));

package/esm/utils/a11yHelpers.d.ts

@@ -1,2 +1,2 @@
-import { MouseEventHandler } from 'react';
-export declare const handleAnchorLinkClick: MouseEventHandler<HTMLAnchorElement>;
+import { MouseEvent as ReactMouseEvent } from 'react';
+export declare const handleAnchorLinkClick: (e: ReactMouseEvent<HTMLAnchorElement>, forwardToFirstFocusable?: boolean) => void;

package/esm/utils/a11yHelpers.js

@@ -1,11 +1,10 @@
 import { focusElement } from '@reykjavik/hanna-utils';
-export const handleAnchorLinkClick = (e) => {
+export const handleAnchorLinkClick = (e, forwardToFirstFocusable) => {
     e.preventDefault();
     const targetId = e.currentTarget.hash.slice(1);
     const targetElm = targetId && document.getElementById(targetId);
     if (!targetElm) {
         return;
     }
-    targetElm.tabIndex = -1;
-    focusElement(targetElm);
+    focusElement(targetElm, forwardToFirstFocusable);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.139",
+	"version": "0.10.140",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -18,7 +18,7 @@
 		"@hugsmidjan/qj": "^4.22.1",
 		"@hugsmidjan/react": "^0.4.32",
 		"@reykjavik/hanna-css": "^0.4.16",
-		"@reykjavik/hanna-utils": "^0.2.18",
+		"@reykjavik/hanna-utils": "^0.2.19",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^4.8.0",
 		"@types/react-transition-group": "^4.4.0",

package/utils/a11yHelpers.d.ts

@@ -1,2 +1,2 @@
-import { MouseEventHandler } from 'react';
-export declare const handleAnchorLinkClick: MouseEventHandler<HTMLAnchorElement>;
+import { MouseEvent as ReactMouseEvent } from 'react';
+export declare const handleAnchorLinkClick: (e: ReactMouseEvent<HTMLAnchorElement>, forwardToFirstFocusable?: boolean) => void;

package/utils/a11yHelpers.js

@@ -2,14 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleAnchorLinkClick = void 0;
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
-const handleAnchorLinkClick = (e) => {
+const handleAnchorLinkClick = (e, forwardToFirstFocusable) => {
     e.preventDefault();
     const targetId = e.currentTarget.hash.slice(1);
     const targetElm = targetId && document.getElementById(targetId);
     if (!targetElm) {
         return;
     }
-    targetElm.tabIndex = -1;
-    (0, hanna_utils_1.focusElement)(targetElm);
+    (0, hanna_utils_1.focusElement)(targetElm, forwardToFirstFocusable);
 };
 exports.handleAnchorLinkClick = handleAnchorLinkClick;