From 727bcd800e059c3cde656d97a7bc3fd73bf6233f Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 31 May 2026 17:10:09 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Enhance=20accessibili?=
 =?UTF-8?q?ty=20for=20PDF=20tools=20toggle=20groups?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added `role="group"` and `aria-label` to the custom toggle groups
in the PDF tools page (`app/pdf-tools/page.tsx`). Also added
`aria-pressed` states and `focus-visible` classes to all interactive
tool selector buttons to ensure proper screen reader and keyboard
navigation support. Logged this pattern to the palette journal.

Co-authored-by: SillyHippy <159052837+SillyHippy@users.noreply.github.com>
---
 .Jules/palette.md      |  4 ++++
 app/pdf-tools/page.tsx | 10 ++++++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index c84af0951..74de6707d 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -1,3 +1,7 @@
 ## 2026-05-11 - Added keyboard focus to file upload controls
 **Learning:** File upload drag-and-drop zones and file removal buttons generated by React components in this app lacked explicit keyboard focus indicators (focus-visible classes), creating a confusing experience for keyboard users trying to submit documents.
 **Action:** Always ensure that any interactive element, especially custom divs and dynamically generated utility buttons, have explicit focus-visible styles to ensure full keyboard navigation support.
+
+## 2026-05-31 - Accessible Custom Toggle Groups
+**Learning:** When using generic `<button>` elements to build custom toggle or radio groups (like the PDF Tools selector), users navigating with screen readers lack context about the group and selected state, and default styling often removes keyboard focus rings.
+**Action:** Always wrap custom button groups in a container with `role="group"` and an `aria-label`, explicitly add `aria-pressed={isActive}` to individual buttons to announce their state, and ensure `focus-visible` utility classes are added to retain keyboard accessibility.
diff --git a/app/pdf-tools/page.tsx b/app/pdf-tools/page.tsx
index 5dd080327..dbbf200c3 100644
--- a/app/pdf-tools/page.tsx
+++ b/app/pdf-tools/page.tsx
@@ -383,7 +383,7 @@ export default function PDFToolsPage() {
       {/* Quick-jump sticky nav */}
       <nav className="sticky top-0 z-40 bg-white border-b shadow-sm">
         <div className="max-w-6xl mx-auto px-4 py-3 overflow-x-auto">
-          <div className="flex gap-2 min-w-max">
+          <div className="flex gap-2 min-w-max" role="group" aria-label="PDF Tools Quick Navigation">
             {tools.map((tool) => {
               const colors = colorMap[tool.color];
               const Icon = tool.icon;
@@ -391,7 +391,8 @@ export default function PDFToolsPage() {
                 <button
                   key={tool.id}
                   onClick={() => handleSelectTool(tool.id)}
-                  className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium border transition-all ${activeTool === tool.id
+                  aria-pressed={activeTool === tool.id}
+                  className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium border transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 ${activeTool === tool.id
                     ? `${colors.bg} ${colors.border} ${colors.text}`
                     : "bg-gray-50 border-gray-200 text-gray-600 hover:bg-gray-100"
                     }`}
@@ -498,7 +499,7 @@ export default function PDFToolsPage() {
             </div>
           )}
 
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" role="group" aria-label="Select PDF Tool">
             {tools.map((tool) => {
               const colors = colorMap[tool.color];
               const Icon = tool.icon;
@@ -508,7 +509,8 @@ export default function PDFToolsPage() {
                 <button
                   key={tool.id}
                   onClick={() => handleSelectTool(tool.id)}
-                  className={`text-left rounded-xl border-2 p-6 transition-all ${isActive
+                  aria-pressed={isActive}
+                  className={`text-left rounded-xl border-2 p-6 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 ${isActive
                     ? `${colors.bg} ${colors.border} ring-2 ring-offset-2 ${colors.ring}`
                     : `bg-white border-gray-200 ${colors.hoverBg} hover:shadow-md`
                     }`}