Correct use of aria-label

src/app/App.vue

@@ -448,6 +448,7 @@
 @import '~bootstrap-vue/src/index.scss';
 @import '~bootstrap/scss/bootstrap.scss';
 @import "@/assets/_custom.scss";
+/* Removes focus ring for non-tabbing users on all buttons */
 #eterna-chat:not(.tabbing) button:focus {
   outline: none;
   border: none;

src/app/components/DraggableDiv.vue

@@ -196,13 +196,15 @@
       const chat = this.$refs.draggableContainer;
 
       if (!minimized) {
-        if (chatTop >= windowHeight - chatHeight) {
+        // If the chat is docked to the bottom, the minimization needs to move the top bar down
+        if (chatTop >= windowHeight - chatHeight - breakpoint) {
           gsap.to(chat, {
             duration: 0.2,
             top: windowHeight - chatHeight,
           });
         }
-      } else if (chatTop + chatHeight >= windowHeight) {
+        // If the chat is minimized and docked, the top should move up
+      } else if (chatTop + chatHeight >= windowHeight - breakpoint) {
           gsap.to(chat, {
             duration: 0.2,
             top: windowHeight - 40,
@@ -213,19 +215,19 @@
     }
 
     internalClick(event: MouseEvent) {
-      event.stopPropagation();
+      event.stopPropagation(); // Stops event propogation before it reaches document
       this.container.classList.add('clicked-inside');
     }
 
-    externalClick(event: MouseEvent) {
+    externalClick(event: MouseEvent) { // Only receives clicks outside container
       this.container.classList.remove('clicked-inside');
     }
 
     mounted() {
       document.onclick = this.externalClick;
     }
 
-    emitScrolDown() {
+    emitScrolDown() { // Scrolls down chat on resize
       this.$emit('scrollDown');
     }
 

src/app/components/Header/MinimizationTriangle.vue

@@ -25,7 +25,7 @@
     settings !: boolean;
 
     get label() {
-      return `Click to ${this.value ? 'show' : 'hide'} content${this.settings ? ' in settings' : ''}.`;
+      return `${this.value ? 'Show' : 'Hide'}`;
     }
   }
 </script>

src/app/components/Header/OpenWindowButton.vue

@@ -3,7 +3,7 @@
     class="open-window border-0"
     style="float: right;"
     @click="$emit('input', !value)"
-    :aria-label="`Click to make the chat ${value ? 'fullscreen' : 'normal size'}`"
+    :aria-label="`Make chat ${value ? 'fullscreen' : 'normal size'}`"
    >
   </button>
 </template>

src/app/components/Header/StarButton.vue

@@ -4,7 +4,7 @@
     style="float: right;"
     @click="$emit('input', !value);"
     :class="{ active: value}"
-    aria-label="`Click to display starred messages"
+    aria-label="Show/hide starred messages"
    >
   </button>
 </template>

src/app/components/Input/EmoticonBar.vue

@@ -10,7 +10,6 @@
           :key="emoticon"
           :emoticon='emoticon'
           class="border-right"
-          :aria-label="`Add a ${emoticon} emoticon to the input text`"
           @emote='add' />
       </div>
       <div
@@ -29,7 +28,7 @@
           @drop.native.prevent
           @dragover.native.prevent
           @dragenter.native.prevent="dragOver($event, index, item)"
-          :aria-label="`Format the input text (${item})`"
+          :aria-label="`Format input (${item})`"
         />
       </div>
       <div id='preview-submenu' v-show="previewSelected && previewChatFeatures">
@@ -51,23 +50,23 @@
       class="text-white border-0 overflow-hidden"
       v-if="anyChatFeatures" >
       <MenuButton
-        aria-label="Open emoticon toolbar"
+        aria-label="emoticon"
         id="emoticonSelect"
         v-if="emoticonChatFeatures"
         name="👍"
         styles=""
         @button="select('emoticon');"
       />
       <MenuButton
-        aria-label="Open markdown toolbar"
+        aria-label="markdown"
         id="markdownSelect"
         v-if="markdownChatFeatures"
         name="A"
         styles="bold italics underline"
         @button="select('markdown');"
       />
       <MenuButton
-        aria-label="Open preview toolbar"
+        aria-label="preview"
         id="previewSelect"
         v-if="previewChatFeatures"
         name="P"

src/app/components/Input/ScalableInput.vue

@@ -18,9 +18,8 @@
       @select="updateSelection"
       @click="deselect"
       @keypress="onKeyPress"
-      aria-label="Send message text input"
     />
-    <SendButton @send="send" aria-label="Send" class='float-right'/>
+    <SendButton @send="send" class='float-right'/>
     <div
       ref="hiddenDiv"
       class="scalable-input-hidden invisible border-0"

src/app/components/Input/SendButton.vue

@@ -3,6 +3,7 @@
     class="send-button border-0"
     :class="{animated: animationValue}"
     @click="sendMessage"
+    aria-label="send"
   >
   </button>
 </template>

src/app/components/Slideout/Chat/AddChatButton.vue

@@ -9,7 +9,7 @@
         @keypress.enter="addChat(); chatName = ''"
         class='h-100 float-right'
         v-model="chatName"
-        aria-label="Add a channel"
+        aria-label="Add channel"
     ></span>
   </div>
 </template>

src/app/components/Slideout/Chat/ChatSelectButton.vue

@@ -3,7 +3,7 @@
     class="chat-select border-0 font-weight-bold text-white d-block w-100"
     :class="{active: isActive}"
     @click="$emit('input');"
-    :aria-label="`Open the ${name.substring(1)} channel`"
+    :aria-label="`Open ${name.substring(1)}`"
   >
     <p class='channel-name text-justify ml-1 mb-2'>{{ name }}</p>
     <p class='channel-description text-justify ml-1'>{{ description }}</p>

src/app/components/Slideout/HamburgerMenuButton.vue

@@ -6,7 +6,7 @@
       notified:notification,
       mentioned:mention,
     }"
-    :aria-label="`Click to ${this.value ? 'close' : 'open'} the slideout`"
+    :aria-label="`${this.value ? 'Close' : 'Open'} slideout`"
   >
   </button>
 </template>

src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue

@@ -1,23 +1,23 @@
 <template>
   <div id='picker'>
     <ColorSlider
-      aria-label="Color slider for red"
+      aria-label="red color slider"
       id='red'
       gradientStart="#300"
       gradientEnd="#c00"
       @sliderChanged="redChanged"
       colorID="red"
       ref="red" />
     <ColorSlider
-      aria-label="Color slider for green"
+      aria-label="green color slider"
       id='green'
       gradientStart='#030'
       gradientEnd='#0c0'
       @sliderChanged="greenChanged"
       colorID="green"
       ref="green" />
     <ColorSlider
-      aria-label="Color slider for blue"
+      aria-label="blue color slider"
       id='blue'
       gradientStart='#003'
       gradientEnd='#00c'

src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue

@@ -1,7 +1,7 @@
 <template>
   <div class='color-slider-container overflow-hidden ml-0 mt-2 mb-2'>
     <input
-      aria-label="Slider to control a color value"
+      :aria-label="colorId"
       class="slider border-0"
       v-model="sliderValue"
       type=range min=0 max=255

src/app/components/Slideout/Settings/Sections/IgnoredSection.vue

@@ -1,19 +1,17 @@
 <template>
   <SettingsSection title="Ignored" >
-      <ul style="margin-bottom: 0" class="list-group" aria-label="List of ignored users">
+      <ul style="margin-bottom: 0" class="list-group">
         <li v-for="user in ignoredUsers" :key="user">
           <span style="vertical-align: sub">{{user}}</span>
           <button
             class='float-right btn btn-primary btn-sm'
-            :aria-label="`Ignore user ${user}`"
             @click="unignore(user)" >
             Unignore
           </button>
         </li>
         <li v-show="!anyIgnoredUsers">No users ignored</li>
         <li v-show="anyIgnoredUsers" class="height-normal">
           <button
-          aria-label="Unignore all users"
           class='btn btn-primary w-100 btn-sm'
           @click="unignore('*')"
           >

src/app/components/Slideout/Settings/Sections/NotificationsSection.vue

@@ -1,6 +1,6 @@
 <template>
   <SettingsSection title="Notifications" >
-    <ul aria-label="Enable or disable notifications for channels" class="list-group">
+    <ul class="list-group">
       <li
         v-for="channel in channels"
         :key="channel.name"
@@ -14,7 +14,7 @@
           />
         </span>
       </li>
-      <li aria-label="Notifications for all channels">
+      <li>
         <span class="align-baseline">All</span>
         <span class="switch">
           <SettingsEnableDisable :value="allEnabled" @input="updateAll" />
@@ -24,7 +24,6 @@
     <li>
       <span
         class="align-baseline d-inline-block"
-        aria-label="Appears in the page title if you have notifications"
       >
         Indicator <SettingsTooltip text="Appears in the page title if you have notifications" />
       </span>
@@ -36,15 +35,13 @@
       <span class="align-baseline d-inline-block">Desktop Notifications</span>
       <span
         class="switch"
-        aria-label="Whether notifications should be sent directly to your computer"
       >
         <SettingsSwitch v-model="desktopNotifications" />
       </span>
     </li>
     <li>
       <span
         class="align-baseline d-inline-block;"
-        aria-label="Keywords that trigger notifications."
       >
         Keywords
           <SettingsTooltip text="If you have multiple keywords, separate them with commas.

src/app/components/Slideout/Settings/Sections/OperSection.vue

@@ -1,10 +1,10 @@
 <template>
   <SettingsSection title="Operator" >
-    <li aria-label="Whether you are a chat moderator/operator">
+    <li>
       <span>You are {{isOper ? '' : 'not'}} an operator</span>
       <span class="float-right w-100">
         <button
-          aria-label="Log in as an operator"
+          aria-label="Log in as operator"
           @click="$emit('auth')"
           class="btn btn-primary btn-sm w-100"
           v-show="!isOper" >

src/app/components/Slideout/Settings/Sections/StatusSection.vue

@@ -2,16 +2,15 @@
   <SettingsSection title="Status" >
     <li>
       <span
-        class="align-middle"
-        aria-label="When others view your username, they will see an indicator if you are away">
+        class="align-middle">
         You are currently {{userStatus ? 'away' : 'online'}}
         <SettingsTooltip
           text="When others view your username, they will see an indicator if you are away"
         />
       </span>
     </li>
     <li>
-      <span aria-label="Change your status">Set
+      <span aria-label="set status">Set
         <SettingsTooltip
           text="Change your status"
         /></span>
@@ -33,13 +32,11 @@
       <span class="float-right">
         <SettingsSwitch
           v-model="$vxm.chat.autoUpdateStatus"
-          aria-label="Whether your status will update when you leave or come back to the tab"
         />
       </span>
     </li>
     <li>
       <span
-        aria-label="When others see the away indicator, they will see the reason you are away"
       >
         Reason
         <SettingsTooltip

src/app/components/Slideout/Settings/Sections/TextSizeSection.vue

@@ -1,6 +1,6 @@
 <template>
   <SettingsSection title="Text Size" >
-      <input v-model="size" type=number min=10 max=18 aria-label="Change the size of the text">
+      <input v-model="size" type=number min=10 max=18 aria-label="Change text size">
       <p
         id='font-warning'
         v-show="size < 10 || size > 18" >

src/app/components/Slideout/Settings/Sections/ToolbarSection.vue

@@ -1,21 +1,21 @@
 <template>
   <SettingsSection title="Toolbar Features">
-    <ul aria-label="Which features are enabled in the toolbar" class="list-group">
-      <li aria-label="Whether emoticons are enabled in the toolbar">
+    <ul class="list-group">
+      <li>
         <span class="align-sub">
           Emoticons
           <SettingsTooltip text="Whether the emoticons menu in the toolbar is visible" />
         </span>
         <span class="float-right"><SettingsSwitch v-model="emoticonChatFeatures" /></span>
       </li>
-      <li aria-label="Whether markdown is enabled in the toolbar">
+      <li>
         <span class="align-sub">
           Markdown
           <SettingsTooltip text="Whether the markdown menu in the toolbar is visible" />
         </span>
         <span class="float-right"><SettingsSwitch v-model="markdownChatFeatures" /></span>
       </li>
-      <li aria-label="Whether the preview is enabled in the toolbar">
+      <li>
         <span class="align-sub">
           Preview
           <SettingsTooltip text="Whether the markdown preview menu in the toolbar is visible" />
@@ -29,8 +29,7 @@
         </span>
       </li>
     </ul>
-    <ul class="mt-2 list-group" v-if="$vxm.settings.emoticonChatFeatures"
-      aria-label="Change custom emoticons that appear in the toolbar">
+    <ul class="mt-2 list-group" v-if="$vxm.settings.emoticonChatFeatures">
       <li>
         Custom emoticons
         <SettingsTooltip text="Which emoticons appear in your three custom slots

src/app/components/Slideout/Settings/SettingsEnableDisable.vue

@@ -1,5 +1,9 @@
 <template>
-  <label class="switch" :style="{ width: `${width}px` }" :aria-label="label">
+  <label
+    class="switch"
+    :style="{ width: `${width}px` }"
+    :aria-label="label"
+    role='three state switch'>
     <button @click="$emit('input', false)" :disabled="value === 2" id="disable">
       {{offText}}
     </button>
@@ -35,7 +39,7 @@
       let stateDescription = 'neither';
       if (this.value === states.all_on) stateDescription = this.onText;
       else if (this.value === states.all_off) stateDescription = this.offText;
-      return `Three state switch in state ${stateDescription}; possible states ${this.onText}, ${this.offText}, and neither`;
+      return `State is ${stateDescription}; possible states ${this.onText}, ${this.offText}, and neither`;
     }
   }
 </script>