Added focusing when choosing author letter

package.json

@@ -41,7 +41,7 @@
     "qs": "^6.12.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-focus-lock": "^2.11.3",
+    "react-focus-lock": "^2.12.0",
     "react-instantsearch": "^7.7.2",
     "react-instantsearch-nextjs": "^0.2.1",
     "react-slick": "^0.30.2",

src/components/elements/paged-list.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import {useLayoutEffect, useRef, HtmlHTMLAttributes, useEffect} from "react";
+import {useLayoutEffect, useRef, HtmlHTMLAttributes, useEffect, useId} from "react";
 import Button from "@components/elements/button";
 import {useAutoAnimate} from "@formkit/auto-animate/react";
 import {useBoolean, useCounter} from "usehooks-ts";
@@ -28,8 +28,8 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 }
 
 const PagedList = ({children, ulProps, liProps, itemsPerPage = 10, pageKey = "page", ...props}: Props) => {
+  const id = useId();
   const items = Array.isArray(children) ? children : [children]
-
   const router = useRouter();
   const searchParams = useSearchParams()
 
@@ -75,7 +75,7 @@ const PagedList = ({children, ulProps, liProps, itemsPerPage = 10, pageKey = "pa
       <ul {...ulProps} ref={animationParent}>
         {items.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage).map((item, i) =>
           <li
-            key={`pager--${i}`}
+            key={`pager-${id}-${i}`}
             ref={i === 0 ? focusItemRef : null}
             tabIndex={i === 0 && focusOnElement ? 0 : undefined}
             onBlur={disableFocusElement}

src/components/paragraphs/sup-pre-built/filtering-author-list.tsx

@@ -1,16 +1,20 @@
 "use client";
 
 import {twMerge} from "tailwind-merge";
-import {HTMLAttributes, JSX, useEffect, useMemo, useState} from "react";
+import {HTMLAttributes, JSX, useEffect, useLayoutEffect, useMemo, useRef, useState} from "react";
 import PagedList from "@components/elements/paged-list";
 import {useRouter, useSearchParams} from "next/navigation";
+import useFocusOnRender from "@lib/hooks/useFocusOnRender";
+import {useBoolean} from "usehooks-ts";
 
 type Props = HTMLAttributes<HTMLDivElement> & {
   authors: Map<string, JSX.Element[]>
 }
 const FilteringAuthorList = ({authors, ...props}: Props) => {
   const searchParams = useSearchParams();
   const router = useRouter();
+  const focusItemRef = useRef<HTMLDivElement>(null);
+  const {value: focusOnElement, setTrue: enableFocusElement, setFalse: disableFocusElement} = useBoolean(false)
   const [alphaChosen, setAlphaChosen] = useState<string>(searchParams.get("author") || "A")
 
   const displayedAuthors = useMemo(() => {
@@ -44,17 +48,29 @@ const FilteringAuthorList = ({authors, ...props}: Props) => {
     router.replace(`?${params.toString()}`, {scroll: false})
   }, [router, searchParams, alphaChosen]);
 
+  const setFocusOnItem = useFocusOnRender(focusItemRef, false);
+
+  useLayoutEffect(() => {
+    if (focusOnElement) setFocusOnItem()
+  }, [focusOnElement, setFocusOnItem]);
+
   return (
     <div {...props} className={twMerge("flex justify-between", props?.className)}>
       <div className="sr-only" aria-live="polite">Showing authors that start with {alphaChosen}</div>
       <a href="#author-filter" className="skiplink">Skip to filter</a>
 
       <PagedList itemsPerPage={50} ulProps={{className: "list-unstyled"}} pageKey={false} key={alphaChosen}>
-        {[...displayedAuthors.keys()].sort().map(authorName =>
-          <span key={authorName} className="flex flex-wrap gap-2">
+        {[...displayedAuthors.keys()].sort().map((authorName, i) =>
+          <div
+            key={authorName}
+            className="flex flex-wrap gap-2"
+            ref={i === 0 ? focusItemRef : null}
+            tabIndex={i === 0 && focusOnElement ? 0 : undefined}
+            onBlur={disableFocusElement}
+          >
             <span>{authorName}</span>
             {authors.get(authorName)}
-          </span>
+          </div>
         )}
       </PagedList>
       <nav id="author-filter" aria-label="Author name filtering">
@@ -63,7 +79,12 @@ const FilteringAuthorList = ({authors, ...props}: Props) => {
             <li key={choice}>
               <button
                 className="hocus:underline"
-                onClick={() => setAlphaChosen(choice)} aria-label={"Show authors that start with " + choice}
+                onClick={() => {
+                  setAlphaChosen(choice)
+                  enableFocusElement();
+                }}
+                aria-label={`Show authors that start with ${choice}`}
+                aria-current={alphaChosen === choice}
               >
                 {choice}
               </button>

src/components/paragraphs/sup-pre-built/pre-built-author-list.tsx

@@ -28,8 +28,7 @@ const PreBuiltAuthorList = async ({...props}: Props) => {
         const authorName = ([author.family, author.given + " " + author.middle].filter(a => !!a).join(", ") + ` [${author.credentials}]`).trim()
 
         const authorsBooks = authors.get(authorName) || [];
-        authors.set(authorName, [...authorsBooks,
-          <Link key={book.id} prefetch={false} href={book.path}>{book.title}</Link>]);
+        authors.set(authorName, [...authorsBooks, <Link key={book.id} prefetch={false} href={book.path}>{book.title}</Link>]);
       }
     })
   })

yarn.lock

@@ -8775,7 +8775,7 @@ __metadata:
     react: "npm:^18.2.0"
     react-docgen: "npm:^7.0.3"
     react-dom: "npm:^18.2.0"
-    react-focus-lock: "npm:^2.11.3"
+    react-focus-lock: "npm:^2.12.0"
     react-instantsearch: "npm:^7.7.2"
     react-instantsearch-nextjs: "npm:^0.2.1"
     react-slick: "npm:^0.30.2"
@@ -14835,9 +14835,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-focus-lock@npm:^2.11.3":
-  version: 2.11.3
-  resolution: "react-focus-lock@npm:2.11.3"
+"react-focus-lock@npm:^2.12.0":
+  version: 2.12.0
+  resolution: "react-focus-lock@npm:2.12.0"
   dependencies:
     "@babel/runtime": "npm:^7.0.0"
     focus-lock: "npm:^1.3.5"
@@ -14851,7 +14851,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/98502b84a90cf6a57bc30cdbc382e12bab4ed9d11a87926309b3cdb62fd245a90243d0f28baa82454938906a215bc8d80675657600d1dde385c7ae9c81a28f04
+  checksum: 10c0/5a8f109edfd90332df5f2d4644ee779a94c1d05c46a868c7684aa141d35624ff6b304ffb6b9adfd96da19e3c6b64346c3507c9c1bd67f771465958708ea40b52
   languageName: node
   linkType: hard