Merge pull request #355 from IMLS/more-a11y

improve page title and main navigation for screenreaders
IMLS · Jan 11, 2023 · 7e5567a · 7e5567a
2 parents 65f32eb + c70a142
commit 7e5567a
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 8 deletions.
diff --git a/imls-frontend/src/App.vue b/imls-frontend/src/App.vue
@@ -43,6 +43,7 @@ export default {
         <div class="grid-row grid-gap">
           <main
             id="main-content"
+            aria-describedby="pageTitle"
             ref="focus"
             class="grid-col"
             tabindex="-1"

diff --git a/imls-frontend/src/views/PageAbout.vue b/imls-frontend/src/views/PageAbout.vue
@@ -20,7 +20,7 @@ export default {
 
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <h1 id="pageTitle">This is an about page</h1>
     <USWDSContent :multiline-content="multilineContent"/>
      <RouterLink
         to="/"

diff --git a/imls-frontend/src/views/PageHome.vue b/imls-frontend/src/views/PageHome.vue
@@ -18,7 +18,7 @@ export default {
 
 <template>
   <div>
-    <h1>Home</h1>
+    <h1 id="pageTitle">Home</h1>
 
     <h2> All States</h2>
 

diff --git a/imls-frontend/src/views/PageLibrary.vue b/imls-frontend/src/views/PageLibrary.vue
@@ -79,6 +79,9 @@ export default {
 
     libraryName() {
       if (this.fetchedLibraryData && this.fetchedLibraryData.libname )  return this.fetchedLibraryData.libname;
+      // remove next 2 lines when we aren't listing extra sensors we test with
+      let exampleLibrary = store.example_libraries.find(lib => lib.id == this.id);
+      if (exampleLibrary) return `${exampleLibrary.name} (example library ${this.id})`;
       return "Library " + this.id
     },
     stateAbbr() {
@@ -89,7 +92,7 @@ export default {
       if ( !this.fetchedLibraryData ) return null;
       return this.store.states[this.stateAbbr]
     },
-    breadcrumbs () {
+    breadcrumbs() {
       if ( this.fetchedLibraryData == null ) return []
       return [
          { 
@@ -151,7 +154,7 @@ export default {
       return fscsid + '-' + this.leftPadSequence(seq)
     }
   },
-  metaInfo(prefix = this.libraryName, postfix = this.stateName ) {
+  metaInfo(prefix = this.libraryName, postfix = this.stateName || 'Unknown State' ) {
     const pagePrefix = prefix + " | " + postfix;
     return {
       title: pagePrefix
@@ -163,7 +166,7 @@ export default {
 <template>
   <div>
     <USWDSBreadcrumb :crumbs=breadcrumbs />
-    <h1>{{ libraryName }}</h1>
+    <h1 id="pageTitle">{{ libraryName }}</h1>
     <div v-if="fetchedLibraryData !== null">
       <h2>{{ formatFSCSandSequence(fetchedLibraryData.fscskey, fetchedLibraryData.fscs_seq) }}</h2>
       {{ fetchedLibraryData.address }}<br>

diff --git a/imls-frontend/src/views/PageNotFound.vue b/imls-frontend/src/views/PageNotFound.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="404">
-    <h1>This is a 404 page</h1>
+    <h1 id="pageTitle">This is a 404 page</h1>
     <p>Sorry, we couldn't find anything.</p>
   </div>
 </template>

diff --git a/imls-frontend/src/views/PageSearch.vue b/imls-frontend/src/views/PageSearch.vue
@@ -60,7 +60,7 @@ export default {
 
 <template>
   <div class="search">
-    <h1>Libraries matching "{{ query }}"</h1>
+    <h1 id="pageTitle">Libraries matching "{{ query }}"</h1>
 
     <div v-if="fetchedLibraries == null || fetchedLibraries.length < 1">
       <p>Sorry, no matching libraries found. </p>

diff --git a/imls-frontend/src/views/PageState.vue b/imls-frontend/src/views/PageState.vue
@@ -92,7 +92,7 @@ export default {
 <template>
   <div>
     <USWDSBreadcrumb :crumbs=breadcrumbs />
-    <h1>{{ stateName }} Public Libraries</h1>
+    <h1 id="pageTitle">{{ stateName }} Public Libraries</h1>
     <div class="loading-area">
       <div v-if="isLoading" class="loading-indicator">
         <svg class="usa-icon usa-icon--size-9" aria-hidden="true" focusable="false" role="img">