fix(arpa_reporting): add main and h1 elements - axe-dev finding

usdigitalresponse · Nov 22, 2024 · 00f6f3d · 00f6f3d
1 parent 6950602
commit 00f6f3d
Show file tree

Hide file tree

Showing 13 changed files with 96 additions and 91 deletions.
diff --git a/packages/client/src/arpa_reporter/components/PageNavigation.vue b/packages/client/src/arpa_reporter/components/PageNavigation.vue
@@ -70,98 +70,99 @@
         </ul>
       </div>
     </nav>
-
-    <ul
-      v-if="loggedIn"
-      class="row nav nav-tabs mb-2"
-    >
-      <li class="nav-item">
-        <router-link
-          :class="navLinkClass('/')"
-          to="/"
-        >
-          Dashboard
-        </router-link>
-      </li>
-
-      <li class="nav-item">
-        <router-link
-          :class="navLinkClass('/uploads')"
-          to="/uploads"
-        >
-          Uploads
-        </router-link>
-      </li>
-
-      <li
-        v-if="role === 'admin'"
-        class="nav-item"
+    <main>
+      <ul
+        v-if="loggedIn"
+        class="row nav nav-tabs mb-2"
       >
-        <router-link
-          :class="navLinkClass('/agencies')"
-          to="/agencies"
+        <li class="nav-item">
+          <router-link
+            :class="navLinkClass('/')"
+            to="/"
+          >
+            Dashboard
+          </router-link>
+        </li>
+
+        <li class="nav-item">
+          <router-link
+            :class="navLinkClass('/uploads')"
+            to="/uploads"
+          >
+            Uploads
+          </router-link>
+        </li>
+
+        <li
+          v-if="role === 'admin'"
+          class="nav-item"
         >
-          Agencies
-        </router-link>
-      </li>
+          <router-link
+            :class="navLinkClass('/agencies')"
+            to="/agencies"
+          >
+            Agencies
+          </router-link>
+        </li>
 
-      <li
-        v-if="role === 'admin'"
-        class="nav-item"
-      >
-        <router-link
-          :class="navLinkClass('/subrecipients')"
-          to="/subrecipients"
+        <li
+          v-if="role === 'admin'"
+          class="nav-item"
         >
-          Subrecipients
-        </router-link>
-      </li>
+          <router-link
+            :class="navLinkClass('/subrecipients')"
+            to="/subrecipients"
+          >
+            Subrecipients
+          </router-link>
+        </li>
 
-      <li
-        v-if="role === 'admin'"
-        class="nav-item"
-      >
-        <router-link
-          :class="navLinkClass('/users')"
-          to="/users"
+        <li
+          v-if="role === 'admin'"
+          class="nav-item"
         >
-          Users
-        </router-link>
-      </li>
+          <router-link
+            :class="navLinkClass('/users')"
+            to="/users"
+          >
+            Users
+          </router-link>
+        </li>
 
-      <li
-        v-if="role === 'admin'"
-        class="nav-item"
-      >
-        <router-link
-          :class="navLinkClass('/reporting_periods')"
-          to="/reporting_periods"
+        <li
+          v-if="role === 'admin'"
+          class="nav-item"
         >
-          Reporting Periods
-        </router-link>
-      </li>
+          <router-link
+            :class="navLinkClass('/reporting_periods')"
+            to="/reporting_periods"
+          >
+            Reporting Periods
+          </router-link>
+        </li>
 
-      <li
-        v-if="role === 'admin'"
-        class="nav-item"
-      >
-        <router-link
-          :class="navLinkClass('/validation')"
-          to="/validation"
+        <li
+          v-if="role === 'admin'"
+          class="nav-item"
         >
-          Validation
-        </router-link>
-      </li>
-    </ul>
-
-    <AlertBox
-      v-for="(alert, alertId) in alerts"
-      v-bind="alert"
-      :key="alertId"
-      @dismiss="dismissAlert(alertId)"
-    />
-
-    <router-view />
+          <router-link
+            :class="navLinkClass('/validation')"
+            to="/validation"
+          >
+            Validation
+          </router-link>
+        </li>
+      </ul>
+
+      <AlertBox
+        v-for="(alert, alertId) in alerts"
+        v-bind="alert"
+        :key="alertId"
+        @dismiss="dismissAlert(alertId)"
+      />
+
+      <router-view />
+    </main>
   </div>
 </template>
 

diff --git a/packages/client/src/arpa_reporter/views/AgenciesView.spec.js b/packages/client/src/arpa_reporter/views/AgenciesView.spec.js
@@ -28,6 +28,8 @@ describe('AgenciesView.vue', () => {
     const r = wrapper.find('tbody');
     expect(r.text()).toContain('Agency 1');
     expect(r.text()).toContain('Agency 2');
+    const header = wrapper.find('h1');
+    expect(header.text()).toContain('Agencies');
   });
 });
 

diff --git a/packages/client/src/arpa_reporter/views/AgenciesView.vue b/packages/client/src/arpa_reporter/views/AgenciesView.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2>Agencies</h2>
+    <h1>Agencies</h1>
 
     <div class="mb-4">
       <router-link

diff --git a/packages/client/src/arpa_reporter/views/AgencyView.vue b/packages/client/src/arpa_reporter/views/AgencyView.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2>Agency</h2>
+    <h1>Agency</h1>
 
     <div
       v-if="agency === null"

diff --git a/packages/client/src/arpa_reporter/views/HomeView.vue b/packages/client/src/arpa_reporter/views/HomeView.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <h1>Dashboard</h1>
     <div class="row">
       <AlertBox
         v-if="alert"

diff --git a/packages/client/src/arpa_reporter/views/ReportingPeriodView.vue b/packages/client/src/arpa_reporter/views/ReportingPeriodView.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2>Reporting Period</h2>
+    <h1>Reporting Period</h1>
 
     <div
       v-if="reportingPeriod === null"

diff --git a/packages/client/src/arpa_reporter/views/ReportingPeriodsView.vue b/packages/client/src/arpa_reporter/views/ReportingPeriodsView.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2>Reporting Periods</h2>
+    <h1>Reporting Periods</h1>
 
     <div class="mb-4">
       <router-link

diff --git a/packages/client/src/arpa_reporter/views/SubrecipientView.vue b/packages/client/src/arpa_reporter/views/SubrecipientView.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2>Subrecipient {{ recipientId }}</h2>
+    <h1>Subrecipient {{ recipientId }}</h1>
 
     <div
       v-if="!recipient"

diff --git a/packages/client/src/arpa_reporter/views/SubrecipientsView.vue b/packages/client/src/arpa_reporter/views/SubrecipientsView.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2>Sub-recipients</h2>
+    <h1>Sub-recipients</h1>
 
     <div
       v-if="loading"

diff --git a/packages/client/src/arpa_reporter/views/UploadView.vue b/packages/client/src/arpa_reporter/views/UploadView.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <h1>Uploads</h1>
     <div class="row">
       <AlertBox
         v-if="alert"

diff --git a/packages/client/src/arpa_reporter/views/UploadsView.vue b/packages/client/src/arpa_reporter/views/UploadsView.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2>Uploads</h2>
+    <h1>Uploads</h1>
 
     <div class="row mb-4">
       <div class="col">

diff --git a/packages/client/src/arpa_reporter/views/UsersView.vue b/packages/client/src/arpa_reporter/views/UsersView.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2>Users</h2>
+    <h1>Users</h1>
     <div class="mb-4">
       <router-link
         to="/users/new"

diff --git a/packages/client/src/arpa_reporter/views/ValidationView.vue b/packages/client/src/arpa_reporter/views/ValidationView.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2>Validation</h2>
+    <h1>Validation</h1>
 
     <div class="row">
       <div class="col">