From f0550f0b68b7f47aeb80f8e528e63253680151b9 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sat, 25 Jul 2020 22:07:28 -0500
Subject: [PATCH] Further accessibility

---
 src/app/components/ItemOptions.vue                       | 1 +
 .../Slideout/Settings/ColorPicker/ColorPicker.vue        | 9 +++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/app/components/ItemOptions.vue b/src/app/components/ItemOptions.vue
index a2b952f0..2a5d09fb 100644
--- a/src/app/components/ItemOptions.vue
+++ b/src/app/components/ItemOptions.vue
@@ -3,6 +3,7 @@
       <button
         class="chat-message-options border-0 text-white font-weight-bold"
         ref="chatOptions"
+        aria-label="open message options"
         @click.prevent="openContextMenu"
         v-show="hovered && user.username"
         @blur="hovered = false"
diff --git a/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue b/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
index 166acfa8..8f7f0c0e 100644
--- a/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
+++ b/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
@@ -1,7 +1,7 @@
 <template>
   <div id='picker'>
     <ColorSlider
-      aria-label="red color slider"
+      aria-label="red"
       id='red'
       gradientStart="#300"
       gradientEnd="#c00"
@@ -9,7 +9,7 @@
       colorID="red"
       ref="red" />
     <ColorSlider
-      aria-label="green color slider"
+      aria-label="green"
       id='green'
       gradientStart='#030'
       gradientEnd='#0c0'
@@ -17,7 +17,7 @@
       colorID="green"
       ref="green" />
     <ColorSlider
-      aria-label="blue color slider"
+      aria-label="blue"
       id='blue'
       gradientStart='#003'
       gradientEnd='#00c'
@@ -26,10 +26,11 @@
       ref="blue" />
       <div id='swatch-container'>
         <button
-          v-for="color in defaultColors"
+          v-for="(color, i) in defaultColors"
           :key="color"
           class="swatch border-0 m-1"
           :style="{ backgroundColor:color }"
+          :aria-label="`default color ${i + 1}`"
           @click="setColor(color)" />
       </div>
     <p