Button tweaks

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-bucketexplorer/src/tools/BucketExplorer/BucketExplorer.vue

@@ -93,6 +93,7 @@
               density="compact"
               class="ml-3 mt-1"
               data-test="be-nav-back"
+              aria-label="Navigate Back"
               @click.stop="backArrow"
             />
             <span class=".text-body-1 ma-2 font-size" data-test="file-path">
@@ -132,29 +133,35 @@
           {{ item.size ? item.size.toLocaleString() : '' }}
         </template>
         <template #item.action="{ item }">
-          <v-icon
+          <v-btn
             v-if="item.icon === 'mdi-file' && isText(item.name)"
+            icon="mdi-eye"
+            variant="text"
+            density="compact"
             class="mr-3"
             data-test="view-file"
+            aria-label="View File"
             @click="viewFile(item.name)"
-          >
-            mdi-eye
-          </v-icon>
-          <v-icon
+          />
+          <v-btn
             v-if="item.icon === 'mdi-file'"
+            icon="mdi-download-box"
+            variant="text"
+            density="compact"
             class="mr-3"
             data-test="download-file"
+            aria-label="Download File"
             @click="downloadFile(item.name)"
-          >
-            mdi-download-box
-          </v-icon>
-          <v-icon
+          />
+          <v-btn
             v-if="item.icon === 'mdi-file'"
+            icon="mdi-delete"
+            variant="text"
+            density="compact"
             data-test="delete-file"
+            aria-label="Delete File"
             @click="deleteFile(item.name)"
-          >
-            mdi-delete
-          </v-icon>
+          />
         </template>
       </v-data-table>
     </v-card>

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataextractor/src/tools/DataExtractor/DataExtractor.vue

@@ -109,6 +109,7 @@
           density="compact"
           :disabled="items.length < 1"
           data-test="editAll"
+          aria-label="Edit All Items"
           @click="editAll = true"
         />
         <v-btn
@@ -117,6 +118,7 @@
           density="compact"
           :disabled="items.length < 1"
           data-test="delete-all"
+          aria-label="Delete All Items"
           @click="deleteAll"
         />
       </v-toolbar>
@@ -147,9 +149,13 @@
           density="compact"
         >
           <template #item.edit="{ item }">
-            <v-icon data-test="edit-row" @click.stop="item.edit = true">
-              mdi-pencil
-            </v-icon>
+            <v-btn
+              icon="mdi-pencil"
+              variant="text"
+              data-test="edit-row"
+              aria-label="Edit Item"
+              @click.stop="item.edit = true"
+            />
             <v-dialog
               v-model="item.edit"
               max-width="600"
@@ -211,9 +217,13 @@
             </v-dialog>
           </template>
           <template #item.delete="{ item }">
-            <v-icon data-test="delete-row" @click="deleteItem(item)">
-              mdi-delete
-            </v-icon>
+            <v-btn
+              icon="mdi-delete"
+              variant="text"
+              data-test="delete-row"
+              aria-label="Delete Item"
+              @click="deleteItem(item)"
+            />
           </template>
         </v-data-table>
       </v-card>

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-dataviewer/src/tools/DataViewer/AddComponentDialog.vue

@@ -122,11 +122,15 @@
                   density="compact"
                 >
                   <template #item.delete="{ item }">
-                    <v-icon @click="deleteItem(item)"> mdi-delete </v-icon>
+                    <v-btn
+                      icon="mdi-delete"
+                      variant="text"
+                      aria-label="Delete Item"
+                      @click="deleteItem(item)"
+                    />
                   </template>
-                </v-data-table>
-              </v-col></v-row
-            >
+                </v-data-table> </v-col
+            ></v-row>
           </v-container>
         </v-card-text>
         <v-card-actions class="px-2">

openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-limitsmonitor/src/tools/LimitsMonitor/LimitsControl.vue

@@ -105,6 +105,7 @@
                 icon="mdi-dots-horizontal"
                 variant="text"
                 density="compact"
+                aria-label="Item Options"
                 v-bind="menuProps"
               />
             </template>
@@ -156,6 +157,7 @@
                   icon="mdi-delete"
                   density="compact"
                   variant="text"
+                  aria-label="Remove Ignored Item"
                   :data-test="`remove-ignore-${index}`"
                   @click="restoreItem(index)"
                 />

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/EnvironmentDialog.vue

@@ -59,13 +59,13 @@
             >
               <template #item.actions="{ item }">
                 <v-btn
-                  icon
+                  icon="mdi-delete"
+                  variant="text"
                   class="mt-1"
                   data-test="item-delete"
+                  aria-label="Delete Environment Variable"
                   @click="deleteEnvironment(item)"
-                >
-                  <v-icon>mdi-delete</v-icon>
-                </v-btn>
+                />
               </template>
             </v-data-table>
             <v-row dense>

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/Graph.vue

@@ -38,6 +38,7 @@
           icon="mdi-alert"
           density="compact"
           variant="text"
+          aria-label="Show Errors"
           @click="
             () => {
               errorDialog = true
@@ -50,6 +51,7 @@
           variant="text"
           density="compact"
           data-test="edit-graph-icon"
+          aria-label="Edit Graph"
           @click="
             () => {
               editGraph = true

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/GraphEditDialog.vue

@@ -165,6 +165,7 @@
                       style="padding: 30px"
                       icon="mdi-delete"
                       variant="text"
+                      aria-label="Remove Line"
                       @click="removeLine(item)"
                     />
                   </v-col>
@@ -189,6 +190,7 @@
               <v-btn
                 icon="mdi-delete"
                 variant="text"
+                aria-label="Remove Item"
                 @click="$emit('remove', item)"
               />
             </template>

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/Openc3Screen.vue

@@ -38,6 +38,7 @@
           variant="text"
           density="compact"
           data-test="error-graph-icon"
+          aria-label="Show Errors"
           @click="
             () => {
               errorDialog = true
@@ -49,24 +50,33 @@
           variant="text"
           density="compact"
           data-test="edit-screen-icon"
+          aria-label="Edit Screen"
           @click="openEdit"
         />
         <v-tooltip v-if="!fixFloated" :open-delay="600" location="top">
           <template #activator="{ props }">
             <div v-bind="props">
-              <v-icon data-test="float-screen-icon" @click="floatScreen">
-                {{ floated ? 'mdi-balloon' : 'mdi-view-grid-outline' }}
-              </v-icon>
+              <v-btn
+                :icon="floated ? 'mdi-balloon' : 'mdi-view-grid-outline'"
+                variant="text"
+                data-test="float-screen-icon"
+                :aria-label="floated ? 'Unfloat Screen' : 'Float Screen'"
+                @click="floatScreen"
+              />
             </div>
           </template>
           <span> {{ floated ? 'Unfloat Screen' : 'Float Screen' }} </span>
         </v-tooltip>
         <v-tooltip v-if="floated" :open-delay="600" location="top">
           <template #activator="{ props }">
             <div v-bind="props">
-              <v-icon data-test="up-screen-icon" @click="upScreen">
-                mdi-arrow-up
-              </v-icon>
+              <v-btn
+                icon="mdi-arrow-up"
+                variant="text"
+                data-test="up-screen-icon"
+                aria-label="Move Screen Up"
+                @click="upScreen"
+              />
             </div>
           </template>
           <span> Move Screen Up </span>
@@ -78,9 +88,13 @@
         >
           <template #activator="{ props }">
             <div v-bind="props">
-              <v-icon data-test="down-screen-icon" @click="downScreen">
-                mdi-arrow-down
-              </v-icon>
+              <v-btn
+                icon="mdi-arrow-down"
+                variant="text"
+                data-test="down-screen-icon"
+                aria-label="Move Screen Down"
+                @click="downScreen"
+              />
             </div>
           </template>
           <span> Move Screen Down </span>
@@ -94,13 +108,15 @@
           variant="text"
           density="compact"
           data-test="minimize-screen-icon"
+          aria-label="Minimize Screen"
           @click="minMaxTransition"
         />
-        <v-icon
+        <v-btn
           v-else
           icon="mdi-window-maximize"
           variant="text"
           data-test="maximize-screen-icon"
+          aria-label="Maximize Screen"
           @click="minMaxTransition"
         />
         <v-btn
@@ -109,6 +125,7 @@
           variant="text"
           density="compact"
           data-test="close-screen-icon"
+          aria-label="Close Screen"
           @click="$emit('close-screen')"
         />
       </v-toolbar>

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/SimpleTextDialog.vue

@@ -33,6 +33,7 @@
             variant="text"
             density="compact"
             data-test="downloadIcon"
+            aria-label="Download Content"
             @click="download"
           />
         </div>

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/components/TreeNode.vue

@@ -22,7 +22,7 @@
 -->
 <template>
   <div class="tree-node">
-    <div @click="handleClick(node)" class="node-content" v-if="showNode">
+    <div v-if="showNode" class="node-content" @click="handleClick(node)">
       <div class="content-wrapper">
         <v-icon
           v-if="node.children"
@@ -61,12 +61,12 @@
 
         <v-btn
           v-if="node.title === '__TEMP__'"
-          icon
-          @click="emit('delete')"
+          icon="mdi-delete"
+          variant="text"
           style="margin-left: auto"
-        >
-          <v-icon> mdi-delete </v-icon>
-        </v-btn>
+          aria-label="Delete"
+          @click="emit('delete')"
+        />
       </div>
     </div>
     <div v-else></div>