Jumbotron styling

springload · Oct 29, 2020 · 9685eef · ldanet · Nov 2, 2020 · holloway
1 parent d4e3b1d
commit 9685eef
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 22 deletions.
diff --git a/ietf/glossary/templates/glossary/glossary_page.html b/ietf/glossary/templates/glossary/glossary_page.html
@@ -18,10 +18,11 @@
                         <div class="row mb-4">
                             <div class="col-md-8 col-lg-6">
                                 <form class="input-group" action="{{ self.url }}" method="get" name="glossary-search">
-                                    <input id="glossary-search" aria-label="glossary-search" class="form-control" type="text"
+                                    <label for="glossary-search" class="sr-only">Glossary search</label>
+                                    <input id="glossary-search" class="form-control" type="text"
                                         placeholder="Enter your query here" name="query" {% if search_query %}
                                         value="{{ search_query }}" {% endif %} />
-                                    <button class="btn btn-primary" type="submit">Go</button>
+                                    <button class="btn btn-primary" type="submit" aria-label="Submit glossary search">Go</button>
                                 </form>
                             </div>
                         </div>

diff --git a/ietf/home/templates/home/home_page.html b/ietf/home/templates/home/home_page.html
@@ -89,15 +89,16 @@ <h2>Search the IETF email archive</h2>
                     method="GET"
                     target="_blank"
                 >
+                    <label for="search-email-box" class="sr-only">Search email archive</label>
                     <input
+                        id="search-email-box"
                         type="search"
                         class="form-control"
                         placeholder="Search the email archive"
-                        aria-label="Search the email archive"
                         name="q"
                         required
                     />
-                    <button type="submit" class="btn btn-primary">Go</button>
+                    <button type="submit" class="btn btn-primary" aria-label="Submit email archive search">Go</button>
                 </form>
             </div>
             <div class="col-lg-5">
@@ -112,15 +113,16 @@ <h2>Search IETF Datatracker</h2>
                     method="GET"
                     target="_blank"
                 >
+                    <label for="search-datatracker-box" class="sr-only">Search IETF Datatracker</label>
                     <input
+                        id="search-datatracker-box"
                         type="search"
                         class="form-control"
                         placeholder="Search datatracker"
-                        aria-label="Search datatracker"
                         name="name"
                         required
                     />
-                    <button type="submit" class="btn btn-primary">Go</button>
+                    <button type="submit" class="btn btn-primary" aria-label="Submit IETF datatracker search">Go</button>
                     <input type="hidden" name="rfcs" value="on" />
                     <input type="hidden" name="activedrafts" value="on" />
                     <input type="hidden" name="by" value="group" />

diff --git a/ietf/search/templates/search/search.html b/ietf/search/templates/search/search.html
@@ -25,9 +25,9 @@ <h1>Search results for www.ietf.org</h1>
       <div class="row mb-4">
         <div class="col-md-8 col-lg-6">
           <form class="input-group" action="{% url 'search' %}" method="get" name="site-search">
-            <input id="site-search" aria-label="site-search" class="form-control" type="text"
-              placeholder="Enter your query here" name="query" {% if search_query %} value="{{ search_query }}" {% endif %} />
-            <button class="btn btn-primary" type="submit">Go</button>
+            <label for="site-search" class="sr-only">Search site</label>
+            <input id="site-search" class="form-control" type="text" placeholder="Enter your query here" name="query" {% if search_query %} value="{{ search_query }}" {% endif %} />
+            <button class="btn btn-primary" type="submit" aria-label="Submit site search">Go</button>
           </form>
         </div>
       </div>
@@ -101,18 +101,18 @@ <h2 class="h4">Search IETF Email Archives</h2>
         <p>Publicly-available messages from the IETF mailing list archives.</p>
 
         <form class="input-group" action="https://mailarchive.ietf.org/arch/search/" method="GET" target="_blank">
-          <input id="side-nav-search" aria-label="Search IETF Email Archives" class="form-control" type="text" placeholder="Search the email archive"
-            name="q" />
-          <button class="btn btn-primary" type="submit">Go</button>
+          <label for="side-nav-search" class="sr-only">Search IETF Email Archives</label>
+          <input id="side-nav-search" class="form-control" type="text" placeholder="Search the email archive" name="q" />
+          <button class="btn btn-primary" type="submit" aria-label="Submit mailing list search">Go</button>
         </form>
 
         <h2 class="h4 mt-4">Search IETF Datatracker</h2>
         <p>IETF documents, working groups, and meetings.</p>
 
         <form class="input-group" action="https://datatracker.ietf.org/doc/search/" method="GET" target="_blank">
-          <input id="search-datatracker" aria-label="Search Datatracker" class="form-control" type="text"
-            placeholder="Search Datatracker" name="name" />
-          <button class="btn btn-primary" type="submit">Go</button>
+          <label for="search-datatracker" class="sr-only">Search Datatracker</label>
+          <input id="search-datatracker" class="form-control" type="text" placeholder="Search Datatracker" name="name" />
+          <button class="btn btn-primary" type="submit" aria-label="Submit Datatracker search">Go</button>
           <input type="hidden" name="rfcs" value="on">
           <input type="hidden" name="activedrafts" value="on">
           <input type="hidden" name="by" value="group">

diff --git a/ietf/templates/404.html b/ietf/templates/404.html
@@ -30,8 +30,9 @@ <h1>HTTP Status Code:<br />
                 <div class="row mb-4 mt-4">
                     <div class="col-md-8 col-lg-6">
                         <form class="input-group" action="{% url 'search' %}" method="GET" name="search">
-                            <input aria-label="Search" class="form-control" type="text" placeholder="Search" name="query" />
-                            <button class="btn btn-primary" type="submit">Go</button>
+                            <label for="search-box2" class="sr-only">Search website</label>
+                            <input id="search-box2" class="form-control" type="text" placeholder="Search" name="query" />
+                            <button class="btn btn-primary" type="submit" aria-label="Submit website search">Go</button>
                         </form>
                     </div>
                 </div>

diff --git a/ietf/templates/includes/header.html b/ietf/templates/includes/header.html
@@ -13,15 +13,14 @@
                 >
                     <label for="search" class="sr-only">Search</label>
                     <input
+                        id="search"
                         type="search"
                         class="form-control"
-                        placeholder="Search"
-                        aria-label="Search"
-                        id="search"
+                        placeholder="Search"                        
                         name="query"
                         required
                     />
-                    <button type="submit" class="btn btn-primary">Go</button>
+                    <button type="submit" class="btn btn-primary" aria-label="Submit website search">Go</button>
                 </form>
             </div>
         </div>
@@ -41,6 +40,7 @@
                 aria-label="Toggle navigation"
             >
                 <span class="navbar-toggler-icon text-light"></span>
+                <span class="sr-only">Supported content</span>
             </button>
             <!-- Mobile search -->
             <button
@@ -116,7 +116,7 @@
                     </li>
                     <li class="nav-item d-none d-lg-inline-block">
                         <a
-                            href="#search"
+                            href="/search"
                             class="btn btn-dark text-white nav-link"
                             role="button"
                             data-toggle="collapse"