Merge pull request #67 from patudom/keyboard-accessibility

UI Updates
cosmicds · Oct 24, 2024 · 3b720ed · 3b720ed
2 parents 2e86ebd + 2bb17f2
commit 3b720ed
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "version": "0.0.0",
   "dependencies": {
-    "@cosmicds/vue-toolkit": "^0.2.0",
+    "@cosmicds/vue-toolkit": "^0.4.0",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.5",

diff --git a/src/TempoLite.vue b/src/TempoLite.vue
@@ -63,10 +63,10 @@
                     Select a date and press the “Play” button or scroll the time slider to view the changing concentrations of NO<sub>2</sub> over North America on those dates. 
                   </li>
                   <li v-bind:style="cssVars">
-                    Press the <v-icon style="font-size: 1.3em; color: var(--accent-color)" elevation="1">mdi-information-variant-circle-outline</v-icon> button next to each Featured Date to get an overview of what to look for on that date
+                    Press the <v-icon style="font-size: 1.3em; color: var(--accent-color)" elevation="1">mdi-information-variant-circle-outline</v-icon> button next to each Notable Date to get an overview of what to look for on that date
                   </li>
                   <li>
-                    For each Featured Date, select one of two zoomed-in Locations to investigate specific pollution events.
+                    For each Notable Date, select one of two zoomed-in Locations to investigate specific pollution events.
                   </li>
                   <li>
                     You can use the “Timezone” setting to investigate how pollution evolves over the day, for example as rush hour progresses in large cities.
@@ -300,19 +300,21 @@
             </v-tooltip>
           </div>
           <v-progress-linear
-            v-if="loadedImagesProgress < 100"
             v-model="loadedImagesProgress"
-            color="red"
-            height="5"
-          ></v-progress-linear>
+            color="#c10124"
+            height="20"
+          >
+          <span v-if="loadedImagesProgress < 100">Loading Data ({{ loadedImagesProgress.toFixed(0) }}%)</span>
+          <span v-else>Selected Date Loaded</span>
+          </v-progress-linear>
         </div>
 
         <hr style="border-color: grey">
 
 
          <div id="date-radio">
            <!-- make a v-radio-group with 3 options -->
-          <h2>Featured Dates</h2>
+          <h2>Notable Dates</h2>
           <v-radio-group
             v-model="radio"
             row
@@ -371,7 +373,7 @@
         <hr style="border-color: grey;"  v-if="radio>0">
 
         <div id="locations-of-interest" v-if="radio>0">
-          <h3 class="mb-1">Locations for {{ dateStrings[radio] }}</h3>
+          <h3 class="mb-1">Featured Events for {{ dateStrings[radio] }}</h3>
           <v-radio-group
             v-if="radio !== undefined"
             v-model="sublocationRadio"
@@ -507,7 +509,7 @@
                 <v-card-text>
                   <h4 class="mb-2"><a href="https://tempo.si.edu/" target="_blank" rel="noopener noreferrer">TEMPO</a> Team Acknowledgments:</h4>
                   <p>
-                    Caroline Nowlan, Aaron Naeger, and Erika Wright provided dates and locations for events of interest in the TEMPO data.
+                    Caroline Nowlan, Aaron Naeger, and Erika Wright provided dates and featured events of interest in the TEMPO data.
                   </p>
                   <p>
                     Xiong Liu provided the L3 version 2 TEMPO data files.
@@ -530,7 +532,7 @@
                   Harry Houghton<br>
                   Evaluator: Sue Sunbury<br>
 
-                  <funding-acknowledgment class="my-3"></funding-acknowledgment>
+                  <funding-acknowledgement class="my-3"></funding-acknowledgement>
                 </v-card-text>
               </v-card>
             </v-dialog>
@@ -1845,11 +1847,6 @@ a {
   }
 }
 
-*:focus-visible {
-  outline: 2px solid magenta;
-
-}
-
 #icons-container > a[href="https://worldwidetelescope.org/home/"] {
   display: none;
 }
@@ -1883,6 +1880,15 @@ i.mdi-menu-down {
   color: var(--smithsonian-blue);
 }
 
+// From Sara Soueidan (https://www.sarasoueidan.com/blog/focus-indicators/) & Erik Kroes (https://www.erikkroes.nl/blog/the-universal-focus-state/)
+:focus-visible,
+button:focus-visible,
+.focus-visible,
+.v-selection-control--focus-visible .v-selection-control__input {
+  outline: 9px double white !important;
+  box-shadow: 0 0 0 6px black !important;
+  border-radius: .125rem;
+}
 
 
 //  mobile styles

diff --git a/src/main.ts b/src/main.ts
@@ -1,6 +1,6 @@
 import Vue, { createApp } from "vue";
 
-import { FundingAcknowledgment, IconButton, CreditLogos } from "@cosmicds/vue-toolkit";
+import { FundingAcknowledgement, IconButton, CreditLogos } from "@cosmicds/vue-toolkit";
 import LocationSearch from "./LocationSearch.vue";
 import TempoLite from "./TempoLite.vue";
 import Colorbar from './ColorBar.vue';
@@ -64,7 +64,7 @@ createApp(TempoLite, {})
   // Components
   .component('font-awesome-icon', FontAwesomeIcon)
   .component('icon-button', IconButton)
-  .component('funding-acknowledgment', FundingAcknowledgment)
+  .component('funding-acknowledgement', FundingAcknowledgement)
   .component('credit-logos', CreditLogos)
   .component('colorbar', Colorbar)
   .component('location-search', LocationSearch)