From d2b9b236c45a1fb948e14105f4f95954a9f1d57c Mon Sep 17 00:00:00 2001
From: Robert Sese <robert.sese@gmail.com>
Date: Thu, 6 Jan 2022 16:35:56 -0600
Subject: [PATCH] Add label for search input (#24130)

---
 components/Search.tsx      | 61 ++++++++++++++++++++------------------
 stylesheets/utilities.scss | 11 +++++++
 2 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/components/Search.tsx b/components/Search.tsx
index 5bffca38715f..d99a60e4fe38 100644
--- a/components/Search.tsx
+++ b/components/Search.tsx
@@ -209,35 +209,38 @@ export function Search({
     <div data-testid="search" aria-hidden="true">
       <div className="position-relative z-2">
         <form role="search" className="width-full d-flex" noValidate onSubmit={onFormSubmit}>
-          <input
-            data-testid="site-search-input"
-            ref={inputRef}
-            className={cx(
-              styles.searchInput,
-              iconSize === 24 && 'form-control px-6 f4',
-              iconSize === 16 && 'form-control px-5 f4',
-              variant === 'compact' && 'py-2',
-              variant === 'expanded' && 'py-3',
-              isHeaderSearch && styles.searchInputHeader,
-              !isHeaderSearch && 'width-full',
-              isHeaderSearch && query && styles.searchInputExpanded,
-              isHeaderSearch && query && 'position-absolute top-0 right-0'
-            )}
-            style={{
-              background: `var(--color-canvas-default) url("/assets/images/octicons/search-${iconSize}.svg") no-repeat ${
-                iconSize === 24 ? '12px' : '6px'
-              }`,
-            }}
-            type="search"
-            placeholder={t`placeholder`}
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck="false"
-            maxLength={512}
-            onChange={onSearch}
-            value={localQuery}
-          />
+          <label className="text-normal width-full">
+            <span className="visually-hidden">{t`placeholder`}</span>
+            <input
+              data-testid="site-search-input"
+              ref={inputRef}
+              className={cx(
+                styles.searchInput,
+                iconSize === 24 && 'form-control px-6 f4',
+                iconSize === 16 && 'form-control px-5 f4',
+                variant === 'compact' && 'py-2',
+                variant === 'expanded' && 'py-3',
+                isHeaderSearch && styles.searchInputHeader,
+                !isHeaderSearch && 'width-full',
+                isHeaderSearch && query && styles.searchInputExpanded,
+                isHeaderSearch && query && 'position-absolute top-0 right-0'
+              )}
+              style={{
+                background: `var(--color-canvas-default) url("/assets/images/octicons/search-${iconSize}.svg") no-repeat ${
+                  iconSize === 24 ? '12px' : '6px'
+                }`,
+              }}
+              type="search"
+              placeholder={t`placeholder`}
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck="false"
+              maxLength={512}
+              onChange={onSearch}
+              value={localQuery}
+            />
+          </label>
           <button className="d-none" type="submit" title="Submit the search query." hidden />
         </form>
       </div>
diff --git a/stylesheets/utilities.scss b/stylesheets/utilities.scss
index cef0e6c9f70e..a949a2fec487 100644
--- a/stylesheets/utilities.scss
+++ b/stylesheets/utilities.scss
@@ -83,3 +83,14 @@
 .min-h-screen {
   min-height: 100vh;
 }
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute !important;
+  width: 1px;
+}