From 8cb15d502f1dcdfc3c847d27dc4f259227518b4a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 7 Feb 2026 11:32:37 +0000
Subject: [PATCH] Fix search form accessibility, design tokens, and AntD
 consistency

- Replace hardcoded box-shadow rgba values with AntD CSS custom property
  tokens (--ant-box-shadow, --ant-box-shadow-secondary, --ant-box-shadow-tertiary)
- Add keyboard accessibility (role, tabIndex, onKeyDown) to collapsed
  section cards so keyboard users can expand them with Enter/Space
- Replace native <button> with AntD <Button type="link"> for the clear
  all button to align with codebase component conventions

https://claude.ai/code/session_01GKFZkWeR3LcvHfpkHnVhF2
---
 .../accordion-search-form.module.css            |  6 +++---
 .../search-drawer/accordion-search-form.tsx     | 12 +++++++++++-
 .../search-drawer/search-dropdown.module.css    | 17 +++++++----------
 .../search-drawer/search-dropdown.tsx           |  6 +++---
 4 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/packages/web/app/components/search-drawer/accordion-search-form.module.css b/packages/web/app/components/search-drawer/accordion-search-form.module.css
index 7f539364..a6555e5c 100644
--- a/packages/web/app/components/search-drawer/accordion-search-form.module.css
+++ b/packages/web/app/components/search-drawer/accordion-search-form.module.css
@@ -10,7 +10,7 @@
 .sectionCard {
   background: var(--ant-color-bg-container, #FFFFFF);
   border-radius: 16px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--ant-box-shadow-tertiary, 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02));
   overflow: hidden;
   transition: box-shadow 200ms ease;
 }
@@ -20,11 +20,11 @@
 }
 
 .sectionCard:not(.sectionCardActive):hover {
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: var(--ant-box-shadow-secondary, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05));
 }
 
 .sectionCardActive {
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--ant-box-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05));
 }
 
 /* Collapsed row */
diff --git a/packages/web/app/components/search-drawer/accordion-search-form.tsx b/packages/web/app/components/search-drawer/accordion-search-form.tsx
index 60adcaea..470a6856 100644
--- a/packages/web/app/components/search-drawer/accordion-search-form.tsx
+++ b/packages/web/app/components/search-drawer/accordion-search-form.tsx
@@ -342,7 +342,17 @@ const AccordionSearchForm: React.FC<AccordionSearchFormProps> = ({
             <div
               key={section.key}
               className={`${styles.sectionCard} ${isActive ? styles.sectionCardActive : ''}`}
-              {...(!isActive ? { onClick: () => setActiveKey(section.key) } : {})}
+              {...(!isActive ? {
+                onClick: () => setActiveKey(section.key),
+                onKeyDown: (e: React.KeyboardEvent) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    setActiveKey(section.key);
+                  }
+                },
+                role: 'button',
+                tabIndex: 0,
+              } : {})}
             >
               {isActive ? (
                 <div className={styles.expandedContent}>
diff --git a/packages/web/app/components/search-drawer/search-dropdown.module.css b/packages/web/app/components/search-drawer/search-dropdown.module.css
index 3dc30b00..87521aba 100644
--- a/packages/web/app/components/search-drawer/search-dropdown.module.css
+++ b/packages/web/app/components/search-drawer/search-dropdown.module.css
@@ -15,19 +15,16 @@
 
 /* Clear all - underlined text link */
 .clearAllButton {
-  background: none;
-  border: none;
-  padding: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--ant-color-text, #111827);
-  text-decoration: underline;
-  cursor: pointer;
-  line-height: 1.5;
+  padding: 0 !important;
+  font-size: 16px !important;
+  font-weight: 600 !important;
+  color: var(--ant-color-text, #111827) !important;
+  text-decoration: underline !important;
+  height: auto !important;
 }
 
 .clearAllButton:hover {
-  color: var(--ant-color-text-secondary, #6B7280);
+  color: var(--ant-color-text-secondary, #6B7280) !important;
 }
 
 .clearAllButton:active {
diff --git a/packages/web/app/components/search-drawer/search-dropdown.tsx b/packages/web/app/components/search-drawer/search-dropdown.tsx
index a6e4ab8c..49a839e6 100644
--- a/packages/web/app/components/search-drawer/search-dropdown.tsx
+++ b/packages/web/app/components/search-drawer/search-dropdown.tsx
@@ -36,13 +36,13 @@ const SearchDropdown: React.FC<SearchDropdownProps> = ({ boardDetails, open, onC
 
   const drawerFooter = (
     <div className={styles.footer}>
-      <button
-        type="button"
+      <Button
+        type="link"
         className={styles.clearAllButton}
         onClick={clearClimbSearchParams}
       >
         Clear all
-      </button>
+      </Button>
       <Button
         type="primary"
         icon={isFetchingClimbs ? <Spin size="small" /> : <SearchOutlined />}