Audit fixes

Author: larsenwork

assets/css/_settings.css

@@ -1,11 +1,11 @@
 :root {
   --color-dark: hsl(0, 0%, 8%);
-  --color-dark-50: hsla(0, 0%, 8%, 0.5);
+  --color-dark-72: hsla(0, 0%, 8%, 0.72);
   --color-dark-dimmed: hsl(0, 0%, 4%);
   --color-dark-dimmed-transparent: hsla(0, 0%, 4%, 0);
   --color-dark-dimmed-more: hsl(0, 0%, 0%);
   --color-bright: hsl(0, 0%, 100%);
-  --color-bright-50: hsl(0, 0%, 100%, 0.5);
+  --color-bright-72: hsl(0, 0%, 100%, 0.72);
   --color-bright-dimmed: hsl(0, 0%, 96%);
   --color-bright-dimmed-transparent: hsla(0, 0%, 96%, 0);
   --color-bright-dimmed-more: hsl(0, 0%, 92%);
@@ -15,7 +15,7 @@
   --color-themed-bg-dimmed-transparent: var(--color-dark-dimmed-transparent);
   --color-themed-bg-dimmed-more: var(--color-dark-dimmed-more);
   --color-themed-fg: var(--color-bright);
-  --color-themed-fg-50: var(--color-bright-50);
+  --color-themed-fg-50: var(--color-bright-72);
 
   --lineLength-maxWidth: 35rem;
   --img-maxWidth: 51rem;
@@ -77,7 +77,7 @@
   --color-themed-bg-dimmed-more: var(--color-dark-dimmed-more);
   --color-themed-bg-dimmed-transparent: var(--color-dark-dimmed-transparent);
   --color-themed-fg: var(--color-bright);
-  --color-themed-fg-50: var(--color-bright-50);
+  --color-themed-fg-50: var(--color-bright-72);
 }
 
 .theme-secondary {
@@ -86,7 +86,7 @@
   --color-themed-bg-dimmed-more: var(--color-bright-dimmed-more);
   --color-themed-bg-dimmed-transparent: var(--color-bright-dimmed-transparent);
   --color-themed-fg: var(--color-dark);
-  --color-themed-fg-50: var(--color-dark-50);
+  --color-themed-fg-50: var(--color-dark-72);
 }
 
 @media (--highRes) {

components/tools/gradient/editor.vue

@@ -13,16 +13,18 @@
       class="c-gradientEditor-settings u-grid u-marginTop"
     >
       <div>
-        <div
+        <label
           class="c-gradientEditor-label"
+          for="selectTiming"
         >
           Easing function
-        </div>
+        </label>
         <div
           class="u-position-relative"
         >
           <select-chevron />
           <select
+            id="selectTiming"
             v-model="$store.state.gradient.settings.easingFunction"
           >
             <option>cubic-bezier</option>
@@ -31,16 +33,18 @@
         </div>
       </div>
       <div>
-        <div
+        <label
           class="c-gradientEditor-label"
+          for="selectColorSpace"
         >
           Color space
-        </div>
+        </label>
         <div
           class="u-position-relative"
         >
           <select-chevron />
           <select
+            id="selectColorSpace"
             v-model="$store.state.gradient.settings.colorMode"
           >
             <option>rgb</option>
@@ -64,6 +68,7 @@
         :class="{
           'is-active': $store.state.gradient.editorActive === 'direction'
         }"
+        name="Gradient direction"
         @click="toggleEditor('direction')"
         @keydown.tab="tabAway($event, 'direction')"
       >
@@ -77,6 +82,7 @@
         :class="{
           'is-active': $store.state.gradient.editorActive === 'color1'
         }"
+        name="Gradient start color"
         @click="toggleEditor('color1')"
       >
         <div
@@ -90,6 +96,7 @@
         :class="{
           'is-active': $store.state.gradient.editorActive === 'ease'
         }"
+        name="Gradient timing function"
         @click="toggleEditor('ease')"
       >
         <div
@@ -102,6 +109,7 @@
         :class="{
           'is-active': $store.state.gradient.editorActive === 'color2'
         }"
+        name="Gradient stop color"
         @click="toggleEditor('color2')"
         @keydown.tab="tabAway($event, 'color2')"
       >
@@ -212,7 +220,7 @@
                       @keypress="isNumber($event)"
                     >
                     <label
-                      for="c-gradientEditor-input-steps-number"
+                      for="c-gradientEditor-input-steps-skip"
                       class="c-gradientEditor-label"
                     >
                       Steps skip
@@ -222,7 +230,7 @@
                     >
                       <select-chevron />
                       <select
-                        id="c-gradientEditor-input-steps-number"
+                        id="c-gradientEditor-input-steps-skip"
                         v-model="$store.state.gradient.steps.skip"
                       >
                         <option>skip-none</option>

nuxt.config.js

@@ -40,7 +40,13 @@ module.exports = {
       { name: 'theme-color', content: '#ee2b7c' },
     ],
     link: [
-      { rel: 'preload', href: '/fonts/gidole-regular.woff2', as: 'font' },
+      {
+        rel: 'preload',
+        href: '/fonts/gidole-regular.woff2',
+        as: 'font',
+        type: 'font/woff2',
+        crossorigin: 'anonymous',
+      },
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
       {
         rel: 'apple-touch-icon',