a11y: ARIA for conductor and independent time conductor

src/api/menu/components/Menu.vue

@@ -30,7 +30,6 @@
             role="menuitem"
             :class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
             :title="action.description"
-            :data-testid="action.testId || null"
             @click="action.onItemClicked"
           >
             {{ action.name }}
@@ -53,7 +52,6 @@
         role="menuitem"
         :class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
         :title="action.description"
-        :data-testid="action.testId || null"
         @click="action.onItemClicked"
       >
         {{ action.name }}

src/api/menu/components/SuperMenu.vue

@@ -34,7 +34,6 @@
             role="menuitem"
             :class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
             :title="action.description"
-            :data-testid="action.testId || null"
             @click="action.onItemClicked"
             @mouseover="toggleItemDescription(action)"
             @mouseleave="toggleItemDescription()"
@@ -59,7 +58,6 @@
         role="menuitem"
         :class="action.cssClass"
         :title="action.description"
-        :data-testid="action.testId || null"
         @click="action.onItemClicked"
         @mouseover="toggleItemDescription(action)"
         @mouseleave="toggleItemDescription()"

src/plugins/timeConductor/Conductor.vue

@@ -49,7 +49,7 @@
       @panAxis="pan"
       @zoomAxis="zoom"
     />
-    <div class="c-not-button c-not-button--compact c-compact-tc__gear icon-gear"></div>
+    <div role="button" class="c-not-button c-not-button--compact c-compact-tc__gear icon-gear" aria-label="Time Conductor Settings"></div>
 
     <conductor-pop-up
       v-if="showConductorPopup"

src/plugins/timeConductor/ConductorClock.vue

@@ -17,6 +17,7 @@ available * at runtime from the About dialog for additional information.
       <button
         class="c-button--menu js-clock-button"
         :class="[buttonCssClass, selectedClock.cssClass]"
+        aria-label="Time Conductor Clock"
         @click.prevent.stop="showClocksMenu"
       >
         <span class="c-button__label">{{ selectedClock.name }}</span>

src/plugins/timeConductor/ConductorInputsFixed.vue

@@ -32,6 +32,7 @@
     <div
       class="c-compact-tc__setting-value u-fade-truncate--lg --no-sep"
       :title="`Start bounds: ${formattedBounds.start}`"
+      aria-label="Start bounds"
     >
       {{ formattedBounds.start }}
     </div>

src/plugins/timeConductor/ConductorMode.vue

@@ -26,6 +26,7 @@
         class="c-button--menu js-mode-button"
         :class="[buttonCssClass, selectedMode.cssClass]"
         @click.prevent.stop="showModesMenu"
+        aria-label="Time Conductor Mode"
       >
         <span class="c-button__label">{{ selectedMode.name }}</span>
       </button>

src/plugins/timeConductor/ConductorTimeSystem.vue

@@ -29,6 +29,7 @@
       class="c-button--menu c-time-system-button"
       :class="[buttonCssClass]"
       @click.prevent.stop="showTimeSystemMenu"
+      aria-label="Time Conductor Time System"
     >
       <span class="c-button__label">{{ selectedTimeSystem.name }}</span>
     </button>

src/plugins/timeConductor/independent/IndependentClock.vue

@@ -1,16 +1,24 @@
-/***************************************************************************** * Open MCT Web,
+<!--
-Copyright (c) 2014-2023, United States Government * as represented by the Administrator of the
+ Open MCT, Copyright (c) 2014-2023, United States Government
-National Aeronautics and Space * Administration. All rights reserved. * * Open MCT Web is licensed
+ as represented by the Administrator of the National Aeronautics and Space
-under the Apache License, Version 2.0 (the * "License"); you may not use this file except in
+ Administration. All rights reserved.
-compliance with the License. * You may obtain a copy of the License at *
+
-http://www.apache.org/licenses/LICENSE-2.0. * * Unless required by applicable law or agreed to in
+ Open MCT is licensed under the Apache License, Version 2.0 (the
-writing, software * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT *
+ "License"); you may not use this file except in compliance with the License.
-WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the * License for the specific
+ You may obtain a copy of the License at
-language governing permissions and limitations * under the License. * * Open MCT Web includes source
+ http://www.apache.org/licenses/LICENSE-2.0.
-code licensed under additional open source * licenses. See the Open Source Licenses file
+
-(LICENSES.md) included with * this source code distribution or the Licensing information page
+ Unless required by applicable law or agreed to in writing, software
-available * at runtime from the About dialog for additional information.
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-*****************************************************************************/
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
 <template>
   <div ref="clockMenuButton" class="c-ctrl-wrapper c-ctrl-wrapper--menus-up">
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
@@ -18,6 +26,7 @@ available * at runtime from the About dialog for additional information.
         v-if="selectedClock"
         class="c-icon-button c-button--menu js-clock-button"
         :class="[buttonCssClass, selectedClock.cssClass]"
+        aria-label="Independent Time Conductor Clock"
         @click.prevent.stop="showClocksMenu"
       >
         <span class="c-button__label">{{ selectedClock.name }}</span>
@@ -48,7 +57,7 @@ export default {
       }
     }
   },
-  data: function () {
+  data() {
     const activeClock = this.getActiveClock();
 
     return {

src/plugins/timeConductor/independent/IndependentMode.vue

@@ -25,6 +25,7 @@
       <button
         class="c-icon-button c-button--menu js-mode-button"
         :class="[buttonCssClass, selectedMode.cssClass]"
+        aria-label="Independent Time Conductor Mode"
         @click.prevent.stop="showModesMenu"
       >
         <span class="c-button__label">{{ selectedMode.name }}</span>

src/plugins/timeConductor/independent/IndependentTimeConductor.vue

@@ -28,17 +28,17 @@
       { 'is-expanded': independentTCEnabled }
     ]"
   >
-    <toggle-switch
+    <ToggleSwitch
       id="independentTCToggle"
       class="c-toggle-switch--mini"
       :checked="independentTCEnabled"
-      :title="toggleTitle"
+      :name="toggleTitle"
       @change="toggleIndependentTC"
     />
 
     <ConductorModeIcon />
 
-    <conductor-inputs-fixed
+    <ConductorInputsFixed
       v-if="showFixedInputs"
       class="c-compact-tc__bounds--fixed"
       :object-path="objectPath"
@@ -46,7 +46,7 @@
       :compact="true"
     />
 
-    <conductor-inputs-realtime
+    <ConductorInputsRealtime
       v-if="showRealtimeInputs"
       class="c-compact-tc__bounds--real-time"
       :object-path="objectPath"
@@ -55,10 +55,12 @@
     />
     <div
       v-if="independentTCEnabled"
+      role="button"
       class="c-not-button c-not-button--compact c-compact-tc__gear icon-gear"
+      aria-label="Independent Time Conductor Settings"
     ></div>
 
-    <conductor-pop-up
+    <ConductorPopUp
       v-if="showConductorPopup"
       ref="conductorPopup"
       :object-path="objectPath"
@@ -145,7 +147,7 @@ export default {
   },
   computed: {
     toggleTitle() {
-      return `${this.independentTCEnabled ? 'Disable' : 'Enable'} independent Time Conductor`;
+      return `${this.independentTCEnabled ? 'Disable' : 'Enable'} Independent Time Conductor`;
     },
     showFixedInputs() {
       return this.isFixed && this.independentTCEnabled;

src/plugins/timeConductor/timePopupFixed.vue

@@ -15,6 +15,7 @@
         type="text"
         autocorrect="off"
         spellcheck="false"
+        aria-label="Start date"
         @change="validateAllBounds('startDate')"
       />
       <date-picker
@@ -34,6 +35,7 @@
         type="text"
         autocorrect="off"
         spellcheck="false"
+        aria-label="Start time"
         @change="validateAllBounds('startDate')"
       />
     </div>
@@ -48,6 +50,7 @@
         type="text"
         autocorrect="off"
         spellcheck="false"
+        aria-label="End date"
         @change="validateAllBounds('endDate')"
       />
       <date-picker
@@ -67,6 +70,7 @@
         type="text"
         autocorrect="off"
         spellcheck="false"
+        aria-label="End time"
         @change="validateAllBounds('endDate')"
       />
     </div>
@@ -75,9 +79,10 @@
       <button
         class="c-button c-button--major icon-check"
         :disabled="isDisabled"
+        aria-label="Submit time bounds"
         @click.prevent="submit"
       ></button>
-      <button class="c-button icon-x" @click.prevent="hide"></button>
+      <button class="c-button icon-x" @click.prevent="hide" aria-label="Discard time bounds"></button>
     </div>
   </form>
 </template>

src/plugins/timeConductor/timePopupRealtime.vue

@@ -19,6 +19,7 @@
         min="0"
         max="23"
         title="Enter 0 - 23"
+        aria-label="Start offset hours"
         @change="validate()"
         @keyup="validate()"
         @focusin="selectAll($event)"
@@ -37,6 +38,7 @@
         max="59"
         title="Enter 0 - 59"
         step="1"
+        aria-label="Start offset minutes"
         @change="validate()"
         @keyup="validate()"
         @focusin="selectAll($event)"
@@ -55,6 +57,7 @@
         max="59"
         title="Enter 0 - 59"
         step="1"
+        aria-label="Start offset seconds"
         @change="validate()"
         @keyup="validate()"
         @focusin="selectAll($event)"
@@ -75,6 +78,7 @@
         min="0"
         max="23"
         title="Enter 0 - 23"
+        aria-label="End offset hours"
         @change="validate()"
         @keyup="validate()"
         @focusin="selectAll($event)"
@@ -111,6 +115,7 @@
         max="59"
         title="Enter 0 - 59"
         step="1"
+        aria-label="End offset seconds"
         @change="validate()"
         @keyup="validate()"
         @focusin="selectAll($event)"
@@ -123,9 +128,10 @@
       <button
         class="c-button c-button--major icon-check"
         :disabled="isDisabled"
+        aria-label="Submit time offsets"
         @click.prevent="submit"
       ></button>
-      <button class="c-button icon-x" @click.prevent="hide"></button>
+      <button class="c-button icon-x" @click.prevent="hide" aria-label="Discard time offsets"></button>
     </div>
   </form>
 </template>