From d9e04f8855231e9bd6bef762d9110e6e8b3e2524 Mon Sep 17 00:00:00 2001
From: Jorge Rivera <jorge.rivera@one.org>
Date: Sat, 24 Oct 2026 00:14:22 +0200
Subject: [PATCH 1/2] fix(tools): make each tools card a link to its docs page

Only the arrow button navigated, through router.push, while the card's
pointer cursor and whole-card hover made the rest look clickable. A
Link now fills each card, and the arrow is a second link to the same
page, kept out of the tab order and the accessibility tree.

Generated with Claude <noreply@anthropic.com>
---
 .../BuildTools/BuildTools.module.scss         | 20 ++++++++--
 .../organisms/BuildTools/BuildTools.tsx       | 38 +++++++++++--------
 2 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/src/components/organisms/BuildTools/BuildTools.module.scss b/src/components/organisms/BuildTools/BuildTools.module.scss
index b0e4cef..d978768 100644
--- a/src/components/organisms/BuildTools/BuildTools.module.scss
+++ b/src/components/organisms/BuildTools/BuildTools.module.scss
@@ -40,15 +40,26 @@
 .box {
     display: flex;
     flex-direction: column;
-    cursor: pointer;
+
+    // The button is positioned against the box.
+    position: relative;
     width: rem(308);
     height: rem(300);
-    padding: rem(20) rem(10) rem(10);
     color: var(--color-bg);
     background-color: var(--color-stone);
     border-radius: rem(4);
 }
 
+// Fills the box; the bottom padding keeps the text clear of the button.
+.boxLink {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    padding: rem(20) rem(10) rem(48);
+    color: inherit;
+    text-decoration: none;
+}
+
 .boxTitle {
     @include font-size(26px, 0.95);
 
@@ -67,8 +78,9 @@
 }
 
 .boxButton {
-    align-self: flex-end;
-    margin-top: auto;
+    position: absolute;
+    right: rem(10);
+    bottom: rem(10);
 }
 
 .headingBlock {
diff --git a/src/components/organisms/BuildTools/BuildTools.tsx b/src/components/organisms/BuildTools/BuildTools.tsx
index 2d3858c..ef6eef1 100644
--- a/src/components/organisms/BuildTools/BuildTools.tsx
+++ b/src/components/organisms/BuildTools/BuildTools.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 
 import styles from './BuildTools.module.scss';
 
@@ -35,24 +35,32 @@ const boxes = [
     },
 ];
 
-const renderBox = (index: number, go: (href: string) => void) => {
+const renderBox = (index: number) => {
     const { title, text, href } = boxes[index]!;
 
     return (
+        // The zone is the box: hovering anywhere on it flies the button's arrow
+        // (see the Button atom), and the link fills it.
         <article className={styles.box} data-reveal-group="soft" data-button-zone>
-            <h3 className={styles.boxTitle} data-reveal="text" style={revealIndex(0)}>
-                {title}
-            </h3>
-            <p className={styles.boxText} data-reveal="text" style={revealIndex(1)}>
-                {text}
-            </p>
+            <Link href={href} className={styles.boxLink}>
+                <h3 className={styles.boxTitle} data-reveal="text" style={revealIndex(0)}>
+                    {title}
+                </h3>
+                <p className={styles.boxText} data-reveal="text" style={revealIndex(1)}>
+                    {text}
+                </p>
+            </Link>
+            {/* Beside the link, since an anchor cannot hold another one. The box
+                is the link, so this copy stays out of the tab order and the
+                accessibility tree. */}
             <Button
+                href={href}
                 className={styles.boxButton}
                 icon="arrow"
-                aria-label={`Learn more about ${title}`}
+                tabIndex={-1}
+                aria-hidden
                 data-reveal
                 style={revealIndex(2)}
-                onClick={() => go(href)}
             />
         </article>
     );
@@ -60,8 +68,6 @@ const renderBox = (index: number, go: (href: string) => void) => {
 
 const BuildTools = () => {
     const sectionRef = useReveal<HTMLElement>();
-    const router = useRouter();
-    const go = (href: string) => router.push(href);
 
     return (
         <section
@@ -72,12 +78,12 @@ const BuildTools = () => {
         >
             <div className={styles.grid}>
                 <div className={styles.column}>
-                    {renderBox(0, go)}
-                    {renderBox(1, go)}
+                    {renderBox(0)}
+                    {renderBox(1)}
                 </div>
                 <div className={styles.column}>
-                    {renderBox(2, go)}
-                    {renderBox(3, go)}
+                    {renderBox(2)}
+                    {renderBox(3)}
                 </div>
             </div>
             <SectionHeading

From d3767152ed411eb415447cd658e258a7e293bb62 Mon Sep 17 00:00:00 2001
From: Jorge Rivera <jorge.rivera@one.org>
Date: Sat, 24 Oct 2026 11:47:16 +0200
Subject: [PATCH 2/2] fix(tools): show keyboard focus on the tools card links

Generated with Claude <noreply@anthropic.com>
---
 .../organisms/BuildTools/BuildTools.module.scss           | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/organisms/BuildTools/BuildTools.module.scss b/src/components/organisms/BuildTools/BuildTools.module.scss
index d978768..2c529ab 100644
--- a/src/components/organisms/BuildTools/BuildTools.module.scss
+++ b/src/components/organisms/BuildTools/BuildTools.module.scss
@@ -58,6 +58,14 @@
     padding: rem(20) rem(10) rem(48);
     color: inherit;
     text-decoration: none;
+    border-radius: inherit;
+
+    // The link is each box's only tab stop, and the global reset drops the
+    // focus outline.
+    &:focus-visible {
+        outline: 2px solid var(--color-step-text);
+        outline-offset: 2px;
+    }
 }
 
 .boxTitle {