static/frontend: add search aria-describedby

Currently the search input aria-label is static and when
focused on by a screen reader, the screen reader does
not read the search tip found below the input. This
change checks the .TipIndex value and if it
matches adds the id=SearchTipContent which the input's
aria-describedby is attached to, thus allowing the visible
tip/description to be read as supplemental info after the
input's existing aria-label.

Before screenshot:
https://screenshot.googleplex.com/AkAmQ69s4R3NsZS

After screenshot:
https://screenshot.googleplex.com/94MwK6bXpSBE6Gr

Fixes b/283297190

Change-Id: I4363f226673c9da1abcfced38088398a5f7a5b2e
GitHub-Last-Rev: 2ebbcc3
GitHub-Pull-Request: #102
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/625235
kokoro-CI: kokoro <[email protected]>
Reviewed-by: Denis Bowen (xWF) <[email protected]>
Reviewed-by: Jonathan Amsterdam <[email protected]>
LUCI-TryBot-Result: Go LUCI <[email protected]>

static/frontend/homepage/homepage.tmpl

@@ -21,6 +21,7 @@
           id="AutoComplete"
           role="textbox"
           aria-label="{{.SearchPrompt}}"
+          aria-describedby="SearchTipContent"
           type="search"
           name="q"
           placeholder="{{.SearchPrompt}}"
@@ -35,7 +36,7 @@
       <section class="go-Carousel Homepage-tips js-carousel" aria-label="Search Tips Carousel" data-slide-index="{{.TipIndex}}">
         <ul>
           {{range $i, $v := .SearchTips}}
-            <li class="go-Carousel-slide" {{if not (eq $.TipIndex $i)}}aria-hidden{{end}}>
+            <li class="go-Carousel-slide" {{if not (eq $.TipIndex $i)}}aria-hidden{{end}} {{if (eq $.TipIndex $i)}}id="SearchTipContent"{{end}}>
               <p>
                 <strong>Tip:</strong> {{.Text}}
                 <a href="/search?q={{$v.Example1}}">“{{$v.Example1}}”</a> or