Website: Fix HTML validation errors

PR:	297509

3 files changed, 46 insertions, 40 deletions

diff --git a/website/themes/beastie/assets/styles/main.css b/website/themes/beastie/assets/styles/main.css
index ae8d1b9e7a..d17cfafbc0 100644
--- a/website/themes/beastie/assets/styles/main.css
+++ b/website/themes/beastie/assets/styles/main.css
@@ -487,18 +487,21 @@ input[type='checkbox'] {
   color: var(--white);
 }
 
-.menu-item a {
+.menu-item a,
+.menu-item-description {
   padding: 1rem 0;
   color: inherit;
 }
 
 .menu-item a,
+.menu-item-description,
 .donate a {
   text-decoration: none;
   font-weight: 600;
 }
 
 .menu-item a:hover,
+.menu-item-description:hover,
 .donate a:hover {
   text-decoration: none;
 }
@@ -537,7 +540,8 @@ input[type='checkbox'] {
   visibility: visible;
 }
 
-.menu-item a:hover+.sub-menu {
+.menu-item a:hover+.sub-menu,
+.menu-item-description:hover+.sub-menu {
   visibility: visible;
 }
 
@@ -704,7 +708,8 @@ input[type='checkbox'] {
     width: 100%;
   }
 
-  .menu-item a:hover+.sub-menu {
+  .menu-item a:hover+.sub-menu,
+  .menu-item-description:hover+.sub-menu {
     visibility: visible;
   }
 
@@ -1493,6 +1498,18 @@ footer {
   display: block;
 }
 
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .theme-switch-label {
   display: inline-flex;
   align-items: center;
diff --git a/website/themes/beastie/layouts/_partials/site-footer.html b/website/themes/beastie/layouts/_partials/site-footer.html
index db0f54876e..a6d6eaed06 100755
--- a/website/themes/beastie/layouts/_partials/site-footer.html
+++ b/website/themes/beastie/layouts/_partials/site-footer.html
@@ -4,7 +4,8 @@
     <section class="logo-column">
       <img src="{{ "images/beastie-right.svg" | relURL }}" width="160" height="250" alt="FreeBSD logo" />
       <div class="theme-container">
-        <label for="theme-switch" class="theme-switch-label" aria-label="Switch color theme">
+        <label for="theme-switch" class="theme-switch-label">
+          <span class="theme-switch-label">Switch color theme</span>
           <i class="fa fa-moon-o theme-icon theme-icon-dark" aria-hidden="true"></i>
           <i class="fa fa-sun-o theme-icon theme-icon-light" aria-hidden="true"></i>
         </label>
diff --git a/website/themes/beastie/layouts/_partials/site-header.html b/website/themes/beastie/layouts/_partials/site-header.html
index e87392f013..03574484a8 100644
--- a/website/themes/beastie/layouts/_partials/site-header.html
+++ b/website/themes/beastie/layouts/_partials/site-header.html
@@ -14,12 +14,10 @@
       <ul class="menu">
         <li class="menu-item">
           <input id="about" type="checkbox">
-          <a href="#" aria-label="Navigate to About section">
-            <label class="menu-item-description" for="about">
-              {{ i18n "h-about" }}
-              <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
-            </label>
-          </a>
+          <label class="menu-item-description" for="about">
+            {{ i18n "h-about" }}
+            <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
+          </label>
           <ul class="sub-menu">
             <li class="title">
               <a href="{{ "about" | relLangURL }}">{{ i18n "h-about" }}</a>
@@ -40,12 +38,10 @@
         </li>
         <li class="menu-item">
           <input id="download" type="checkbox">
-          <a href="#" aria-label="Navigate to get FreeBSD section">
-            <label class="menu-item-description" for="download">
-              {{ i18n "h-get-freebsd" }}
-              <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
-            </label>
-          </a>
+          <label class="menu-item-description" for="download">
+            {{ i18n "h-get-freebsd" }}
+            <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
+          </label>
           <ul class="sub-menu">
             <li class="title">
               <a href="{{ "where" | relLangURL }}">{{ i18n "h-get-freebsd" }}</a>
@@ -63,12 +59,10 @@
         </li>
         <li class="menu-item">
           <input id="documentation" type="checkbox">
-          <a href="#" aria-label="Navigate to get Documentation section">
-            <label class="menu-item-description" for="documentation">
-              {{ i18n "h-documentation" }}
-              <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
-            </label>
-          </a>
+          <label class="menu-item-description" for="documentation">
+            {{ i18n "h-documentation" }}
+            <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
+          </label>
           <ul class="sub-menu">
             <li class="title">
               <a href="{{ printf "%s%s%s" "https://docs.FreeBSD.org/" $currentLang "/" }}">{{ i18n "h-documentation" }}</a>
@@ -101,12 +95,10 @@
         </li>
         <li class="menu-item">
           <input id="community" type="checkbox">
-          <a href="#" aria-label="Navigate to get Community section">
-            <label class="menu-item-description" for="community">
-              {{ i18n "h-community" }}
-              <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
-            </label>
-          </a>
+          <label class="menu-item-description" for="community">
+            {{ i18n "h-community" }}
+            <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
+          </label>
           <ul class="sub-menu">
             <li class="title">
               <a href="{{ "community" | relLangURL }}">{{ i18n "h-community" }}</a>
@@ -130,12 +122,10 @@
         </li>
         <li class="menu-item">
           <input id="developers" type="checkbox">
-          <a href="#" aria-label="Navigate to get Developers section">
-            <label class="menu-item-description" for="developers">
-              {{ i18n "h-developers" }}
-              <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
-            </label>
-          </a>
+          <label class="menu-item-description" for="developers">
+            {{ i18n "h-developers" }}
+            <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
+          </label>
           <ul class="sub-menu">
             <li class="title">
               <a href="{{ "projects" | relLangURL }}">{{ i18n "h-developers" }}</a>
@@ -162,12 +152,10 @@
         </li>
         <li class="menu-item">
           <input id="support" type="checkbox">
-          <a href="#" aria-label="Navigate to get Support section">
-            <label class="menu-item-description" for="support">
-              {{ i18n "h-support" }}
-              <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
-            </label>
-          </a>
+          <label class="menu-item-description" for="support">
+            {{ i18n "h-support" }}
+            <i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
+          </label>
           <ul class="sub-menu">
             <li class="title">
               <a href="{{ "support" | relLangURL }}">{{ i18n "h-support" }}</a>