Fix invalid HTML5 (#894)

Author: haampie

src/furo/navigation.py

@@ -6,7 +6,7 @@
 
 
 def _get_navigation_expand_image(soup: BeautifulSoup) -> Tag:
-    retval = soup.new_tag("i", attrs={"class": "icon"})
+    retval = soup.new_tag("span", attrs={"class": "icon"})
 
     svg_element = soup.new_tag("svg")
     svg_use_element = soup.new_tag("use", href="#svg-arrow-right")
@@ -46,6 +46,7 @@ def get_navigation_tree(toctree_html: str) -> str:
         # We're gonna add a checkbox.
         toctree_checkbox_count += 1
         checkbox_name = f"toctree-checkbox-{toctree_checkbox_count}"
+        accessible_name = f"Toggle navigation of {element.find('a').text}"
 
         # Add the "label" for the checkbox which will get filled.
         label = soup.new_tag(
@@ -54,12 +55,6 @@ def get_navigation_tree(toctree_html: str) -> str:
                 "for": checkbox_name,
             },
         )
-        screen_reader_label = soup.new_tag(
-            "div",
-            attrs={"class": "visually-hidden"},
-        )
-        screen_reader_label.string = f"Toggle navigation of {element.find('a').text}"
-        label.append(screen_reader_label)
         label.append(_get_navigation_expand_image(soup))
 
         element.insert(1, label)
@@ -73,6 +68,7 @@ def get_navigation_tree(toctree_html: str) -> str:
                 "id": checkbox_name,
                 "name": checkbox_name,
                 "role": "switch",
+                "aria-label": accessible_name,
             },
         )
         # if this has a "current" class, be expanded by default (by checking the checkbox)

src/furo/theme/furo/page.html

@@ -4,14 +4,10 @@
 {{ super() }}
 {% include "partials/icons.html" %}
 
-<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation">
-<input type="checkbox" class="sidebar-toggle" name="__toc" id="__toc">
-<label class="overlay sidebar-overlay" for="__navigation">
-  <div class="visually-hidden">Hide navigation sidebar</div>
-</label>
-<label class="overlay toc-overlay" for="__toc">
-  <div class="visually-hidden">Hide table of contents sidebar</div>
-</label>
+<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation" aria-label="Toggle site navigation sidebar">
+<input type="checkbox" class="sidebar-toggle" name="__toc" id="__toc" aria-label="Toggle table of contents sidebar">
+<label class="overlay sidebar-overlay" for="__navigation"></label>
+<label class="overlay toc-overlay" for="__toc"></label>
 
 <a class="skip-to-content muted-link" href="#furo-main-content">
   {%- trans -%}
@@ -31,26 +27,23 @@
   <header class="mobile-header">
     <div class="header-left">
       <label class="nav-overlay-icon" for="__navigation">
-        <div class="visually-hidden">Toggle site navigation sidebar</div>
-        <i class="icon"><svg><use href="#svg-menu"></use></svg></i>
+        <span class="icon"><svg><use href="#svg-menu"></use></svg></span>
       </label>
     </div>
     <div class="header-center">
       <a href="{{ pathto(master_doc) }}"><div class="brand">{{ docstitle if docstitle else project }}</div></a>
     </div>
     <div class="header-right">
       <div class="theme-toggle-container theme-toggle-header">
-        <button class="theme-toggle">
-          <div class="visually-hidden">Toggle Light / Dark / Auto color theme</div>
+        <button class="theme-toggle" aria-label="Toggle Light / Dark / Auto color theme">
           <svg class="theme-icon-when-auto-light"><use href="#svg-sun-with-moon"></use></svg>
           <svg class="theme-icon-when-auto-dark"><use href="#svg-moon-with-sun"></use></svg>
           <svg class="theme-icon-when-dark"><use href="#svg-moon"></use></svg>
           <svg class="theme-icon-when-light"><use href="#svg-sun"></use></svg>
         </button>
       </div>
       <label class="toc-overlay-icon toc-header-icon{% if furo_hide_toc %} no-toc{% endif %}" for="__toc">
-        <div class="visually-hidden">Toggle table of contents sidebar</div>
-        <i class="icon"><svg><use href="#svg-toc"></use></svg></i>
+        <span class="icon"><svg><use href="#svg-toc"></use></svg></span>
       </label>
     </div>
   </header>
@@ -103,17 +96,15 @@
           {%- endfor -%}
           {#- Theme toggle -#}
           <div class="theme-toggle-container theme-toggle-content">
-            <button class="theme-toggle">
-              <div class="visually-hidden">Toggle Light / Dark / Auto color theme</div>
+            <button class="theme-toggle" aria-label="Toggle Light / Dark / Auto color theme">
               <svg class="theme-icon-when-auto-light"><use href="#svg-sun-with-moon"></use></svg>
               <svg class="theme-icon-when-auto-dark"><use href="#svg-moon-with-sun"></use></svg>
               <svg class="theme-icon-when-dark"><use href="#svg-moon"></use></svg>
               <svg class="theme-icon-when-light"><use href="#svg-sun"></use></svg>
             </button>
           </div>
           <label class="toc-overlay-icon toc-content-icon{% if furo_hide_toc %} no-toc{% endif %}" for="__toc">
-            <div class="visually-hidden">Toggle table of contents sidebar</div>
-            <i class="icon"><svg><use href="#svg-toc"></use></svg></i>
+            <span class="icon"><svg><use href="#svg-toc"></use></svg></span>
           </label>
         </div>
         <article role="main" id="furo-main-content">