Merge pull request #290 from seasalt-ai/fix-contrast-error

fix: increase accessibility score and remove error
seasalt-ai · Aug 28, 2024 · 838ce82 · 838ce82
2 parents 7126001 + b0f9ab5
commit 838ce82
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 28 deletions.
diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss
@@ -12,8 +12,10 @@ $border-dark: $gray-800;
 $body-color-dark: $gray-300;
 $dots-dark: darken($body-color-dark, 50%);
 
-$link-color-dark: $blue-300;
+$link-color-dark: $primary;
+$link-color: $blue-300;
 $button-color-dark: $link-color-dark;
+$button-color: $link-color;
 $focus-color-dark: lighten($link-color-dark, 2.5%);
 
 $navbar-dark-color:                 $body-color-dark;

diff --git a/assets/scss/common/_variables.scss b/assets/scss/common/_variables.scss
@@ -20,7 +20,7 @@ $beige:    #fbf7f0;
 $purple:   #19b6c0;
 $brown:    #aa9c84;
 
-$blue-300: #19b6c0;
+$blue-300: #115D6E;
 $pink-100: #fcfaff;
 $pink-500: #d32e9d;
 
@@ -70,7 +70,7 @@ $body-color:                $black;
 //
 // Style anchor elements.
 
-$link-color:                              $primary;
+$link-color:                              $blue-300;
 $link-decoration:                         none;
 
 // Grid containers
@@ -182,7 +182,7 @@ $dropdown-config: (
   title-color: $black,
   subtitle-color: $black,
   text-color: $black,
-  highlight-color: $purple,
+  highlight-color: $primary,
   highlight-opacity: 0.1,
   highlight-type: underline
 );

diff --git a/assets/scss/components/_buttons.scss b/assets/scss/components/_buttons.scss
@@ -46,7 +46,7 @@ body .toggle-light {
 }
 
 body .btn-primary {
-    @include button-variant($button-color-dark, $button-color-dark);
+    @include button-variant($button-color, $button-color-dark);
     color: #fff;
 }
 

diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html
@@ -30,32 +30,35 @@ <h3 class="h6 text-uppercase mb-3 d-md-none">Main</h3>
           {{- $current := . -}}
           {{- $section := $current.Section -}}
           {{ range .Site.Menus.main -}}
-            {{- $active := or ($current.IsMenuCurrent "main" .) ($current.HasMenuCurrent "main" .) -}}
-            {{- $active = or $active (eq .Name $current.Title) -}}
-            {{- $active = or $active (and (eq .Name ($section | humanize)) (eq $current.Section $section)) -}}
-            {{- $active = or $active (and (eq .Name "Blog") (eq $current.Section "blog" "contributors")) -}}
-            {{ if .HasChildren }}
-              <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle ps-0 py-1" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                  {{ .Name }}
-                  <span class="dropdown-caret"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-main shadow rounded border-0" aria-labelledby="navbarDropdownMenuLink">
-                  {{ range .Children -}}
-                  {{- $active = eq .Name $current.Title -}}
-                    <li>
-                      <a class="dropdown-item{{ if $active }} active{{ end }}" href="{{ .URL | relLangURL }}"{{ if $active }} aria-current="true"{{ end }}>{{ .Name }}</a>
-                    </li>
-                  {{ end -}}
-                </ul>
+          {{- if .Name }}
+          {{- $active := or ($current.IsMenuCurrent "main" .) ($current.HasMenuCurrent "main" .) -}}
+          {{- $active = or $active (eq .Name $current.Title) -}}
+          {{- $active = or $active (and (eq .Name ($section | humanize)) (eq $current.Section $section)) -}}
+          {{- $active = or $active (and (eq .Name "Blog") (eq $current.Section "blog" "contributors")) -}}
+          {{ if .HasChildren }}
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle ps-0 py-1" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              {{ .Name }}
+              <span class="dropdown-caret"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
+            </a>
+            <ul class="dropdown-menu dropdown-menu-main shadow rounded border-0" aria-labelledby="navbarDropdownMenuLink">
+              {{ range .Children -}}
+              {{- $active = eq .Name $current.Title -}}
+              <li>
+                <a class="dropdown-item{{ if $active }} active{{ end }}" href="{{ .URL | relLangURL }}"{{ if $active }} aria-current="true"{{ end }} aria-label="{{ .Name }}">{{ .Name }}</a>
               </li>
-            {{ else }}
-              <li class="nav-item">
-                <a class="nav-link ps-0 py-1{{ if $active }} active{{ end }}" href="{{ .URL | relLangURL }}" aria-label="{{ .Name }}">{{ .Name }}</a>
-              </li>
-            {{ end }}
+              {{ end -}}
+            </ul>
+          </li>
+          {{ else }}
+          <li class="nav-item">
+            <a class="nav-link ps-0 py-1{{ if $active }} active{{ end }}" href="{{ .URL | relLangURL }}" aria-label="{{ .Name | safeHTML }}">{{ .Name }}</a>
+          </li>
+          {{ end }}
+          {{ end }}
           {{ end -}}
         </ul>
+
         <hr class="text-black-50 my-4 d-md-none">
         <h3 class="h6 text-uppercase mb-3 d-md-none">Socials</h3>
         <ul class="nav flex-column flex-md-row ms-md-auto me-md-n5 pe-md-2">