From 4dd662de10d4aec1fc1fefaccbfcdf64568d563e Mon Sep 17 00:00:00 2001
From: Ken Lui <116421546+kenlhlui@users.noreply.github.com>
Date: Tue, 13 Oct 2026 15:58:55 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20explain=20the=20Ctrl+K=20/=20=E2=8C=98K?=
 =?UTF-8?q?=20search=20shortcut=20hint=20(WCAG=203.3.2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The hint now reads "Press Ctrl+K to search" ("⌘K" on macOS) instead of
the bare key combo. It stays aria-hidden; aria-keyshortcuts on the input
conveys the shortcut to screen readers.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 _layouts/minimal_search.html | 2 +-
 assets/css/search.css        | 6 +++++-
 assets/js/search/controls.js | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/_layouts/minimal_search.html b/_layouts/minimal_search.html
index 2c4c2afd..a4b4bc71 100644
--- a/_layouts/minimal_search.html
+++ b/_layouts/minimal_search.html
@@ -51,7 +51,7 @@ <h1><a href="{{ '/' | relative_url }}"><span aria-hidden="true">📚 </span>Lear
                     <label for="searchInput" class="search-label">Search guides</label>
                     <div class="search-field">
                         <input type="search" id="searchInput" enterkeyhint="search" autocomplete="off" placeholder="Title, topic, tool, series…" aria-keyshortcuts="Control+K Meta+K">
-                        <span class="search-hint" aria-hidden="true">Ctrl+K</span>
+                        <span class="search-hint" aria-hidden="true">Press <kbd>Ctrl+K</kbd> to search</span>
                     </div>
                 </div>
                 <!-- Sits in the bar rather than floating over the results: the bar no
diff --git a/assets/css/search.css b/assets/css/search.css
index d1c4774b..8276c14a 100644
--- a/assets/css/search.css
+++ b/assets/css/search.css
@@ -321,7 +321,7 @@ header p.header-meta {
 .search-field input {
     width: 100%;
     padding: 15px 20px;
-    padding-right: 70px;
+    padding-right: 190px;
     border: 2px solid var(--uoft-blue);
     border-radius: 12px;
     font-size: 16px;
@@ -363,6 +363,10 @@ header p.header-meta {
     font-size: 12px;
     color: var(--uoft-blue);
     pointer-events: none;
+    white-space: nowrap;
+}
+
+.search-hint kbd {
     font-family: monospace;
     font-weight: 600;
 }
diff --git a/assets/js/search/controls.js b/assets/js/search/controls.js
index 97f3d785..855e527a 100644
--- a/assets/js/search/controls.js
+++ b/assets/js/search/controls.js
@@ -66,6 +66,6 @@ export function initControls(onFiltersChange) {
 
     // Update search hint text based on OS
     if (navigator.platform.toUpperCase().includes('MAC')) {
-        document.querySelector('.search-hint').textContent = '⌘K';
+        document.querySelector('.search-hint kbd').textContent = '⌘K';
     }
 }