From 3cca6e4190d290b4acfec2f15b8d7bc3b9b20965 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Fri, 13 Dec 2024 21:33:31 -0600
Subject: [PATCH] rearrane DOM
---
src/components/WildfireAerosolsViz.vue | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/src/components/WildfireAerosolsViz.vue b/src/components/WildfireAerosolsViz.vue
index 5f0eed6..dee0cba 100644
--- a/src/components/WildfireAerosolsViz.vue
+++ b/src/components/WildfireAerosolsViz.vue
@@ -8,22 +8,22 @@
>
<template #figures>
<div id="wildfire-aerosols-grid-container">
- <button id="aerosol-prev-upper" class="flip-button" @click="currentIndex--; clicked()" :disabled="isFirstImage || justClicked">
- <font-awesome-icon :icon="{ prefix: 'fas', iconName: 'arrow-left' }" class="fa fa-arrow-left"/>
- </button>
- <button id="aerosol-next-upper" class="flip-button" @click="currentIndex++; clicked()" :disabled="isLastImage || justClicked">
- <font-awesome-icon :icon="{ prefix: 'fas', iconName: 'arrow-right' }" class="fa fa-arrow-right"/>
- </button>
<div id="aerosol-text-container" class="text-container">
<p v-html="currentText" />
</div>
- <div id="chart-container" ref="chart"></div>
- <button v-if="!mobileView" id="aerosol-prev-lower" class="flip-button" @click="currentIndex--; clicked()" :disabled="isFirstImage || justClicked">
+ <button id="aerosol-next-upper" class="flip-button" @click="currentIndex++; clicked()" :disabled="isLastImage || justClicked" aria-label="Upper button to see next slide">
+ <font-awesome-icon :icon="{ prefix: 'fas', iconName: 'arrow-right' }" class="fa fa-arrow-right"/>
+ </button>
+ <button id="aerosol-prev-upper" class="flip-button" @click="currentIndex--; clicked()" :disabled="isFirstImage || justClicked" aria-label="Upper button to see previous slide">
<font-awesome-icon :icon="{ prefix: 'fas', iconName: 'arrow-left' }" class="fa fa-arrow-left"/>
</button>
- <button v-if="!mobileView" id="aerosol-next-lower" class="flip-button" @click="currentIndex++; clicked()" :disabled="isLastImage || justClicked">
+ <div id="chart-container" ref="chart"></div>
+ <button v-if="!mobileView" id="aerosol-next-lower" class="flip-button" @click="currentIndex++; clicked()" :disabled="isLastImage || justClicked" aria-label="Lower button to see next slide">
<font-awesome-icon :icon="{ prefix: 'fas', iconName: 'arrow-right' }" class="fa fa-arrow-right"/>
</button>
+ <button v-if="!mobileView" id="aerosol-prev-lower" class="flip-button" @click="currentIndex--; clicked()" :disabled="isFirstImage || justClicked" aria-label="Lower button to see previous slide">
+ <font-awesome-icon :icon="{ prefix: 'fas', iconName: 'arrow-left' }" class="fa fa-arrow-left"/>
+ </button>
</div>
</template>
</VizSection>
--
GitLab