Merge branch 'fix/small-a11y-polish'

website/static/main.js

@@ -12,6 +12,10 @@ const defaultSort =
     : { col: "downloads", order: "desc" };
 let activeSort = defaultSort;
 const searchInput = document.querySelector(".search");
+// The full placeholder is cut off on phones
+if (searchInput && window.matchMedia("(max-width: 680px)").matches) {
+  searchInput.placeholder = searchInput.dataset.shortPlaceholder;
+}
 const noResults = document.querySelector(".no-results");
 const rows = document.querySelectorAll(".table tbody tr.row");
 const tbody = document.querySelector(".table tbody");

website/static/style.css

@@ -467,7 +467,18 @@ kbd {
 .no-results-clear:focus-visible,
 .table a:focus-visible,
 .footer a:focus-visible,
-.sort-btn:focus-visible {
+.sort-btn:focus-visible,
+.hero-sub a:focus-visible,
+.hero-proof a:focus-visible,
+.category-breadcrumb a:focus-visible,
+.category-subtitle a:focus-visible,
+.category-intro a:focus-visible,
+.guide-body a:focus-visible,
+.group-lead a:focus-visible,
+.sponsor-become:focus-visible,
+.sponsor-link:focus-visible,
+.sponsor-desc a:focus-visible,
+.sponsorship-body a:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 3px;
 }

website/templates/category.html

@@ -250,6 +250,7 @@
         type="search"
         class="search"
         placeholder="Search {{ entries | length }} projects in {{ category.name }}..."
+        data-short-placeholder="Search {{ entries | length }} projects..."
         aria-label="Search projects"
       />
     </div>

website/templates/index.html

@@ -112,6 +112,7 @@
         type="search"
         class="search"
         placeholder="Search {{ entries | length }} projects across {{ total_categories }} categories..."
+        data-short-placeholder="Search {{ entries | length }} projects..."
         aria-label="Search projects"
       />
     </div>

website/templates/sponsorship.html

@@ -270,7 +270,7 @@
       </dl>
       <p>
         Sponsor links carry UTM tags, so clicks show up in your own analytics as
-        <code>awesome-python / sponsorship</code>.
+        <code>awesome-python&nbsp;/&nbsp;sponsorship</code>.
       </p>
       <div class="sponsorship-cta-row">
         <a