mirror of
https://github.com/nasa/openmct.git
synced 2025-02-16 15:40:56 +00:00
a11y: ARIA for conductor and independent time conductor
This commit is contained in:
parent
c400c7c12d
commit
2d16e91704
@ -30,7 +30,6 @@
|
|||||||
role="menuitem"
|
role="menuitem"
|
||||||
:class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
|
:class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
|
||||||
:title="action.description"
|
:title="action.description"
|
||||||
:data-testid="action.testId || null"
|
|
||||||
@click="action.onItemClicked"
|
@click="action.onItemClicked"
|
||||||
>
|
>
|
||||||
{{ action.name }}
|
{{ action.name }}
|
||||||
@ -53,7 +52,6 @@
|
|||||||
role="menuitem"
|
role="menuitem"
|
||||||
:class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
|
:class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
|
||||||
:title="action.description"
|
:title="action.description"
|
||||||
:data-testid="action.testId || null"
|
|
||||||
@click="action.onItemClicked"
|
@click="action.onItemClicked"
|
||||||
>
|
>
|
||||||
{{ action.name }}
|
{{ action.name }}
|
||||||
|
@ -34,7 +34,6 @@
|
|||||||
role="menuitem"
|
role="menuitem"
|
||||||
:class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
|
:class="[action.cssClass, action.isDisabled ? 'disabled' : '']"
|
||||||
:title="action.description"
|
:title="action.description"
|
||||||
:data-testid="action.testId || null"
|
|
||||||
@click="action.onItemClicked"
|
@click="action.onItemClicked"
|
||||||
@mouseover="toggleItemDescription(action)"
|
@mouseover="toggleItemDescription(action)"
|
||||||
@mouseleave="toggleItemDescription()"
|
@mouseleave="toggleItemDescription()"
|
||||||
@ -59,7 +58,6 @@
|
|||||||
role="menuitem"
|
role="menuitem"
|
||||||
:class="action.cssClass"
|
:class="action.cssClass"
|
||||||
:title="action.description"
|
:title="action.description"
|
||||||
:data-testid="action.testId || null"
|
|
||||||
@click="action.onItemClicked"
|
@click="action.onItemClicked"
|
||||||
@mouseover="toggleItemDescription(action)"
|
@mouseover="toggleItemDescription(action)"
|
||||||
@mouseleave="toggleItemDescription()"
|
@mouseleave="toggleItemDescription()"
|
||||||
|
@ -49,7 +49,7 @@
|
|||||||
@panAxis="pan"
|
@panAxis="pan"
|
||||||
@zoomAxis="zoom"
|
@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
|
<conductor-pop-up
|
||||||
v-if="showConductorPopup"
|
v-if="showConductorPopup"
|
||||||
|
@ -17,6 +17,7 @@ available * at runtime from the About dialog for additional information.
|
|||||||
<button
|
<button
|
||||||
class="c-button--menu js-clock-button"
|
class="c-button--menu js-clock-button"
|
||||||
:class="[buttonCssClass, selectedClock.cssClass]"
|
:class="[buttonCssClass, selectedClock.cssClass]"
|
||||||
|
aria-label="Time Conductor Clock"
|
||||||
@click.prevent.stop="showClocksMenu"
|
@click.prevent.stop="showClocksMenu"
|
||||||
>
|
>
|
||||||
<span class="c-button__label">{{ selectedClock.name }}</span>
|
<span class="c-button__label">{{ selectedClock.name }}</span>
|
||||||
|
@ -32,6 +32,7 @@
|
|||||||
<div
|
<div
|
||||||
class="c-compact-tc__setting-value u-fade-truncate--lg --no-sep"
|
class="c-compact-tc__setting-value u-fade-truncate--lg --no-sep"
|
||||||
:title="`Start bounds: ${formattedBounds.start}`"
|
:title="`Start bounds: ${formattedBounds.start}`"
|
||||||
|
aria-label="Start bounds"
|
||||||
>
|
>
|
||||||
{{ formattedBounds.start }}
|
{{ formattedBounds.start }}
|
||||||
</div>
|
</div>
|
||||||
|
@ -26,6 +26,7 @@
|
|||||||
class="c-button--menu js-mode-button"
|
class="c-button--menu js-mode-button"
|
||||||
:class="[buttonCssClass, selectedMode.cssClass]"
|
:class="[buttonCssClass, selectedMode.cssClass]"
|
||||||
@click.prevent.stop="showModesMenu"
|
@click.prevent.stop="showModesMenu"
|
||||||
|
aria-label="Time Conductor Mode"
|
||||||
>
|
>
|
||||||
<span class="c-button__label">{{ selectedMode.name }}</span>
|
<span class="c-button__label">{{ selectedMode.name }}</span>
|
||||||
</button>
|
</button>
|
||||||
|
@ -29,6 +29,7 @@
|
|||||||
class="c-button--menu c-time-system-button"
|
class="c-button--menu c-time-system-button"
|
||||||
:class="[buttonCssClass]"
|
:class="[buttonCssClass]"
|
||||||
@click.prevent.stop="showTimeSystemMenu"
|
@click.prevent.stop="showTimeSystemMenu"
|
||||||
|
aria-label="Time Conductor Time System"
|
||||||
>
|
>
|
||||||
<span class="c-button__label">{{ selectedTimeSystem.name }}</span>
|
<span class="c-button__label">{{ selectedTimeSystem.name }}</span>
|
||||||
</button>
|
</button>
|
||||||
|
@ -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>
|
<template>
|
||||||
<div ref="clockMenuButton" class="c-ctrl-wrapper c-ctrl-wrapper--menus-up">
|
<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">
|
<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"
|
v-if="selectedClock"
|
||||||
class="c-icon-button c-button--menu js-clock-button"
|
class="c-icon-button c-button--menu js-clock-button"
|
||||||
:class="[buttonCssClass, selectedClock.cssClass]"
|
:class="[buttonCssClass, selectedClock.cssClass]"
|
||||||
|
aria-label="Independent Time Conductor Clock"
|
||||||
@click.prevent.stop="showClocksMenu"
|
@click.prevent.stop="showClocksMenu"
|
||||||
>
|
>
|
||||||
<span class="c-button__label">{{ selectedClock.name }}</span>
|
<span class="c-button__label">{{ selectedClock.name }}</span>
|
||||||
@ -48,7 +57,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: function () {
|
data() {
|
||||||
const activeClock = this.getActiveClock();
|
const activeClock = this.getActiveClock();
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
@ -25,6 +25,7 @@
|
|||||||
<button
|
<button
|
||||||
class="c-icon-button c-button--menu js-mode-button"
|
class="c-icon-button c-button--menu js-mode-button"
|
||||||
:class="[buttonCssClass, selectedMode.cssClass]"
|
:class="[buttonCssClass, selectedMode.cssClass]"
|
||||||
|
aria-label="Independent Time Conductor Mode"
|
||||||
@click.prevent.stop="showModesMenu"
|
@click.prevent.stop="showModesMenu"
|
||||||
>
|
>
|
||||||
<span class="c-button__label">{{ selectedMode.name }}</span>
|
<span class="c-button__label">{{ selectedMode.name }}</span>
|
||||||
|
@ -28,17 +28,17 @@
|
|||||||
{ 'is-expanded': independentTCEnabled }
|
{ 'is-expanded': independentTCEnabled }
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<toggle-switch
|
<ToggleSwitch
|
||||||
id="independentTCToggle"
|
id="independentTCToggle"
|
||||||
class="c-toggle-switch--mini"
|
class="c-toggle-switch--mini"
|
||||||
:checked="independentTCEnabled"
|
:checked="independentTCEnabled"
|
||||||
:title="toggleTitle"
|
:name="toggleTitle"
|
||||||
@change="toggleIndependentTC"
|
@change="toggleIndependentTC"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ConductorModeIcon />
|
<ConductorModeIcon />
|
||||||
|
|
||||||
<conductor-inputs-fixed
|
<ConductorInputsFixed
|
||||||
v-if="showFixedInputs"
|
v-if="showFixedInputs"
|
||||||
class="c-compact-tc__bounds--fixed"
|
class="c-compact-tc__bounds--fixed"
|
||||||
:object-path="objectPath"
|
:object-path="objectPath"
|
||||||
@ -46,7 +46,7 @@
|
|||||||
:compact="true"
|
:compact="true"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<conductor-inputs-realtime
|
<ConductorInputsRealtime
|
||||||
v-if="showRealtimeInputs"
|
v-if="showRealtimeInputs"
|
||||||
class="c-compact-tc__bounds--real-time"
|
class="c-compact-tc__bounds--real-time"
|
||||||
:object-path="objectPath"
|
:object-path="objectPath"
|
||||||
@ -55,10 +55,12 @@
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
v-if="independentTCEnabled"
|
v-if="independentTCEnabled"
|
||||||
|
role="button"
|
||||||
class="c-not-button c-not-button--compact c-compact-tc__gear icon-gear"
|
class="c-not-button c-not-button--compact c-compact-tc__gear icon-gear"
|
||||||
|
aria-label="Independent Time Conductor Settings"
|
||||||
></div>
|
></div>
|
||||||
|
|
||||||
<conductor-pop-up
|
<ConductorPopUp
|
||||||
v-if="showConductorPopup"
|
v-if="showConductorPopup"
|
||||||
ref="conductorPopup"
|
ref="conductorPopup"
|
||||||
:object-path="objectPath"
|
:object-path="objectPath"
|
||||||
@ -145,7 +147,7 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
toggleTitle() {
|
toggleTitle() {
|
||||||
return `${this.independentTCEnabled ? 'Disable' : 'Enable'} independent Time Conductor`;
|
return `${this.independentTCEnabled ? 'Disable' : 'Enable'} Independent Time Conductor`;
|
||||||
},
|
},
|
||||||
showFixedInputs() {
|
showFixedInputs() {
|
||||||
return this.isFixed && this.independentTCEnabled;
|
return this.isFixed && this.independentTCEnabled;
|
||||||
|
@ -15,6 +15,7 @@
|
|||||||
type="text"
|
type="text"
|
||||||
autocorrect="off"
|
autocorrect="off"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
|
aria-label="Start date"
|
||||||
@change="validateAllBounds('startDate')"
|
@change="validateAllBounds('startDate')"
|
||||||
/>
|
/>
|
||||||
<date-picker
|
<date-picker
|
||||||
@ -34,6 +35,7 @@
|
|||||||
type="text"
|
type="text"
|
||||||
autocorrect="off"
|
autocorrect="off"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
|
aria-label="Start time"
|
||||||
@change="validateAllBounds('startDate')"
|
@change="validateAllBounds('startDate')"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -48,6 +50,7 @@
|
|||||||
type="text"
|
type="text"
|
||||||
autocorrect="off"
|
autocorrect="off"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
|
aria-label="End date"
|
||||||
@change="validateAllBounds('endDate')"
|
@change="validateAllBounds('endDate')"
|
||||||
/>
|
/>
|
||||||
<date-picker
|
<date-picker
|
||||||
@ -67,6 +70,7 @@
|
|||||||
type="text"
|
type="text"
|
||||||
autocorrect="off"
|
autocorrect="off"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
|
aria-label="End time"
|
||||||
@change="validateAllBounds('endDate')"
|
@change="validateAllBounds('endDate')"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -75,9 +79,10 @@
|
|||||||
<button
|
<button
|
||||||
class="c-button c-button--major icon-check"
|
class="c-button c-button--major icon-check"
|
||||||
:disabled="isDisabled"
|
:disabled="isDisabled"
|
||||||
|
aria-label="Submit time bounds"
|
||||||
@click.prevent="submit"
|
@click.prevent="submit"
|
||||||
></button>
|
></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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
@ -19,6 +19,7 @@
|
|||||||
min="0"
|
min="0"
|
||||||
max="23"
|
max="23"
|
||||||
title="Enter 0 - 23"
|
title="Enter 0 - 23"
|
||||||
|
aria-label="Start offset hours"
|
||||||
@change="validate()"
|
@change="validate()"
|
||||||
@keyup="validate()"
|
@keyup="validate()"
|
||||||
@focusin="selectAll($event)"
|
@focusin="selectAll($event)"
|
||||||
@ -37,6 +38,7 @@
|
|||||||
max="59"
|
max="59"
|
||||||
title="Enter 0 - 59"
|
title="Enter 0 - 59"
|
||||||
step="1"
|
step="1"
|
||||||
|
aria-label="Start offset minutes"
|
||||||
@change="validate()"
|
@change="validate()"
|
||||||
@keyup="validate()"
|
@keyup="validate()"
|
||||||
@focusin="selectAll($event)"
|
@focusin="selectAll($event)"
|
||||||
@ -55,6 +57,7 @@
|
|||||||
max="59"
|
max="59"
|
||||||
title="Enter 0 - 59"
|
title="Enter 0 - 59"
|
||||||
step="1"
|
step="1"
|
||||||
|
aria-label="Start offset seconds"
|
||||||
@change="validate()"
|
@change="validate()"
|
||||||
@keyup="validate()"
|
@keyup="validate()"
|
||||||
@focusin="selectAll($event)"
|
@focusin="selectAll($event)"
|
||||||
@ -75,6 +78,7 @@
|
|||||||
min="0"
|
min="0"
|
||||||
max="23"
|
max="23"
|
||||||
title="Enter 0 - 23"
|
title="Enter 0 - 23"
|
||||||
|
aria-label="End offset hours"
|
||||||
@change="validate()"
|
@change="validate()"
|
||||||
@keyup="validate()"
|
@keyup="validate()"
|
||||||
@focusin="selectAll($event)"
|
@focusin="selectAll($event)"
|
||||||
@ -111,6 +115,7 @@
|
|||||||
max="59"
|
max="59"
|
||||||
title="Enter 0 - 59"
|
title="Enter 0 - 59"
|
||||||
step="1"
|
step="1"
|
||||||
|
aria-label="End offset seconds"
|
||||||
@change="validate()"
|
@change="validate()"
|
||||||
@keyup="validate()"
|
@keyup="validate()"
|
||||||
@focusin="selectAll($event)"
|
@focusin="selectAll($event)"
|
||||||
@ -123,9 +128,10 @@
|
|||||||
<button
|
<button
|
||||||
class="c-button c-button--major icon-check"
|
class="c-button c-button--major icon-check"
|
||||||
:disabled="isDisabled"
|
:disabled="isDisabled"
|
||||||
|
aria-label="Submit time offsets"
|
||||||
@click.prevent="submit"
|
@click.prevent="submit"
|
||||||
></button>
|
></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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user