From b60446a72d8f1c946bcfc1da234754d4e70cc3f8 Mon Sep 17 00:00:00 2001
From: Ken Lui <116421546+kenlhlui@users.noreply.github.com>
Date: Tue, 13 Oct 2026 15:18:11 -0400
Subject: [PATCH] fix: meet minimum hit area for Read more, chips and filter
 rows (WCAG 2.5.8)

- Read more: 4px block padding and 24px min-height
- Chips: padding 6px 10px (radius adjusted to stay a pill)
- Filter rows: checkbox moved inside the label, which now carries the
  padding, so the whole highlighted row is clickable

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 assets/css/search.css      | 26 +++++++++++++++++---------
 assets/js/search/facets.js | 10 +++++-----
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/assets/css/search.css b/assets/css/search.css
index 54f81ed0..4a66491c 100644
--- a/assets/css/search.css
+++ b/assets/css/search.css
@@ -364,8 +364,6 @@ header p.header-meta {
     display: flex;
     align-items: center;
     margin-bottom: 8px;
-    cursor: pointer;
-    padding: 5px;
     border-radius: 4px;
     transition: background-color 0.2s;
 }
@@ -381,13 +379,20 @@ header p.header-meta {
     height: 16px;
 }
 
+/* The label wraps the checkbox and carries the padding, so the whole row that
+   shows the hover fill is clickable (2.5.8) */
 .facet-option label {
-    padding-left: 8px;
+    padding: 5px;
     cursor: pointer;
     font-size: 14px;
     flex: 1;
     display: flex;
-    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+}
+
+.facet-name {
+    flex: 1;
 }
 
 .facet-count {
@@ -592,8 +597,11 @@ header p.header-meta {
     color: var(--uoft-blue);
     font-size: 13px;
     cursor: pointer;
-    padding: 0;
-    margin-bottom: 15px;
+    /* Brings the hit area up to 24px (2.5.8) */
+    padding-block: 4px;
+    padding-inline: 0;
+    min-height: 24px;
+    margin-bottom: 11px;
     font-weight: 600;
     text-decoration: underline;
     transition: color 0.2s;
@@ -621,9 +629,9 @@ header p.header-meta {
     display: inline-block;
     border: 1px solid var(--tag-neutral-edge);
     font-family: inherit;
-    padding: 4px 10px;
+    padding: 6px 10px;
     background-color: var(--tag-neutral-bg);
-    border-radius: 12px;
+    border-radius: 14px;
     font-size: 12px;
     color: var(--tag-neutral-text);
     cursor: pointer;
@@ -974,10 +982,10 @@ header p.header-meta {
 
     .facet-option {
         margin-bottom: 6px;
-        padding: 3px;
     }
 
     .facet-option label {
+        padding: 3px;
         font-size: 13px;
     }
 
diff --git a/assets/js/search/facets.js b/assets/js/search/facets.js
index d1a789a4..27df3861 100644
--- a/assets/js/search/facets.js
+++ b/assets/js/search/facets.js
@@ -45,12 +45,12 @@ function createFacets(facetKey, containerId) {
         const id = escapeHTML(`${facetKey}-${value}`);
         return `
             <div class="facet-option ${isHidden}" data-facet-item="${facetKey}">
-                <input type="checkbox" id="${id}"
-                       data-facet="${facetKey}"
-                       data-value="${escapeHTML(value)}"
-                       ${isChecked ? 'checked' : ''}>
                 <label for="${id}">
-                    <span>${escapeHTML(value)}</span>
+                    <input type="checkbox" id="${id}"
+                           data-facet="${facetKey}"
+                           data-value="${escapeHTML(value)}"
+                           ${isChecked ? 'checked' : ''}>
+                    <span class="facet-name">${escapeHTML(value)}</span>
                     <span class="facet-count">(${count})</span>
                 </label>
             </div>