a11y: improve search box #821

layouts/partials/body.searchpage.html

@@ -5,6 +5,7 @@
             </header>
             <h1 id="{{ $title | plainify | anchorize }}">{{ $title }}</h1>
 
+            <search>
               <form action="javascript:triggerSearch()">
                 <div class="searchform">
                   <label class="a11y-only" for="R-search-by-detail">{{ T "Search" }}</label>
@@ -18,6 +19,7 @@
                   )}}
                 </div>
               </form>
+            </search>
             <div class="searchhint">
             </div>
             <hr>

layouts/partials/search.html

@@ -4,12 +4,14 @@
             {{- $link = partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}
           {{- end }}
         {{- end }}
-{{- $c:="" }}        {{ if $link }}<form action="{{ $link }}" method="get">{{ end }}<div class="searchbox default-animation">
+        <search>{{ if $link }}<form action="{{ $link }}" method="get">{{ end }}
+          <div class="searchbox default-animation">
             {{ if $link }}<button class="search-detail" type="submit" title="{{ T "Search" }} (CTRL+ALT+f)">{{ end }}<i class="fas fa-search"{{ if not $link }} title="{{ T "Search" }} (CTRL+ALT+f)"{{ end }}></i>{{ if $link }}</button>{{ end }}
             <label class="a11y-only" for="R-search-by">{{ T "Search" }}</label>
             <input data-search-input id="R-search-by" name="search-by" class="search-by" type="search" placeholder="{{ T "Search-placeholder" }}">
             <button class="search-clear" type="button" data-search-clear="" title="{{ T "Clear-search" }}"><i class="fas fa-times" title="{{ T "Clear-search" }}"></i></button>
-        </div>{{ if $link }}</form>{{ end }}
+          </div>
+        {{ if $link }}</form>{{ end }}</search>
         {{- $assetBusting := not .Site.Params.disableAssetsBusting }}
         {{- $pageBaseLang := replaceRE "([a-z]+).*" "${1}" .Page.Language.LanguageCode }}
         {{- $contentlangs := (union (slice | append (.Site.Params.additionalContentLanguage | default slice)) (slice $pageBaseLang)) }}

static/css/auto-complete.css

@@ -6,6 +6,7 @@
     border-top: 0;
     background: rgba( 255, 255, 255, 1 );
     box-shadow: -1px 1px 3px rgba( 0, 0, 0, .1 );
+    width: calc( 100% - 2rem );
 
     /* core styles should not be changed */
     position: absolute;

static/js/auto-complete.js

@@ -93,9 +93,10 @@ var autoComplete = (function(){
                     pageXOffset = window.pageXOffset || document.documentElement.scrollLeft;
                     pageYOffset = window.pageYOffset || document.documentElement.scrollTop;
                 }
-                that.sc.style.left = Math.round(rect.left + pageXOffset + o.offsetLeft - parentOffsetLeft) + 'px';
-                that.sc.style.top = Math.round(rect.bottom + pageYOffset + o.offsetTop - parentOffsetTop) + 'px';
-                that.sc.style.width = Math.round(rect.right - rect.left) + 'px'; // outerWidth
+                // Is this really the job of the tool or should it be defered to the user?
+                // that.sc.style.left = Math.round(rect.left + pageXOffset + o.offsetLeft - parentOffsetLeft) + 'px';
+                // that.sc.style.top = Math.round(rect.bottom + pageYOffset + o.offsetTop - parentOffsetTop) + 'px';
+                // that.sc.style.width = Math.round(rect.right - rect.left) + 'px'; // outerWidth
                 if (!resize) {
                     that.sc.style.display = 'block';
                     if (!that.sc.maxHeight) { that.sc.maxHeight = parseInt((window.getComputedStyle ? getComputedStyle(that.sc, null) : that.sc.currentStyle).maxHeight); }

static/js/search.js

@@ -271,7 +271,7 @@ function startSearch(){
 
     var searchList = new autoComplete({
         /* selector for the search box element */
-        selectorToInsert: '#R-header-wrapper',
+        selectorToInsert: 'search:has(.searchbox)',
         selector: '#R-search-by',
         /* source is the callback to perform the search */
         source: function(term, response) {