Fix reopened website a11y issues (#5579)

### Description of the change This PR aims at fixing the remaining a11y issues that were reopened. Details at #5397 (comment) Summary of the changes: 1. Change the border color of the searchbox 2. Display a menu behind "documentation" if the screen is small. If you don't like it, we can always remove it and try to convince a11y folks. 3. Fix the overflow of the left menu 4. Add a "space" and "enter" keyboard events handler for the OneTrust cookie manager. 5. Remove the focus on code blocks (every code block, indeed) ### Benefits a11y compliance ### Possible drawbacks N/A ### Applicable issues - fixes #5397 ### Additional information This PR is based on top of #5578, as I assume it will get merged soon. Also, I've removed some unused files (images mainly) and unified the icons we are using (ie, using the SVG ones, and resizing them, via CSS, instead of having several logos for the same purpose) ~EDIT: there are more issues to solve I've just seen, will add the fixes to this PR~ Signed-off-by: Antonio Gamez Diaz <agamez@vmware.com>
vmware-tanzu · Oct 28, 2022 · 8f6edf8 · 8f6edf8
1 parent 4e42faa
commit 8f6edf8
Show file tree

Hide file tree

Showing 30 changed files with 236 additions and 237 deletions.
diff --git a/script/makefiles/site.mk b/script/makefiles/site.mk
@@ -3,6 +3,7 @@
 
 WORKDIR = $(shell pwd)
 # HUGO_VERSION should be in sync with the one set in ../../site/netlify.toml
+# see https://github.com/gohugoio/hugo/releases
 HUGO_VERSION = 0.104.3
 
 # This file provides targets that helps with the development of the kubeapps.dev site.

diff --git a/site/content/community/_index.html b/site/content/community/_index.html
@@ -13,7 +13,7 @@ <h2>Do you want to help build Kubeapps?</h2>
   <div class="grid three">
     <div class="col">
       <div class="icon">
-        <img alt="GitHub logo" src="/img/github-image.svg" />
+        <img class="logo-big" alt="GitHub logo" src="/img/github.svg" />
       </div>
       <div class="content">
         <h3>
@@ -42,7 +42,7 @@ <h3>
     </div>
     <div class="col">
       <div class="icon">
-        <img alt="Slack logo" src="/img/slack.svg" />
+        <img class="logo-big" alt="Slack logo" src="/img/slack.svg" />
       </div>
       <div class="content">
         <h3>
@@ -70,7 +70,7 @@ <h3>
     </div>
     <div class="col">
       <div class="icon">
-        <img alt="Calendar icon" src="/img/calendar.svg" />
+        <img class="logo-big" alt="Calendar icon" src="/img/calendar.svg" />
       </div>
       <div class="content">
         <h3>

diff --git a/site/themes/template/assets/scss/_base.scss b/site/themes/template/assets/scss/_base.scss
@@ -67,7 +67,7 @@ h1 {
 }
 
 h2 {
-  color: #333;
+  color: $darkgrey;
   font-size: 22px;
 }
 
@@ -208,8 +208,7 @@ noscript {
   font-style: normal;
   font-weight: normal;
   src: url("/fonts/Metropolis-BoldItalic.eot");
-  src: url("/fonts/Metropolis-BoldItalic.eot?#iefix")
-      format("embedded-opentype"),
+  src: url("/fonts/Metropolis-BoldItalic.eot?#iefix") format("embedded-opentype"),
     url("/fonts/Metropolis-BoldItalic.woff2") format("woff2"),
     url("/fonts/Metropolis-BoldItalic.woff") format("woff");
 }
@@ -229,8 +228,7 @@ noscript {
   font-style: normal;
   font-weight: normal;
   src: url("/fonts/Metropolis-LightItalic.eot");
-  src: url("/fonts/Metropolis-LightItalic.eot?#iefix")
-      format("embedded-opentype"),
+  src: url("/fonts/Metropolis-LightItalic.eot?#iefix") format("embedded-opentype"),
     url("/fonts/Metropolis-LightItalic.woff2") format("woff2"),
     url("/fonts/Metropolis-LightItalic.woff") format("woff");
 }
@@ -250,8 +248,7 @@ noscript {
   font-style: normal;
   font-weight: normal;
   src: url("/fonts/Metropolis-RegularItalic.eot");
-  src: url("/fonts/Metropolis-RegularItalic.eot?#iefix")
-      format("embedded-opentype"),
+  src: url("/fonts/Metropolis-RegularItalic.eot?#iefix") format("embedded-opentype"),
     url("/fonts/Metropolis-RegularItalic.woff2") format("woff2"),
     url("/fonts/Metropolis-RegularItalic.woff") format("woff");
 }
@@ -271,8 +268,7 @@ noscript {
   font-style: normal;
   font-weight: normal;
   src: url("/fonts/Metropolis-MediumItalic.eot");
-  src: url("/fonts/Metropolis-MediumItalic.eot?#iefix")
-      format("embedded-opentype"),
+  src: url("/fonts/Metropolis-MediumItalic.eot?#iefix") format("embedded-opentype"),
     url("/fonts/Metropolis-MediumItalic.woff2") format("woff2"),
     url("/fonts/Metropolis-MediumItalic.woff") format("woff");
 }
@@ -292,8 +288,7 @@ noscript {
   font-style: normal;
   font-weight: normal;
   src: url("/fonts/Metropolis-SemiBoldItalic.eot");
-  src: url("/fonts/Metropolis-SemiBoldItalic.eot?#iefix")
-      format("embedded-opentype"),
+  src: url("/fonts/Metropolis-SemiBoldItalic.eot?#iefix") format("embedded-opentype"),
     url("/fonts/Metropolis-SemiBoldItalic.woff2") format("woff2"),
     url("/fonts/Metropolis-SemiBoldItalic.woff") format("woff");
 }
diff --git a/site/themes/template/assets/scss/_components.scss b/site/themes/template/assets/scss/_components.scss
@@ -1,15 +1,14 @@
 @import "variables";
 @import "mixins";
 
-
 // Add a chevron (>) after the link text for a11y
-main a:after {
+main a::after {
   content: " \203A";
 }
 
 // Hide chevron in buttons
-main a.button:after,
-a.section-link:after {
+main a.button::after,
+a.section-link::after {
   content: "";
 }
 
@@ -42,7 +41,6 @@ a.section-link:after {
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
-
   }
 
   @include breakpoint(small) {
@@ -178,7 +176,6 @@ a.section-link:after {
   a {
     color: $white;
     font-weight: 300;
-    // text-decoration: underline;
   }
 
   .grid.three {
@@ -217,7 +214,6 @@ a.section-link:after {
 
 .hero.subpage-hero {
   padding-bottom: 90px;
-  // background-image: url(/img/blog-hero-image.png);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -498,7 +494,7 @@ a.section-link:after {
     margin-bottom: 20px;
 
     .col {
-      border: 1px solid #f2f2f2;
+      border: 1px solid $lightgrey;
 
       .icon {
         display: flex;
@@ -551,8 +547,10 @@ a.section-link:after {
 
   .side-nav {
     position: relative;
-    width: 25%;
+    overflow: overlay;
+    width: 20%;
     float: left;
+    overflow-wrap: break-word;
 
     .heading {
       font-size: 18px;
@@ -638,7 +636,7 @@ a.section-link:after {
       width: 100%;
       height: 40px;
       padding: 0.375rem 0.75rem;
-      border: 1px solid #cecece;
+      border: 1px solid $lightgrey;
       border-radius: 5px;
       background-color: #fff;
       background-image: url(/img/search-icon.svg);
@@ -703,19 +701,10 @@ a.section-link:after {
 
     .ds-dropdown-menu {
       width: 130%;
-      border: 1px solid #cecece;
+      border: 1px solid $lightgrey;
       border-radius: 5px;
       background-color: #fff;
     }
-
-    @include breakpoint(extra-large) {
-      width: 22%;
-    }
-
-    //
-    @include breakpoint(large) {
-      width: 22%;
-    }
   }
 
   .docs-content {
@@ -797,15 +786,14 @@ a.section-link:after {
   }
 
   .right-nav {
-    width: 20%;
+    width: 15%;
     margin: -30px -30px 0 0;
     float: right;
 
     .right-nav-content {
       position: sticky;
       top: 0;
       padding: 30px 30px 30px 20px;
-      margin-right: -20px;
       background-color: $lightgrey;
     }
 
@@ -865,6 +853,85 @@ a.section-link:after {
   }
 }
 
+.right-nav-small {
+  .right-nav-content {
+    width: fit-content;
+    padding: 0.5em;
+    margin-top: 2.5em;
+    background-color: white;
+  }
+
+  .buttons {
+    margin-top: 0;
+
+    li {
+      display: inline-block;
+      padding: 8px 0;
+      margin-bottom: 0;
+
+      &:hover {
+        background-color: $lightgrey;
+      }
+
+      a {
+        font-size: 14px;
+        text-transform: uppercase;
+
+        img {
+          width: 22px;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+
+  h4 {
+    font-size: 16px;
+  }
+
+  ul {
+    padding-left: 0;
+    margin-bottom: 0;
+
+    li {
+      display: block;
+      padding-right: 0;
+      margin-bottom: 7px;
+
+      &:hover {
+        background-color: $lightgrey;
+      }
+
+      a {
+        font-family: $metropolis-light;
+        font-size: 14px;
+      }
+
+      ul {
+        margin-top: 7px;
+        padding-inline-start: 14px;
+      }
+    }
+  }
+
+  .sticky {
+    position: fixed;
+    top: 0;
+  }
+
+  @include breakpoint(medium) {
+    display: none;
+  }
+
+  @include breakpoint(large) {
+    display: none;
+  }
+
+  @include breakpoint(extra-large) {
+    display: none;
+  }
+}
+
 .avatar {
   filter: grayscale(100%);
   transition: filter 0.6s ease-in-out;
@@ -904,8 +971,22 @@ a.section-link:after {
     }
   }
 
-  .aa-Form, .aa-DetachedSearchButton {
-    border-color: $ocean;
+  .aa-Form,
+  .aa-DetachedSearchButton {
+    border-color: $indigo;
+  }
+}
+
+.logo {
+  height: 1.5em;
+  filter: grayscale(100%);
+  transition: filter 0.6s ease-in-out;
+
+  &:hover {
+    filter: grayscale(0%);
   }
+}
 
+.logo-big {
+  height: 4em;
 }
diff --git a/site/themes/template/assets/scss/_header.scss b/site/themes/template/assets/scss/_header.scss
@@ -2,33 +2,31 @@
 @import "mixins";
 @import "base";
 
-
-
 a.skip-link {
-  left: -999px;
   position: absolute;
+  z-index: -999;
   top: auto;
+  left: -999px;
+  overflow: hidden;
   width: 1px;
   height: 1px;
-  overflow: hidden;
-  z-index: -999;
 }
 
 a.skip-link:focus,
 a.skip-link:active {
-  color: #fff;
-  background-color: $ocean;
-  left: auto;
+  z-index: 999;
   top: auto;
+  left: auto;
+  overflow: auto;
   width: 25%;
   height: auto;
-  overflow: auto;
-  margin: 10px 25%;
   padding: 5px;
   border-radius: 10px;
-  text-align: center;
+  margin: 10px 25%;
+  background-color: $ocean;
+  color: #fff;
   font-size: 1.2em;
-  z-index: 999;
+  text-align: center;
 }
 
 header {