docs: further accessibility improvements

Author: 2LoS

docs/modules/ROOT/pages/index.adoc

@@ -6,13 +6,12 @@ Alan Freitas <[email protected]>
 :page-tags: mrdocs
 :navtitle: Home
 
-image::MrDocsBanner.png[link=https://www.mrdocs.com]
+image::MrDocsBanner.png[]
 
 - Automating {cpp} reference documentation significantly enhances usability by providing a navigable API and ensuring a single, up-to-date source of truth with minimal effort.
 - However, documenting {cpp} poses significant challenges due to discrepancies between the codebase and the public API. Doxygen remains a popular tool, yet it is suboptimal for {cpp} as it fails to fully comprehend {cpp} constructs and requires many transformation steps, including the incorporation of many macros within the {cpp} code. These macros maintain well-formed and ill-formed versions of the code, undermining the goal of unifying the source of truth.
 - Existing solutions frequently need better maintenance or usability issues, prompting users to revert to Doxygen.
 - An ideal solution would inherently understand {cpp} constructs, be actively maintained, and offer diverse options for customizing the output format.
 - Mr.Docs embodies these qualities. Supported by full-time developers from the {cpp} Alliance, Mr.Docs inherently comprehends {cpp} constructs without the need for macros and provides various output formats, customizable templates, and plugin support, ensuring it meets the demands of comprehensive and efficient documentation.
 
-image::https://github.com/cppalliance/mrdocs/actions/workflows/ci.yml/badge.svg[]
-
+image::https://github.com/cppalliance/mrdocs/actions/workflows/ci.yml/badge.svg[Continuous Integration: Passing]

docs/ui/src/partials/header-content.hbs

@@ -1,16 +1,16 @@
 <header class="header">
   <nav class="nav navbar">
     <div class="navbar-brand">
-      <a class="navbar-item" href="{{{or site.url siteRootPath}}}">
+      <a class="navbar-item" href="{{{or site.url siteRootPath}}}" aria-label="{{ site.title }} Home">
         {{> logo }}
         <span class="logo-text">{{site.title}}</span>
       </a>
       {{#if env.SITE_SEARCH_PROVIDER}}
-      <div class="navbar-item search hide-for-print">
+      <search class="navbar-item search hide-for-print">
         <div id="search-field" class="field">
           <input id="search-input" type="text" placeholder="Search the docs"{{#if page.home}} autofocus{{/if}}>
         </div>
-      </div>
+      </search>
       {{/if}}
       <button class="navbar-burger" aria-controls="topbar-nav" aria-expanded="false" aria-label="Toggle main menu">
         <span></span>

docs/ui/src/partials/nav-explore.hbs

@@ -15,7 +15,9 @@
         <li class="version
           {{~#if (and (eq .. @root.page.component) (eq this @root.page.componentVersion))}} is-current{{/if~}}
           {{~#if (eq this ../latest)}} is-latest{{/if}}">
-          <a href="{{{relativize ./url}}}">{{./displayVersion}}</a>
+          <a href="{{{relativize ./url}}}"
+            {{~#if (and (eq .. @root.page.component) (eq this @root.page.componentVersion))}} aria-current="page"{{/if~}}
+          >{{./displayVersion}}</a>
         </li>
         {{/each}}
       </ul>

docs/ui/src/partials/nav-menu.hbs

@@ -1,7 +1,7 @@
 {{#with page.navigation}}
 <div class="nav-panel-menu is-active" data-panel="menu">
   <nav class="nav-menu">
-    <button class="nav-menu-toggle" aria-label="Toggle expand/collapse all" style="display: none"></button>
+    <button class="nav-menu-toggle" aria-expanded="false" style="display: none"></button>
     {{#with @root.page.componentVersion}}
     <h3 class="title"><a href="{{{relativize ./url}}}">{{./title}}</a></h3>
     {{/with}}

docs/ui/src/partials/toolbar.hbs

@@ -1,9 +1,6 @@
-<div class="toolbar" role="navigation">
+<nav class="toolbar">
 {{> nav-toggle}}
-  {{#with site.homeUrl}}
-  <a href="{{{relativize this}}}" class="home-link{{#if @root.page.home}} is-current{{/if}}"></a>
-  {{/with}}
 {{> breadcrumbs}}
 {{> page-versions}}
 {{> edit-this-page}}
-</div>
+</nav>

docs/website/index.html.hbs

@@ -38,7 +38,7 @@
 <body>
     <nav class="nav container-fluid" aria-label="Main navigation">
         <div class="nav-section">
-            <a href="/" class="logo-link" aria-label="MrDocs Home">
+            <a href="/" class="logo-link" aria-label="{{ site.title }} Home">
                 {{> logo }}
                 <span class="logo-text">{{ page.title }}</span>
             </a>
@@ -49,7 +49,7 @@
             <li><a href="{{ href }}" class="secondary">{{ title }}</a></li>
             {{/each}}
             <li>
-                <a href="{{ site.github.url }}" class="contrast" aria-label="{{ site.title}} GitHub repository">
+                <a href="{{ site.github.url }}" class="contrast" aria-label="{{ site.title }} GitHub repository">
                         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                             viewBox="0 0 496 512" height="16px">
                             <path fill="currentColor"
@@ -66,8 +66,8 @@
                 <h1>{{ title }}</h1>
                 <p>{{ description }}</p>
                 <div class="header-cta">
-                    <a href="docs/" class="secondary" role="button">Get started</a>
-                    <a href="docs/mrdocs/install.html" class="contrast outline" role="button">Download</a>
+                    <a href="docs/" class="secondary">Get started</a>
+                    <a href="docs/mrdocs/install.html" class="contrast outline">Download</a>
                 </div>
                 <div class="banner-snippet">
                     <small><code>{{ banner.description }}</code></small>
@@ -188,7 +188,7 @@
     </footer>
     <script>
         // Initialize positions to match CSS exactly
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', () => {
             const root = document.documentElement;
             
             // Set initial positions to exactly match CSS defaults