diff --git a/src/components/WildfireAerosolsViz.vue b/src/components/WildfireAerosolsViz.vue index 5f0eed6e2b2f703cc8bfcb440f4ce4c3d2becb6c..dee0cba07262e9d6ea308beae6deec07716a4f6a 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>