fix: enhance accessibility for search and guide cards

_layouts/minimal_search.html

@@ -50,7 +50,7 @@ <h1><a href="{{ '/' | relative_url }}"><span aria-hidden="true">📚 </span>Lear
                 <div class="search-box" role="search" aria-label="Keyword search">
                     <label for="searchInput" class="search-label">Search guides</label>
                     <div class="search-field">
-                        <input type="text" id="searchInput" placeholder="Title, topic, tool, series…" aria-keyshortcuts="Control+K Meta+K">
+                        <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>
                     </div>
                 </div>
@@ -65,7 +65,7 @@ <h1><a href="{{ '/' | relative_url }}"><span aria-hidden="true">📚 </span>Lear
         <div class="main-content">
             <aside class="sidebar" id="sidebar" aria-labelledby="filtersHeading" tabindex="-1">
                 <h2 id="filtersHeading" class="section-heading">Filters</h2>
-                <button class="sidebar-close" id="sidebarClose" type="button">Close</button>
+                <button class="sidebar-close" id="sidebarClose" type="button">Close<span class="visually-hidden"> filters</span></button>
                 <button class="clear-filters" id="clearFilters">Clear All Filters</button><br><br>
                 <div class="facet-group">
                     <h3>Technique</h3>

assets/css/search.css

@@ -296,6 +296,9 @@ header p.header-meta {
     color: var(--text-body);
     transition: background-color 0.3s, border-color 0.3s;
     background: rgba(255, 255, 255, 0.95);
+    /* Safari otherwise draws its own search field and ignores the radius and padding */
+    -webkit-appearance: none;
+    appearance: none;
 }
 
 /* Opacity reset: Firefox dims placeholders by default, which would undo the

assets/js/search/render.js

@@ -34,9 +34,9 @@ function guideCard(guide, uniqueId) {
 
     return `
         <div class="guides-card">
-            <h3><a href="${escapeHTML(guide.url)}" target="_blank">${escapeHTML(guide.title)}</a></h3>
+            <h3><a href="${escapeHTML(guide.url)}" target="_blank" rel="noopener">${escapeHTML(guide.title)}</a></h3>
             <div class="guides-description" id="${uniqueId}">${description ? renderMarkdown(description) : ''}</div>
-            <button type="button" class="read-more-btn" id="btn-${uniqueId}" aria-expanded="false" aria-controls="${uniqueId}" hidden>Read more</button>
+            <button type="button" class="read-more-btn" id="btn-${uniqueId}" aria-expanded="false" aria-controls="${uniqueId}" hidden>Read more<span class="visually-hidden"> about ${escapeHTML(guide.title)}</span></button>
             <div class="guides-tags" role="group" aria-label="Filter by tag">
                 ${tagButtons('technique', getArrayValues(guide.technique))}
                 ${tagButtons('tool', getArrayValues(guide.tool))}
@@ -113,7 +113,8 @@ function updatePageInfo() {
 // Toggle description expand/collapse
 function toggleDescription(description, button) {
     const expanded = description.classList.toggle('expanded');
-    button.textContent = expanded ? 'Read less' : 'Read more';
+    // Swap only the visible text node so the hidden "about {title}" stays in the name
+    button.firstChild.nodeValue = expanded ? 'Read less' : 'Read more';
     button.setAttribute('aria-expanded', String(expanded));
 }