From a0eae5108e80894ba4d020336a2a58558692e8ee Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Wed, 25 Jan 2023 19:53:47 -0800
Subject: [PATCH] Improve search input accessibility

Add visually hidden label instead of implying from icon
---
 index.html |  5 +++--
 style.css  | 11 +++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index bb8ab5b..319b6a4 100644
--- a/index.html
+++ b/index.html
@@ -42,10 +42,11 @@
     </a>
 
     <form role="search">
-      <input type="search" name="query">
+      <label for="query" class="visually-hidden">Search this site</label>
+      <input type="search" name="query" id="query">
       <button>
         <svg role="img" aria-labelledby="search-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
-          <title id="search-icon">Search this site</title>
+          <title id="search-icon">Search</title>
           <circle cx="9" cy="9" r="7" stroke="#000" />
           <line x1="14" y1="14" x2="22" y2="22" stroke="#000" stroke-linecap="round" />
         </svg>
diff --git a/style.css b/style.css
index 59d7417..216dba0 100644
--- a/style.css
+++ b/style.css
@@ -62,6 +62,17 @@ header * {
   gap: 4px;
 }
 
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}
+
 input {
   min-block-size: 20px;
   font-size: 16px;
-- 
2.47.3