Accessibility fixes

.cspell.json

@@ -948,6 +948,7 @@
     "ssal",
     "ssid",
     "staa",
+    "stackoverflow",
     "starttrip",
     "startuplistener",
     "stateonly",

layouts/_default/_markup/render-heading.html

@@ -1,9 +1,9 @@
 {{ if (eq .Level 3 ) }}
-<h3 class="h2 mt-5" id="{{ .Text | urlize }}">{{ .Text | safeHTML }}
-  <a class="header-link text-light text-decoration-none font-weight-normal" href="#{{ .Anchor | safeURL }}"></a>
+<h3 class="h2 mt-5" id="{{- .Text | urlize -}}">{{- .Text | safeHTML }}
+  <a class="header-link text-light text-decoration-none font-weight-normal" href="#{{ .Anchor | safeURL }}" aria-label="Link to this section: {{ .Text | safeHTML -}}"></a>
 </h3>
 {{ else }}
-<h2 class="h1 mt-5" id="{{ .Text | urlize }}">{{ .Text | safeHTML }}
-  <a class="header-link text-light text-decoration-none font-weight-normal" href="#{{ .Anchor | safeURL }}"></a>
+<h2 class="h1 mt-5" id="{{- .Text | urlize -}}">{{- .Text | safeHTML }}
+  <a class="header-link text-light text-decoration-none font-weight-normal" href="#{{ .Anchor | safeURL }}" aria-label="Link to this section: {{ .Text | safeHTML -}}"></a>
 </h2>
 {{- end -}}

layouts/_default/_markup/render-link.html

@@ -7,5 +7,5 @@
 {{- with $url.Fragment }}{{ $fragment = printf "#%s" . }}{{ end -}}
 {{- with .Page.GetPage $url.Path }}{{ $link = printf "%s%s" .RelPermalink $fragment }}{{ end }}{{ end -}}
 {{- end -}}
-<a href="{{ $link | safeURL }}" {{ with .Title}} title="{{ . }}" {{ end }}{{ if $isRemote }} target="_blank"
+<a href="{{ $link | safeURL }}" {{ with .Title}} title="{{ . }}" {{ end }}{{ if $isRemote }} target="_blank" rel="noopener"
   {{ end }}>{{- .Text | safeHTML -}}</a>

layouts/partials/blog-brief.html

@@ -1,7 +1,7 @@
 <div class="col my-3">
   <div class="card card-blog-brief h-100 text-center border">
     <div class="card-header top-rounded mb-0 py-2 border-0"
-      style="background-image: url();{{ if .Params.headerBGColor }}background-color:{{ .Params.headerBGColor }}{{- end -}}">
+      style="background-image: url();{{ if .Params.headerBGColor }}background-color: {{- .Params.headerBGColor -}}{{- end -}}">
       <div class="{{ if .Params.headerBGInvert }}bg-filter-invert{{- end -}}">
         <img src="{{- .Params.Image | relURL -}}" class="mx-auto text-center mt-4" alt="" width="52" height="52">
       </div>

layouts/partials/navbar.html

@@ -11,7 +11,7 @@
         {{ $currentPage := . }}
         {{ range .Site.Menus.main }}
         <li class="nav-item mx-0 mx-sm-1 mx-md-2">
-          <a class="nav-link {{if ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{ .URL }}">
+          <a class="nav-link {{if ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{- .URL -}}">
             {{- .Name -}}
           </a>
         </li>

layouts/partials/search.html

@@ -1,10 +1,10 @@
 <form class="form-group mt-3 ml-3 d-md-block" name="search">
-  <div class="input-with-icon-left">
+  <search class="input-with-icon-left" role="search">
     <input aria-label="Search" id="search-by" data-search-input="" autocorrect="off" spellcheck="false"
       autocapitalize="off" type="search" class="form-control search-desktop" name="query" placeholder="Search..."
       autocomplete="off" title="" required onkeypress="return event.keyCode!=13">
     <div class="input-icon">
       {{ partial "icons/modus-outline/search.svg" (dict "class" "text-dark opacity-75 mt-1" "width" "20" "height" "20") }}
     </div>
-  </div>
+  </search>
 </form>

layouts/partials/was-this-page-helpful.html

@@ -1,10 +1,10 @@
 <div class="d-none small p-2 feedback mt-2">
   <div class="mt-2 mb-1">Was this page helpful?</div>
-  <button class="btn btn-light btn-outline bg-white btn-feedback btn-feedback-helpful border rounded px-1 pt-0 mr-2"
+  <button type="button" class="btn btn-light btn-outline bg-white btn-feedback btn-feedback-helpful border rounded px-1 pt-0 mr-2"
     onClick="ga('send', 'event', 'page-feedback', 'click', 'Helpful');" aria-label="Helpful">
     {{- partial "icons/modus-outline/thumbs-up.svg" (dict "width" "22" "height" "22" "class" "mx-2 mx-auto text-primary") -}}
   </button>
-  <button class="btn btn-light btn-outline bg-white btn-feedback btn-feedback-not-helpful border rounded px-1 pt-0"
+  <button type="button" class="btn btn-light btn-outline bg-white btn-feedback btn-feedback-not-helpful border rounded px-1 pt-0"
     onClick="ga('send', 'event', 'page-feedback', 'click', 'Not Helpful');" aria-label="Not Helpful">
     {{- partial "icons/modus-outline/thumbs-down.svg" (dict "width" "22" "height" "22" "class" "mx-2 mx-auto text-primary") -}}
   </button>
@@ -15,6 +15,6 @@
 </div>
 
 <div class="small ml-2 d-none feedback-not-helpful">
-  <a href="https://github.com/trimble-oss/devguide/issues" target="_blank">Please provide feedback about how we can
-    improve the page</a>.
+  <a href="https://github.com/trimble-oss/devguide/issues" target="_blank" rel="noopener">
+    Please provide feedback about how we can improve the page</a>.
 </div>