Hotfix - More a11y fixes

anurag-roy · Oct 15, 2022 · 03cac9a · 03cac9a
1 parent 94ed1d3
commit 03cac9a
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 43 deletions.
diff --git a/components/GeneratorControls.vue b/components/GeneratorControls.vue
@@ -14,6 +14,7 @@
             class="ml-2 rounded-xl bg-gray-800/75 p-2.5 transition-colors hover:text-pink-500"
             @click="$emit('random')"
           >
+            <span class="sr-only">Random Gradient</span>
             <icon-refresh class="w-4 h-4" />
           </button>
         </div>
@@ -31,16 +32,16 @@ export default {
   props: {
     gradient: {
       type: String,
-      required: true
+      required: true,
     },
     color: {
       type: String,
-      default: ''
+      default: '',
     },
     type: {
       type: String,
-      default: 'standard'
-    }
-  }
+      default: 'standard',
+    },
+  },
 }
 </script>
diff --git a/components/GeneratorPreview.vue b/components/GeneratorPreview.vue
@@ -1,7 +1,7 @@
 <template>
   <section>
     <div
-      class="mx-auto mt-16 grid max-w-screen-xl grid-cols-1 gap-8 px-4 sm:px-6 lg:grid-cols-2 lg:px-8"
+      class="grid max-w-screen-xl grid-cols-1 gap-8 px-4 mx-auto mt-16 sm:px-6 lg:grid-cols-2 lg:px-8"
     >
       <div
         :class="gradient"
@@ -10,28 +10,30 @@
 
       <div
         :class="background"
-        class="relative flex items-center rounded-xl p-8"
+        class="relative flex items-center p-8 rounded-xl"
       >
         <div class="absolute inset-x-0 top-0 flex items-center justify-end p-4">
           <button
             class="rounded-xl bg-gray-800 p-2.5 text-white"
             @click="handleEdit"
           >
-            <icon-pencil class="h-4 w-4" />
+            <span class="sr-only">Edit Text</span>
+            <icon-pencil class="w-4 h-4" />
           </button>
 
           <button
             class="ml-2 rounded-xl bg-gray-800 p-2.5 text-white"
             @click="handleBackground"
           >
-            <icon-bulb class="h-4 w-4" />
+            <span class="sr-only">Toggle Theme</span>
+            <icon-bulb class="w-4 h-4" />
           </button>
         </div>
 
         <p
           ref="text"
           :class="gradient"
-          class="min-w-full rounded bg-clip-text p-2 text-center text-2xl font-bold text-transparent caret-pink-600"
+          class="min-w-full p-2 text-2xl font-bold text-center text-transparent rounded bg-clip-text caret-pink-600"
           spellcheck="false"
           contenteditable="true"
         >
@@ -48,27 +50,27 @@ export default {
   props: {
     gradient: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
-  data () {
+  data() {
     return {
       dark: true,
-      edit: false
+      edit: false,
     }
   },
   computed: {
-    background () {
+    background() {
       return this.dark ? 'bg-black' : 'bg-white'
-    }
+    },
   },
   methods: {
-    handleBackground () {
+    handleBackground() {
       this.dark = !this.dark
     },
-    handleEdit () {
+    handleEdit() {
       this.$nextTick(() => this.$refs.text.focus())
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/components/GrainyPreview.vue b/components/GrainyPreview.vue
@@ -1,12 +1,11 @@
 <template>
-  <div class="mx-auto mt-16 max-w-screen-xl px-4 sm:px-6 lg:px-8">
+  <div class="max-w-screen-xl px-4 mx-auto mt-16 sm:px-6 lg:px-8">
     <div
       :class="gradient"
       class="relative h-[300px] overflow-hidden rounded-3xl sm:h-[400px] lg:h-[600px]"
     >
       <div
-        class="noise absolute inset-0 brightness-100 contrast-150 filter"
-        :style="`--color: ${color}`"
+        class="absolute inset-0 bg-[url(https://grainy-gradients.vercel.app/noise.svg)] opacity-25 brightness-100 contrast-150"
       />
     </div>
   </div>
@@ -17,21 +16,12 @@ export default {
   props: {
     gradient: {
       type: String,
-      required: true
+      required: true,
     },
     color: {
       type: String,
-      required: true
-    }
-  }
+      required: true,
+    },
+  },
 }
 </script>
-
-<style lang="postcss" scoped>
-/* https://css-tricks.com/grainy-gradients/ */
-
-.noise {
-  background: linear-gradient(to right, var(--color), transparent),
-    url(https://grainy-gradients.vercel.app/noise.svg);
-}
-</style>
diff --git a/pages/mesh.vue b/pages/mesh.vue
@@ -23,6 +23,7 @@
             class="ml-2 rounded-xl bg-gray-800/75 p-2.5 transition-colors hover:text-pink-500"
             @click="handleRandomiser"
           >
+            <span class="sr-only">Random Gradient</span>
             <icon-refresh class="w-4 h-4" />
           </button>
         </div>
@@ -89,7 +90,10 @@
               <div class="mt-4 space-y-4">
                 <div class="grid grid-cols-2 gap-4">
                   <div>
-                    <label for="Left" class="mb-1 text-xs font-medium">
+                    <label
+                      :for="`Left${index}`"
+                      class="mb-1 text-xs font-medium"
+                    >
                       Left -
 
                       <span class="font-mono text-xs font-medium">
@@ -98,26 +102,36 @@
                     </label>
 
                     <input
-                      id="Left"
+                      :id="`Left${index}`"
                       v-model="stop.position.left"
                       type="range"
                     />
                   </div>
 
                   <div>
-                    <label for="Top" class="mb-1 text-xs font-medium">
+                    <label
+                      :for="`Top${index}`"
+                      class="mb-1 text-xs font-medium"
+                    >
                       Top -
 
                       <span class="font-mono text-xs font-medium">
                         {{ stop.position.top }}%
                       </span>
                     </label>
 
-                    <input id="Top" v-model="stop.position.top" type="range" />
+                    <input
+                      :id="`Top${index}`"
+                      v-model="stop.position.top"
+                      type="range"
+                    />
                   </div>
 
                   <div>
-                    <label for="Transparent" class="mb-1 text-xs font-medium">
+                    <label
+                      :for="`Transparent${index}`"
+                      class="mb-1 text-xs font-medium"
+                    >
                       Transparent -
 
                       <span class="font-mono text-xs font-medium">
@@ -126,15 +140,15 @@
                     </label>
 
                     <input
-                      id="Transparent"
+                      :id="`Transparent${index}`"
                       v-model="stop.transparent"
                       type="range"
                     />
                   </div>
                 </div>
 
                 <generator-select
-                  id="Background"
+                  :id="`Background${index}`"
                   v-model="colors[index]"
                   :items="bgColors"
                 />