From 100e12f3ac21eafc1b7568b523fe6d77a4a25922 Mon Sep 17 00:00:00 2001
From: AndrewRoberts1 <andy.direct101@gmail.com>
Date: Tue, 23 Dec 2025 11:56:35 +0000
Subject: [PATCH 01/11] refactor(headers): improve headers accessibility by not
 skipping levels

Closes: #54
---
 src/components/HomeStats.vue                 | 44 ++++++++++----------
 src/components/ReviewUnitChanges.vue         | 10 ++---
 src/components/SidebarFilter.vue             |  2 +-
 src/components/UnitScores.vue                |  4 +-
 src/components/admin/GuidanceView.vue        |  4 +-
 src/components/modals/BulkEditScoreModal.vue | 10 +++--
 src/components/modals/ManageUserModal.vue    |  6 +--
 src/components/rescore/EditRescoreView.vue   |  4 +-
 src/components/rescore/ManageRescoreView.vue |  4 +-
 src/components/rescore/ReviewRescoreView.vue |  2 +-
 src/views/AboutView.vue                      |  8 ++--
 src/views/AccountView.vue                    |  6 +--
 src/views/AdminView.vue                      |  2 +-
 src/views/HeaderView.vue                     |  2 +-
 src/views/HelpView.vue                       |  2 +-
 src/views/HomeView.vue                       | 12 +++---
 src/views/LoginView.vue                      | 10 ++---
 src/views/ReportsView.vue                    |  6 +--
 src/views/UnitAssignmentManagement.vue       |  2 +-
 src/views/UserManagement.vue                 |  2 +-
 src/views/ViewUnit.vue                       | 16 ++++---
 21 files changed, 82 insertions(+), 76 deletions(-)

diff --git a/src/components/HomeStats.vue b/src/components/HomeStats.vue
index 2b1fbed..a77a2bf 100644
--- a/src/components/HomeStats.vue
+++ b/src/components/HomeStats.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="boader-header">
-    <p class="h2-style boader-header-title">Statistics</p>
+    <h2 class="h2-style boader-header-title">Statistics</h2>
   </div>
   *Not live data
   <div v-if="currentUser.level == 1" class="row">
@@ -18,37 +18,37 @@
     </div>
     <div class="col-md-4 stats-summary">
       <div class="stats-card">
-        <p class="h4-style">Units Count:</p>
-        <p class="h4-style">{{ stats.total_units }}</p>
+        <h4 class="h4-style">Units Count:</h4>
+        <h4 class="h4-style">{{ stats.total_units }}</h4>
       </div>
       <div class="stats-card">
-        <p class="h4-style">Units Count:</p>
-        <p class="h4-style">{{ stats.total_units }}</p>
+        <h4 class="h4-style">Units Count:</h4>
+        <h4 class="h4-style">{{ stats.total_units }}</h4>
       </div>
     </div>
   </div>
   <div v-if="currentUser.level == 2" class="row">
     <div class="stats-numbers">
       <div class="stats-card">
-        <p class="h4-style">Last Rescored:</p>
-        <p class="h4-style">{{ stats.last_rescored_formatted }}</p>
+        <h4 class="h4-style">Last Rescored:</h4>
+        <h4 class="h4-style">{{ stats.last_rescored_formatted }}</h4>
       </div>
       <div class="stats-card">
-        <p class="h4-style">Assigned Units:</p>
-        <p class="h4-style">{{ stats.unit_count }}</p>
+        <h4 class="h4-style">Assigned Units:</h4>
+        <h4 class="h4-style">{{ stats.unit_count }}</h4>
       </div>
       <div class="stats-card">
-        <p class="h4-style">Last Rescored:</p>
-        <p class="h4-style">{{ stats.last_rescored_formatted }}</p>
+        <h4 class="h4-style">Last Rescored:</h4>
+        <h4 class="h4-style">{{ stats.last_rescored_formatted }}</h4>
       </div>
       <div class="stats-card">
-        <p class="h4-style">Your Unit Count:</p>
-        <p class="h4-style">{{ stats.unit_count }}</p>
+        <h4 class="h4-style">Your Unit Count:</h4>
+        <h4 class="h4-style">{{ stats.unit_count }}</h4>
       </div>
     </div>
     <div class="row">
       <div class="col-md-9 stats-chart">
-        <Bubble id="my-chart-id" :options="chart_options" :data="chart_data" />
+        <Bubble id="my-chart-id" :oh4tions="chart_options" :data="chart_data" />
       </div>
       <div class="col-md-3 stats-pie">
         <Pie :data="pie_one" :options="chartOptions" />
@@ -59,20 +59,20 @@
   <div v-if="currentUser.level == 3" class="row">
     <div class="stats-numbers">
       <div class="stats-card">
-        <p class="h4-style">Division Units:</p>
-        <p class="h4-style">{{ 200 }}</p>
+        <h4 class="h4-style">Division Units:</h4>
+        <h4 class="h4-style">{{ 200 }}</h4>
       </div>
       <div class="stats-card">
-        <p class="h4-style">Rescored this Year:</p>
-        <p class="h4-style">{{ 40 + ' (20%)' }}</p>
+        <h4 class="h4-style">Rescored this Year:</h4>
+        <h4 class="h4-style">{{ 40 + ' (20%)' }}</h4>
       </div>
       <div class="stats-card">
-        <p class="h4-style">Left to Rescore:</p>
-        <p class="h4-style">{{ 160 + ' (80%)' }}</p>
+        <h4 class="h4-style">Left to Rescore:</h4>
+        <h4 class="h4-style">{{ 160 + ' (80%)' }}</h4>
       </div>
       <div class="stats-card">
-        <p class="h4-style">Deadline:</p>
-        <p class="h4-style">{{ '2026-04-01' }}</p>
+        <h4 class="h4-style">Deadline:</h4>
+        <h4 class="h4-style">{{ '2026-04-01' }}</h4>
       </div>
     </div>
     <div class="row">
diff --git a/src/components/ReviewUnitChanges.vue b/src/components/ReviewUnitChanges.vue
index bef8c5b..1dfa202 100644
--- a/src/components/ReviewUnitChanges.vue
+++ b/src/components/ReviewUnitChanges.vue
@@ -33,7 +33,7 @@
             "
             class="change-container"
           >
-            <p class="h4-style">Metrics</p>
+            <h2 class="h4-style">Metrics</h2>
             <div
               v-for="(metric, index) in edited_unit.metric_json.filter(
                 (metric) => metric.is_draft,
@@ -57,21 +57,21 @@
             v-if="edited_unit.unit_comment && edited_unit.unit_comment_is_draft"
             class="change-container"
           >
-            <p class="h4-style">Unit Comment</p>
+            <h2 class="h4-style">Unit Comment</h2>
             <p class="change-item">{{ edited_unit.unit_comment }}</p>
           </div>
           <div
             v-if="edited_unit.editedRanks && edited_unit.editedRanks"
             class="change-container"
           >
-            <p class="h4-style">Scores</p>
+            <h2 class="h4-style">Scores</h2>
             <div
               v-for="(crit, index) in edited_unit.editedRanks"
               :key="index"
               class="change-item"
             >
               <div v-if="crit.some((rank) => rank.is_draft)">
-                <p class="h5-style">
+                <h3 class="h5-style">
                   {{
                     criterion.find(
                       (criteria) =>
@@ -85,7 +85,7 @@
                         crit[0].criterion_id == criteria.criterion_id,
                     ).criterion_name
                   }}
-                </p>
+                </h3>
                 <div class="changed-container">
                   <div
                     v-for="(rank, rankIndex) in crit"
diff --git a/src/components/SidebarFilter.vue b/src/components/SidebarFilter.vue
index 5076fd7..f71dd2d 100644
--- a/src/components/SidebarFilter.vue
+++ b/src/components/SidebarFilter.vue
@@ -54,7 +54,7 @@
     </div>
     <div v-if="!is_collapsed">
       <div :class="column_direction ? 'filters-column' : 'filters-row'">
-        <p class="h4-style" v-if="!minimal">Filters</p>
+        <h2 class="h4-style" v-if="!minimal">Filters</h2>
         <zoa-input
           v-if="show_filters.includes('show_own')"
           zoa-type="checkbox"
diff --git a/src/components/UnitScores.vue b/src/components/UnitScores.vue
index dacee35..e2520e2 100644
--- a/src/components/UnitScores.vue
+++ b/src/components/UnitScores.vue
@@ -2,12 +2,12 @@
   <div v-if="rescore && !bulk_edit" class="unit-header">
     <!-- Unit Tile and link to unit -->
     <div class="unit-link-container">
-      <p
+      <h2
         class="h4-style unit-link"
         @click="navigateUnit(unit.collection_unit_id)"
       >
         {{ unit.unit_name }}
-      </p>
+      </h2>
     </div>
     <!-- Button for managing whole units complete status -->
     <zoa-button
diff --git a/src/components/admin/GuidanceView.vue b/src/components/admin/GuidanceView.vue
index 56e191b..246c4a4 100644
--- a/src/components/admin/GuidanceView.vue
+++ b/src/components/admin/GuidanceView.vue
@@ -35,7 +35,7 @@
           <!-- Pop out of the recordings -->
           <div v-if="guidance.recording_url">
             <div class="pointer" @click="show_recording = !show_recording">
-              <div class="h5-style">
+              <h3 class="h5-style">
                 <strong>
                   {{
                     show_recording
@@ -49,7 +49,7 @@
                     "
                   ></i>
                 </strong>
-              </div>
+              </h3>
             </div>
             <transition name="fade">
               <div v-if="show_recording" class="row comments-list">
diff --git a/src/components/modals/BulkEditScoreModal.vue b/src/components/modals/BulkEditScoreModal.vue
index eb4f081..ebbf905 100644
--- a/src/components/modals/BulkEditScoreModal.vue
+++ b/src/components/modals/BulkEditScoreModal.vue
@@ -98,7 +98,7 @@
                       edited_unit.metric_json.length > 0
                     "
                   >
-                    <p class="h4-style indent">Metrics</p>
+                    <h4 class="h4-style indent">Metrics</h4>
                     <div
                       v-for="(metric, index) in edited_unit.metric_json"
                       :key="index"
@@ -116,7 +116,7 @@
                     </div>
                   </div>
                   <div v-if="edited_unit.unit_comment">
-                    <p class="h4-style">Unit Comment</p>
+                    <h4 class="h4-style">Unit Comment</h4>
                     <p>{{ edited_unit.unit_comment }}</p>
                   </div>
                   <div
@@ -125,12 +125,14 @@
                       edited_unit.ranks_json.length > 0
                     "
                   >
-                    <p class="h4-style indent">Scores</p>
+                    <h4 class="h4-style indent">Scores</h4>
                     <div
                       v-for="(criterion, index) in edited_unit.ranks_json"
                       :key="index"
                     >
-                      <p class="h5-style">{{ criterion[0].criterion_name }}</p>
+                      <h5 class="h5-style">
+                        {{ criterion[0].criterion_name }}
+                      </h5>
                       <div class="changed-container">
                         <div
                           v-for="(rank, rankIndex) in criterion"
diff --git a/src/components/modals/ManageUserModal.vue b/src/components/modals/ManageUserModal.vue
index 2cefe7a..0b4b4f7 100644
--- a/src/components/modals/ManageUserModal.vue
+++ b/src/components/modals/ManageUserModal.vue
@@ -144,7 +144,7 @@
           <zoa-button label="Back" @click="mode = 'view'" class="back-btn" />
         </div>
         <div v-show="mode == 'role'">
-          <p class="h4-style">Change Role</p>
+          <h2 class="h4-style">Change Role</h2>
           <p>Please select what their new role should be.</p>
           <div class="text-left assigned-units-editor">
             <zoa-input
@@ -228,7 +228,7 @@
           </div>
         </div>
         <div class="show-box" v-show="mode == 'units'">
-          <p class="h4-style">Change Assigned Units</p>
+          <h2 class="h4-style">Change Assigned Units</h2>
           <p>
             Please select the units that should be assigned to this user, this
             allows them to edit said units. Please note you cannot unassign
@@ -248,7 +248,7 @@
             />
           </div>
           <zoa-button label="Save Changes" @click="saveAssignedUnits" />
-          <p class="h4-style margin-top">Change Responsible Units</p>
+          <h2 class="h4-style margin-top">Change Responsible Units</h2>
           <p>
             Changing the units this user is responsible for can be done per unit
             in the 'Manage Units Permissions' Page.
diff --git a/src/components/rescore/EditRescoreView.vue b/src/components/rescore/EditRescoreView.vue
index 9cae962..b9c81be 100644
--- a/src/components/rescore/EditRescoreView.vue
+++ b/src/components/rescore/EditRescoreView.vue
@@ -3,10 +3,10 @@
     <div class="row rescore-helper-container">
       <!-- Rescore Details -->
       <div class="col-md-4 unit-rescore-progress" v-if="units.length > 0">
-        <p class="h4-style progress-msg">
+        <h1 class="h4-style progress-msg">
           Units completed: {{ countUnitsCompleted(units) }} /
           {{ units.length }}
-        </p>
+        </h1>
         <RoundProgressBar
           :progress="(countUnitsCompleted(units) / units.length) * 100"
         />
diff --git a/src/components/rescore/ManageRescoreView.vue b/src/components/rescore/ManageRescoreView.vue
index 3123a77..a946ace 100644
--- a/src/components/rescore/ManageRescoreView.vue
+++ b/src/components/rescore/ManageRescoreView.vue
@@ -3,7 +3,7 @@
     v-if="Object.keys(open_rescore).length && !is_loading"
     class="rescore-open"
   >
-    <p class="h5-style">Rescore Open:</p>
+    <h1 class="h5-style">Rescore Open:</h1>
     <p>Started : {{ open_rescore.created_at }}</p>
     <zoa-button
       label="Close Rescore and Discard Changes"
@@ -11,7 +11,7 @@
     />
   </div>
   <div v-else-if="!is_loading" class="rescore-closed">
-    <p class="h5-style">Rescore Status:</p>
+    <h1 class="h5-style">Rescore Status:</h1>
     <p>
       There is currently no rescore open - please select units and start rescore
       below
diff --git a/src/components/rescore/ReviewRescoreView.vue b/src/components/rescore/ReviewRescoreView.vue
index 5fb83a8..282cea7 100644
--- a/src/components/rescore/ReviewRescoreView.vue
+++ b/src/components/rescore/ReviewRescoreView.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="!success">
-    <p class="h2-style text-center">Review Rescore Changes</p>
+    <h2 class="h2-style text-center">Review Rescore Changes</h2>
     <p>
       Please review all of the changes below and confirm before submitting them.
       These changes cannot be undone.
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index df20b0d..efdece1 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -3,7 +3,7 @@
 <template>
   <div class="main-page">
     <div class="main-header">
-      <p class="h2-style">What is Join the Dots?</p>
+      <h2 class="h2-style">What is Join the Dots?</h2>
       <p>
         Join the Dots (JTD) is a cross–disciplinary collections assessment
         framework. It is based on a methodology called ‘Move the Dots’, which
@@ -12,7 +12,7 @@
         across 4 assessment categories: Condition, Importance, Information, and
         Outreach. These categories are divided into 17 more detailed criteria.
       </p>
-      <p class="h2-style">Why has Join the Dots been implemented?</p>
+      <h2 class="h2-style">Why has Join the Dots been implemented?</h2>
       <p>
         The Natural History Museum has a responsibility to provide the best
         possible care and access to its collections. The development and
@@ -25,7 +25,7 @@
         planning, particularly at large museums, whilst setting standards and
         measuring improvements where possible.
       </p>
-      <p class="h2-style">Join the Dots - User Manual</p>
+      <h2 class="h2-style">Join the Dots - User Manual</h2>
       <p>
         <a
           href="https://naturalhistorymuseum.sharepoint.com/sites/Intranet/Projects/digital/join-the-dots/Shared%20Documents/Join%20the%20Dots%20User%20Manual.pdf"
@@ -33,7 +33,7 @@
           >User Manual</a
         >
       </p>
-      <p class="h2-style">Cabinet Scoring Document</p>
+      <h2 class="h2-style">Cabinet Scoring Document</h2>
       <p>
         <a
           href="https://naturalhistorymuseum.sharepoint.com/sites/Intranet/Projects/digital/join-the-dots/Shared%20Documents/Cabinetry%20Scoring%20Document.pdf"
diff --git a/src/views/AccountView.vue b/src/views/AccountView.vue
index 770df54..aa6f478 100644
--- a/src/views/AccountView.vue
+++ b/src/views/AccountView.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="account-page">
     <OverlayMessage />
-    <p class="h1-style">Account</p>
+    <h1 class="h1-style">Account</h1>
     <div v-if="currentUser" class="content">
       <div class="account-section">
-        <p class="h2-style">User Details</p>
+        <h2 class="h2-style">User Details</h2>
         <div class="account-fields-box">
           <div class="account-field">
             <zoa-input
@@ -136,7 +136,7 @@
         </div>
       </div>
       <div v-if="role_id >= 3" class="account-section">
-        <p class="h2-style">Manager Actions</p>
+        <h2 class="h2-style">Manager Actions</h2>
         <div class="manager-actions">
           <zoa-button
             label="Manage User Permissions"
diff --git a/src/views/AdminView.vue b/src/views/AdminView.vue
index efc90ba..74b825b 100644
--- a/src/views/AdminView.vue
+++ b/src/views/AdminView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="main-page">
     <div class="main-header">
-      <p class="h1-style">Admin</p>
+      <h1 class="h1-style">Admin</h1>
       <TopTabs
         :tabs="page_data.sort((a, b) => a.section_id - b.section_id)"
         :active_tab="active_tab"
diff --git a/src/views/HeaderView.vue b/src/views/HeaderView.vue
index 44a3f2b..f1390fb 100644
--- a/src/views/HeaderView.vue
+++ b/src/views/HeaderView.vue
@@ -10,7 +10,7 @@ import NavLinks from '../components/NavLinks.vue';
         <img alt="NHM logo" class="logo" src="@/assets/nhm_white_logo.png" />
       </button>
       <button @click="navigateHome" class="icon-btn">
-        <p class="h1-style title">Join the Dots</p>
+        <h1 class="h1-style title">Join the Dots</h1>
       </button>
       <!-- Login / Account Buttons -->
       <div class="account-header">
diff --git a/src/views/HelpView.vue b/src/views/HelpView.vue
index 5a2e114..5bf3d0e 100644
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="main-page">
     <div class="main-header" v-if="page_data.length > 0">
-      <p class="h2-style">Help / Info</p>
+      <h2 class="h2-style">Help / Info</h2>
       <TopTabs
         :tabs="page_data"
         :active_tab="active_tab"
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 46c7ac9..35d4b8c 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,19 +1,19 @@
 <template>
   <div class="main-page">
     <div class="main-header">
-      <p class="h1-style">Join the Dots Portal</p>
+      <h1 class="h1-style">Join the Dots Portal</h1>
       <div v-if="currentUser">
         <p v-if="currentUser.name">Welcome, {{ currentUser.name }}</p>
       </div>
       <!-- <HomeStats /> -->
     </div>
     <div class="boader-header">
-      <p class="h2-style boader-header-title">Actions</p>
+      <h2 class="h2-style boader-header-title">Actions</h2>
     </div>
     <b-row class="home-cards">
       <div v-if="currentUser.level > 1" class="home-card col-md-4">
         <i class="bi bi-clipboard-check card-icon"></i>
-        <p class="h2-style">Rescore</p>
+        <h2 class="h2-style">Rescore</h2>
         <p>Perform a rescore on your assigned units.</p>
         <zoa-button
           label="Rescore"
@@ -23,7 +23,7 @@
       </div>
       <div v-if="currentUser.level == 1" class="home-card col-md-4">
         <i class="bi bi-file-earmark card-icon"></i>
-        <p class="h2-style">About</p>
+        <h2 class="h2-style">About</h2>
         <p>Understand the JtD process further</p>
         <zoa-button
           label="About"
@@ -33,7 +33,7 @@
       </div>
       <div class="home-card col-md-4">
         <i class="bi bi-table card-icon"></i>
-        <p class="h2-style">View Units</p>
+        <h2 class="h2-style">View Units</h2>
         <p>
           Explore all units or just your assigned units and make changes to
           them.
@@ -46,7 +46,7 @@
       </div>
       <div class="home-card col-md-4">
         <i class="bi bi-graph-up card-icon"></i>
-        <p class="h2-style">Reports</p>
+        <h2 class="h2-style">Reports</h2>
         <p>
           Generate reports on your assigned units or whole division's
           performance.
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 036c109..6aae6ff 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="main-page">
     <div class="main-header">
-      <p class="h1-style">Login</p>
+      <h1 class="h1-style">Login</h1>
     </div>
     <div v-if="currentUser" class="content">
       <p>You are already logged in</p>
@@ -18,20 +18,20 @@
     </div>
   </div>
 
-  <p v-if="APP_ENV == 'qa'" class="h5-style temp-warning env-warning">
+  <h2 v-if="APP_ENV == 'qa'" class="h5-style temp-warning env-warning">
     <SmallMessages
       message_type="warning"
       message_text="User Acceptance Testing is now concluded and this environment may not
     function as expected
     ."
     />
-  </p>
-  <p v-if="APP_ENV == 'dev'" class="h5-style temp-warning env-warning">
+  </h2>
+  <h2 v-if="APP_ENV == 'dev'" class="h5-style temp-warning env-warning">
     <SmallMessages
       message_type="warning"
       message_text="This environment is dev."
     />
-  </p>
+  </h2>
 </template>
 
 <script>
diff --git a/src/views/ReportsView.vue b/src/views/ReportsView.vue
index d28b765..1354469 100644
--- a/src/views/ReportsView.vue
+++ b/src/views/ReportsView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="main-page">
     <div class="main-header">
-      <p class="h1-style">Reports</p>
+      <h1 class="h1-style">Reports</h1>
       <p>Coming soon...</p>
       <p>For now, use the following link</p>
       <a
@@ -9,7 +9,7 @@
         target="_blank"
         >Power Bi Reports</a
       >
-      <p class="h1-style">Exports</p>
+      <h1 class="h1-style">Exports</h1>
       <div class="row">
         <p>Coming soon...</p>
         <!-- <div class="col-md-4">
@@ -157,7 +157,7 @@ export default {
 <!--
 <template>
   <div>
-    <p class="h2-style">Power BI Embedded Report</p>
+    <h2 class="h2-style">Power BI Embedded Report</h2>
     <div ref="reportContainer" style="width: 800px; height: 600px"></div>
   </div>
 </template>
diff --git a/src/views/UnitAssignmentManagement.vue b/src/views/UnitAssignmentManagement.vue
index b8882ca..a2dbecd 100644
--- a/src/views/UnitAssignmentManagement.vue
+++ b/src/views/UnitAssignmentManagement.vue
@@ -2,7 +2,7 @@
   <OverlayMessage />
   <div class="main-header">
     <div class="">
-      <p class="h1-style">Manage Units Permissions</p>
+      <h1 class="h1-style">Manage Units Permissions</h1>
       <p>Manage who can edit units under you.</p>
     </div>
   </div>
diff --git a/src/views/UserManagement.vue b/src/views/UserManagement.vue
index ed894f6..f315ebe 100644
--- a/src/views/UserManagement.vue
+++ b/src/views/UserManagement.vue
@@ -2,7 +2,7 @@
   <OverlayMessage />
   <div class="main-header">
     <div class="">
-      <p class="h1-style">Manage User Permissions</p>
+      <h1 class="h1-style">Manage User Permissions</h1>
       <p>Manage the role and permissions of users in your division</p>
     </div>
   </div>
diff --git a/src/views/ViewUnit.vue b/src/views/ViewUnit.vue
index 3090df8..3191664 100644
--- a/src/views/ViewUnit.vue
+++ b/src/views/ViewUnit.vue
@@ -24,7 +24,7 @@
         v-if="((unit && unit_id) || !add_unit_mode) && !unit.draft_unit"
       >
         <div class="col-md-4">
-          <p class="h1-style">View{{ allow_edit ? ' / Edit' : '' }} Unit</p>
+          <h1 class="h1-style">View{{ allow_edit ? ' / Edit' : '' }} Unit</h1>
           <p>Unit ID: {{ unit_id }}</p>
         </div>
         <div class="col-md-8" v-if="allow_edit && currentUser.role_id > 1">
@@ -36,12 +36,12 @@
       </div>
       <div v-else-if="add_unit_mode || unit.draft_unit" class="row">
         <div class="col-md-6">
-          <p class="h1-style">
+          <h1 class="h1-style">
             {{ unit.draft_unit ? 'Edit Draft Unit' : 'Add New Unit' }}
-          </p>
+          </h1>
           <p>
             Please fill out all required units (
-            <span style="color: red">*</span>
+            <span class="required-tag">*</span>
             ) and the scoring page to create this unit.
           </p>
         </div>
@@ -93,7 +93,9 @@
                   v-for="sub in section.sub_sections"
                   :key="sub.sub_section_id"
                 >
-                  <p class="h4-style subheading">{{ sub.sub_section_name }}</p>
+                  <h2 class="h4-style subheading">
+                    {{ sub.sub_section_name }}
+                  </h2>
                   <div
                     v-if="sub.fields && sub.fields.length > 0"
                     class="fields-box"
@@ -144,6 +146,7 @@
                         <zoa-button
                           class="remove-btn"
                           @click="removeAllEditors()"
+                          aria-label="Remove All Editors"
                         >
                           Remove All Editors
                           <i class="bi bi-x-lg"></i>
@@ -183,6 +186,7 @@
                           <zoa-button
                             class="remove-btn"
                             @click="removeEditor(user_id)"
+                            aria-label="Remove Editor"
                           >
                             <i class="bi bi-x-lg"></i>
                           </zoa-button>
@@ -581,7 +585,7 @@ export default {
 }
 .remove-btn {
   background-color: #ff5957 !important;
-  color: white !important ;
+  color: black !important ;
 }
 
 .editor-title {

From 6c765980856519c1130829c64d0dd7f01a86c3d4 Mon Sep 17 00:00:00 2001
From: AndrewRoberts1 <andy.direct101@gmail.com>
Date: Fri, 9 Jan 2026 11:53:51 +0000
Subject: [PATCH 02/11] test(accessibility-tests): adds accessibility tests ci

Closes: #73
---
 .github/workflows/accessibility.yml |  50 ++++++++
 .gitignore                          |   4 +
 package-lock.json                   |  88 ++++++++++++++
 package.json                        |   2 +
 playwright.config.js                |  19 +++
 server/__init__.py                  |  12 +-
 server/config.py                    |  16 +++
 server/register_routes.py           |  13 +-
 server/routes/auth.py               |  28 +++--
 server/routes/auth_test.py          |  53 ++++++++
 src/router/router.js                | 182 ++++++++++++++--------------
 tests/a11y.spec.js                  |  39 ++++++
 tests/auth.setup.js                 |  12 ++
 tests/global-setup.js               |  20 +++
 14 files changed, 433 insertions(+), 105 deletions(-)
 create mode 100644 .github/workflows/accessibility.yml
 create mode 100644 playwright.config.js
 create mode 100644 server/routes/auth_test.py
 create mode 100644 tests/a11y.spec.js
 create mode 100644 tests/auth.setup.js
 create mode 100644 tests/global-setup.js

diff --git a/.github/workflows/accessibility.yml b/.github/workflows/accessibility.yml
new file mode 100644
index 0000000..cd9aa5a
--- /dev/null
+++ b/.github/workflows/accessibility.yml
@@ -0,0 +1,50 @@
+name: Accessibility Tests
+
+on:
+  pull_request:
+  push:
+    # branches: [main, dev]
+  workflow_dispatch:
+
+jobs:
+  a11y:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Setup Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+
+      - name: Install backend deps
+        run: pip install -r server/requirements.txt
+
+      - name: Install frontend deps
+        run: npm ci
+
+      - name: Build frontend
+        run: npm run build
+
+      - name: Start Flask backend
+        env:
+          # Set testing environment variables
+          CI: 'true'
+          FLASK_ENV: testing
+        run: |
+          python -m server.run &
+          sleep 5
+
+      - name: Start frontend
+        run: |
+          npm run preview &
+          sleep 5
+
+      - name: Run Playwright accessibility tests
+        run: npx playwright test
diff --git a/.gitignore b/.gitignore
index 26828c9..4c3c646 100644
--- a/.gitignore
+++ b/.gitignore
@@ -49,3 +49,7 @@ db-changes
 
 
 public/config.json
+auth.json
+# Playwright output
+test-results/
+playwright-report/
diff --git a/package-lock.json b/package-lock.json
index 5670e24..6227c64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,7 +35,9 @@
         "vue-tsc": "^2.2.10"
       },
       "devDependencies": {
+        "@axe-core/playwright": "^4.11.0",
         "@eslint/js": "^9.14.0",
+        "@playwright/test": "^1.57.0",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vitejs/plugin-vue-jsx": "^4.1.1",
         "eslint": "^9.14.0",
@@ -69,6 +71,19 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@axe-core/playwright": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.11.0.tgz",
+      "integrity": "sha512-70vBT/Ylqpm65RQz2iCG2o0JJCEG/WCNyefTr2xcOcr1CoSee60gNQYUMZZ7YukoKkFLv26I/jjlsvwwp532oQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "axe-core": "~4.11.0"
+      },
+      "peerDependencies": {
+        "playwright-core": ">= 1.0.0"
+      }
+    },
     "node_modules/@azure/msal-browser": {
       "version": "4.15.0",
       "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-4.15.0.tgz",
@@ -1412,6 +1427,22 @@
         "node": "^14.16.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.57.0.tgz",
+      "integrity": "sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.57.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.29",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -2705,6 +2736,16 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "license": "MIT"
     },
+    "node_modules/axe-core": {
+      "version": "4.11.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.1.tgz",
+      "integrity": "sha512-BASOg+YwO2C+346x3LZOeoovTIoTrRqEsqMa6fmfAV0P+U9mFr9NsyOEpiYvFjbc64NMrSswhV50WdXzdb/Z5A==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/axios": {
       "version": "1.12.0",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.0.tgz",
@@ -5509,6 +5550,53 @@
         "pathe": "^1.1.2"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.57.0.tgz",
+      "integrity": "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.57.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.57.0.tgz",
+      "integrity": "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.49",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
diff --git a/package.json b/package.json
index 50e411b..c98623d 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,9 @@
     "vue-tsc": "^2.2.10"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.11.0",
     "@eslint/js": "^9.14.0",
+    "@playwright/test": "^1.57.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
     "eslint": "^9.14.0",
diff --git a/playwright.config.js b/playwright.config.js
new file mode 100644
index 0000000..1ceb1ad
--- /dev/null
+++ b/playwright.config.js
@@ -0,0 +1,19 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+
+  projects: [
+    {
+      name: 'setup',
+      testMatch: /auth\.setup\.js/,
+    },
+    {
+      name: 'chromium',
+      use: {
+        storageState: 'auth.json',
+      },
+      dependencies: ['setup'],
+    },
+  ],
+});
diff --git a/server/__init__.py b/server/__init__.py
index 39d7e5d..6872d05 100644
--- a/server/__init__.py
+++ b/server/__init__.py
@@ -1,12 +1,11 @@
 import os
+import sys
 
 from flask import Flask
 from flask_jwt_extended import JWTManager
 
-from server.config import Config
+from server.config import get_config
 from server.extensions import cors
-from server.register_routes import register_routes
-from server.routes.auth import auth_bp
 
 
 def create_app():
@@ -14,6 +13,10 @@ def create_app():
     os.environ['OAUTHLIB_INSECURE_TRANSPORT'] = '1'
 
     app = Flask(__name__)
+
+    config_class = get_config()
+    app.config.from_object(get_config())
+
     # Allows cross-origin requests from your Vue frontend
     cors.init_app(
         app,
@@ -21,9 +24,10 @@ def create_app():
         expose_headers=['X-CSRF-TOKEN'],
         allow_headers=['Content-Type', 'X-CSRF-TOKEN'],
     )
-    app.config.from_object(Config)
 
     # Register blueprints (modular routes)
+    from server.register_routes import register_routes
+
     register_routes(app)
 
     jwt = JWTManager(app)
diff --git a/server/config.py b/server/config.py
index 8a62305..b6f4343 100644
--- a/server/config.py
+++ b/server/config.py
@@ -46,3 +46,19 @@ class Config:
 
     # Power BI Expected API Key
     EXPECTED_API_KEY = os.environ.get('EXPECTED_API_KEY')
+
+    # Testing Authentication Mode
+    TEST_AUTH_ENABLED = False
+
+
+class TestingConfig(Config):
+    TEST_AUTH_ENABLED = True
+
+
+def get_config():
+    """
+    Decide config based on environment.
+    """
+    if os.getenv('CI') == 'true':
+        return TestingConfig
+    return Config
diff --git a/server/register_routes.py b/server/register_routes.py
index 9f6a6a3..4301d50 100644
--- a/server/register_routes.py
+++ b/server/register_routes.py
@@ -1,6 +1,6 @@
 from flask import Flask
 
-from server.routes.auth import auth_bp
+from server.config import get_config
 from server.routes.data import data_bp
 from server.routes.powerbi import powerbi_bp
 from server.routes.report import report_bp
@@ -14,9 +14,18 @@ def register_routes(app: Flask):
 
     This helps in keeping the main app configuration clean and modular.
     """
-    app.register_blueprint(auth_bp, url_prefix='/api/auth')
+
     app.register_blueprint(data_bp, url_prefix='/api/data')
     app.register_blueprint(user_bp, url_prefix='/api/user')
     app.register_blueprint(report_bp, url_prefix='/api/report')
     app.register_blueprint(stats_bp, url_prefix='/api/stats')
     app.register_blueprint(powerbi_bp, url_prefix='/api/powerbi')
+    # Register test auth routes only if testing mode is enabled
+    if get_config().TEST_AUTH_ENABLED:
+        from server.routes.auth_test import auth_test_bp
+
+        app.register_blueprint(auth_test_bp, url_prefix='/api/auth_test')
+    else:
+        from server.routes.auth import auth_bp
+
+        app.register_blueprint(auth_bp, url_prefix='/api/auth')
diff --git a/server/routes/auth.py b/server/routes/auth.py
index 92527e9..66731db 100644
--- a/server/routes/auth.py
+++ b/server/routes/auth.py
@@ -19,14 +19,24 @@
 
 auth_bp = Blueprint('auth', __name__)
 
-AUTHORITY = f'https://login.microsoftonline.com/{Config.TENANT_ID}'
-
 SCOPES = []
 
-# Initialize MSAL
-msal_app = msal.ConfidentialClientApplication(
-    Config.CLIENT_ID, authority=AUTHORITY, client_credential={Config.CLIENT_SECRET}
-)
+
+def get_msal_app():
+    """
+    Lazily create the MSAL app only when Azure auth is actually used.
+    """
+    if app.config.get('TEST_AUTH_ENABLED'):
+        # Don't use Azure in CI mode
+        raise RuntimeError('MSAL should not be used in CI mode')
+
+    authority = f'https://login.microsoftonline.com/{Config.TENANT_ID}'
+
+    return msal.ConfidentialClientApplication(
+        Config.CLIENT_ID,
+        authority=authority,
+        client_credential=Config.CLIENT_SECRET,
+    )
 
 
 @auth_bp.route('/login')
@@ -34,6 +44,7 @@ def login():
     """
     Redirects user to Microsoft Login page.
     """
+    msal_app = get_msal_app()
     auth_url = msal_app.get_authorization_request_url(
         SCOPES, redirect_uri=app.config.get('REDIRECT_URI')
     )
@@ -45,6 +56,7 @@ def auth_redirect():
     """
     Handles Azure AD login redirect.
     """
+    msal_app = get_msal_app()
     code = request.args.get('code')
     if not code:
         return jsonify({'error': 'No auth code provided'}), 400
@@ -261,9 +273,7 @@ def get_user_by_email():
     """
     Look up a user in Azure AD by email address.
     """
-    # email = request.args.get('email')
-    # if not email:
-    #     return jsonify({'error': 'Email parameter is required'}), 400
+    msal_app = get_msal_app()
     data = request.get_json()
     email = data.get('email')
     if not email:
diff --git a/server/routes/auth_test.py b/server/routes/auth_test.py
new file mode 100644
index 0000000..2ec2d73
--- /dev/null
+++ b/server/routes/auth_test.py
@@ -0,0 +1,53 @@
+from flask import Blueprint, current_app, jsonify, make_response, session
+from flask_jwt_extended import (
+    create_access_token,
+    create_refresh_token,
+    set_access_cookies,
+    set_refresh_cookies,
+)
+
+auth_test_bp = Blueprint('auth_test', __name__)
+
+
+@auth_test_bp.route('/__test/login', methods=['POST'])
+def test_login():
+    if not current_app.config.get('TEST_AUTH_ENABLED'):
+        return jsonify({'error': 'Not available'}), 404
+
+    # Minimal user payload matching your real claims
+    user = {
+        'user_id': 1,
+        'display_name': 'Test User',
+        'email': 'jointhedots@nhm.ac.uk',
+        'role_id': 4,
+        'role': 'admin',
+        'division_id': None,
+        'level': 4,
+    }
+
+    jwt_token = create_access_token(
+        identity=str(user['user_id']),
+        additional_claims={
+            'display_name': user['display_name'],
+            'email': user['email'],
+            'role_id': user['role_id'],
+            'role': user['role'],
+            'division_id': user['division_id'],
+            'level': user['level'],
+        },
+    )
+
+    # response = jsonify({"msg": "ok"})
+    # set_access_cookies(response, jwt_token)
+
+    # Create refresh token
+    refresh_token = create_refresh_token(identity=str(user['user_id']))
+    # Store in session for later retrieval
+    session['jwt_token'] = jwt_token
+
+    response = make_response(jsonify({'message': 'Login successful'}))
+    # Set jwt token as access token in cookies
+    set_access_cookies(response, jwt_token)
+    set_refresh_cookies(response, refresh_token)
+
+    return response
diff --git a/src/router/router.js b/src/router/router.js
index afd4b0a..adeec93 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -13,101 +13,103 @@ import RescoreView from '../views/RescoreView.vue';
 import ViewUnit from '../views/ViewUnit.vue';
 import ViewUnits from '../views/ViewUnits.vue';
 
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: '/login',
-      name: 'login',
-      component: LoginView,
-      meta: { requiresAuth: false },
-      beforeEnter: (to, from, next) => {
-        if (currentUser.value) {
-          next('/');
-        } else {
-          next();
-        }
-      },
-    },
-    {
-      path: '/',
-      name: 'home',
-      component: HomeView,
-      meta: { requiresAuth: true },
-    },
-    {
-      path: '/about',
-      name: 'about',
-      component: AboutView,
-      meta: { requiresAuth: true },
-    },
-    {
-      path: '/reports',
-      name: 'reports',
-      component: ReportsView,
-      meta: { requiresAuth: true },
-    },
-    {
-      path: '/view-units',
-      name: 'view units',
-      component: ViewUnits,
-      meta: { requiresAuth: true },
+export const routes = [
+  {
+    path: '/login',
+    name: 'login',
+    component: LoginView,
+    meta: { requiresAuth: false },
+    beforeEnter: (to, from, next) => {
+      if (currentUser.value) {
+        next('/');
+      } else {
+        next();
+      }
     },
-    {
-      path: '/view-unit',
-      name: 'view unit',
-      component: ViewUnit,
-      meta: { requiresAuth: true },
+  },
+  {
+    path: '/',
+    name: 'home',
+    component: HomeView,
+    meta: { requiresAuth: true },
+  },
+  {
+    path: '/about',
+    name: 'about',
+    component: AboutView,
+    meta: { requiresAuth: true },
+  },
+  {
+    path: '/reports',
+    name: 'reports',
+    component: ReportsView,
+    meta: { requiresAuth: true },
+  },
+  {
+    path: '/view-units',
+    name: 'view units',
+    component: ViewUnits,
+    meta: { requiresAuth: true },
+  },
+  {
+    path: '/view-unit',
+    name: 'view unit',
+    component: ViewUnit,
+    meta: { requiresAuth: true },
+  },
+  {
+    path: '/account',
+    name: 'account',
+    component: AccountView,
+    meta: { requiresAuth: true },
+  },
+  {
+    path: '/rescore',
+    name: 'rescore',
+    component: RescoreView,
+    meta: { requiresAuth: true },
+    beforeEnter: (to, from, next) => {
+      checkAuth(2, from, next);
     },
-    {
-      path: '/account',
-      name: 'account',
-      component: AccountView,
-      meta: { requiresAuth: true },
+  },
+  {
+    path: '/admin',
+    name: 'admin',
+    component: AdminView,
+    meta: { requiresAuth: true },
+    beforeEnter: (to, from, next) => {
+      checkAuth(4, from, next);
     },
-    {
-      path: '/rescore',
-      name: 'rescore',
-      component: RescoreView,
-      meta: { requiresAuth: true },
-      beforeEnter: (to, from, next) => {
-        checkAuth(2, from, next);
-      },
+  },
+  {
+    path: '/manage-unit-permissions',
+    name: 'manage unit permissions',
+    component: AssignmentManagement,
+    meta: { requiresAuth: true },
+    beforeEnter: (to, from, next) => {
+      checkAuth(2, from, next);
     },
-    {
-      path: '/admin',
-      name: 'admin',
-      component: AdminView,
-      meta: { requiresAuth: true },
-      beforeEnter: (to, from, next) => {
-        checkAuth(4, from, next);
-      },
+  },
+  {
+    path: '/user-management',
+    name: 'user management',
+    component: UserManagement,
+    meta: { requiresAuth: true },
+    beforeEnter: (to, from, next) => {
+      checkAuth(3, from, next);
     },
-    {
-      path: '/manage-unit-permissions',
-      name: 'manage unit permissions',
-      component: AssignmentManagement,
-      meta: { requiresAuth: true },
-      beforeEnter: (to, from, next) => {
-        checkAuth(2, from, next);
-      },
-    },
-    {
-      path: '/user-management',
-      name: 'user management',
-      component: UserManagement,
-      meta: { requiresAuth: true },
-      beforeEnter: (to, from, next) => {
-        checkAuth(3, from, next);
-      },
-    },
-    {
-      path: '/help',
-      name: 'help',
-      component: HelpView,
-      meta: { requiresAuth: true },
-    },
-  ],
+  },
+  {
+    path: '/help',
+    name: 'help',
+    component: HelpView,
+    meta: { requiresAuth: true },
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: routes,
 });
 
 // Global route guard
diff --git a/tests/a11y.spec.js b/tests/a11y.spec.js
new file mode 100644
index 0000000..6e6753f
--- /dev/null
+++ b/tests/a11y.spec.js
@@ -0,0 +1,39 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test } from '@playwright/test';
+
+const PAGES = [
+  // '/login',
+  '/',
+  '/about',
+  '/reports',
+  '/view-units',
+  '/view-unit',
+  '/account',
+  '/rescore',
+  '/admin',
+  '/manage-unit-permissions',
+  '/user-management',
+  '/help',
+];
+
+// Use authenticated state for all tests
+// test.use({ storageState: 'auth.json' });
+
+// Accessibility test for each page
+for (const path of PAGES) {
+  // Starts the test from playwright with the title, including the path
+  test(`Accessibility check: ${path}`, async ({ page }) => {
+    // Navigate to the page
+    await page.goto(`http://localhost:5173${path}`);
+
+    const results = await new AxeBuilder({ page })
+      .withTags(['wcag2aa', 'wcag2a'])
+      .analyze();
+
+    if (results.violations.length > 0) {
+      console.log(results.violations);
+    }
+
+    expect(results.violations).toEqual([]);
+  });
+}
diff --git a/tests/auth.setup.js b/tests/auth.setup.js
new file mode 100644
index 0000000..fa9edf7
--- /dev/null
+++ b/tests/auth.setup.js
@@ -0,0 +1,12 @@
+import { test } from '@playwright/test';
+
+test('authenticate and save storage state', async ({ page }) => {
+  // CI-only test login endpoint
+  await page.request.post('http://127.0.0.1:5000/api/auth_test/test-login');
+
+  // Go to frontend - ensure cookies are attached to browser context
+  await page.goto('http://localhost:5173/');
+
+  // Save cookies + localStorage
+  await page.context().storageState({ path: 'auth.json' });
+});
diff --git a/tests/global-setup.js b/tests/global-setup.js
new file mode 100644
index 0000000..c37c955
--- /dev/null
+++ b/tests/global-setup.js
@@ -0,0 +1,20 @@
+import { request } from '@playwright/test';
+import fs from 'fs';
+
+export default async () => {
+  const context = await request.newContext({
+    baseURL: 'http://localhost:5000',
+  });
+
+  // Call CI-only login endpoint
+  const response = await context.post('/__test/login');
+
+  if (!response.ok()) {
+    throw new Error('CI login failed');
+  }
+
+  // Save cookies + storage
+  const storageState = await context.storageState();
+
+  fs.writeFileSync('auth.json', JSON.stringify(storageState, null, 2));
+};

From c189169f7859205e041b2c9a08bb649a71efc536 Mon Sep 17 00:00:00 2001
From: AndrewRoberts1 <andy.direct101@gmail.com>
Date: Fri, 9 Jan 2026 12:00:33 +0000
Subject: [PATCH 03/11] test: fix python dep install

---
 .github/workflows/accessibility.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/accessibility.yml b/.github/workflows/accessibility.yml
index cd9aa5a..d16e868 100644
--- a/.github/workflows/accessibility.yml
+++ b/.github/workflows/accessibility.yml
@@ -24,7 +24,8 @@ jobs:
           python-version: '3.11'
 
       - name: Install backend deps
-        run: pip install -r server/requirements.txt
+        # Install python dependencies from project.toml
+        run: cd server && pip install --no-cache-dir ./
 
       - name: Install frontend deps
         run: npm ci

From 2a721805352aebed9b6b492f9cac087a53858748 Mon Sep 17 00:00:00 2001
From: AndrewRoberts1 <andy.direct101@gmail.com>
Date: Fri, 9 Jan 2026 12:09:28 +0000
Subject: [PATCH 04/11] test(accessibility-test): add playwright browser
 install

---
 .github/workflows/accessibility.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/accessibility.yml b/.github/workflows/accessibility.yml
index d16e868..15bfc8f 100644
--- a/.github/workflows/accessibility.yml
+++ b/.github/workflows/accessibility.yml
@@ -47,5 +47,8 @@ jobs:
           npm run preview &
           sleep 5
 
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+
       - name: Run Playwright accessibility tests
         run: npx playwright test

From 8dc43b8328ca065e9c5afa9826442da1e74372f6 Mon Sep 17 00:00:00 2001
From: AndrewRoberts1 <andy.direct101@gmail.com>
Date: Fri, 9 Jan 2026 12:27:49 +0000
Subject: [PATCH 05/11] test(accessibility-tests): changed front end url to
 match preview port

---
 .github/workflows/accessibility.yml | 2 ++
 tests/a11y.spec.js                  | 5 +----
 tests/auth.setup.js                 | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/accessibility.yml b/.github/workflows/accessibility.yml
index 15bfc8f..bc3aa3f 100644
--- a/.github/workflows/accessibility.yml
+++ b/.github/workflows/accessibility.yml
@@ -46,6 +46,8 @@ jobs:
         run: |
           npm run preview &
           sleep 5
+        env:
+          FRONTEND_PORT: 4173
 
       - name: Install Playwright browsers
         run: npx playwright install --with-deps
diff --git a/tests/a11y.spec.js b/tests/a11y.spec.js
index 6e6753f..3bb99bb 100644
--- a/tests/a11y.spec.js
+++ b/tests/a11y.spec.js
@@ -16,15 +16,12 @@ const PAGES = [
   '/help',
 ];
 
-// Use authenticated state for all tests
-// test.use({ storageState: 'auth.json' });
-
 // Accessibility test for each page
 for (const path of PAGES) {
   // Starts the test from playwright with the title, including the path
   test(`Accessibility check: ${path}`, async ({ page }) => {
     // Navigate to the page
-    await page.goto(`http://localhost:5173${path}`);
+    await page.goto(`http://localhost:4173${path}`);
 
     const results = await new AxeBuilder({ page })
       .withTags(['wcag2aa', 'wcag2a'])
diff --git a/tests/auth.setup.js b/tests/auth.setup.js
index fa9edf7..6f8d127 100644
--- a/tests/auth.setup.js
+++ b/tests/auth.setup.js
@@ -5,7 +5,7 @@ test('authenticate and save storage state', async ({ page }) => {
   await page.request.post('http://127.0.0.1:5000/api/auth_test/test-login');
 
   // Go to frontend - ensure cookies are attached to browser context
-  await page.goto('http://localhost:5173/');
+  await page.goto('http://localhost:4173/');
 
   // Save cookies + localStorage
   await page.context().storageState({ path: 'auth.json' });

From 742164345cc026459b94d9bad97a28920aaa48ca Mon Sep 17 00:00:00 2001
From: AndrewRoberts1 <andy.direct101@gmail.com>
Date: Fri, 9 Jan 2026 12:39:10 +0000
Subject: [PATCH 06/11] test(accessibility-test): adding colour contrast issue
 to test accessibility tests

---
 src/assets/main.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index b7d74a5..e400df1 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -18,7 +18,8 @@
 
 :root {
   --primary-col: #333d47;
-  --secondary-col: #333d47;
+  /* --secondary-col: #333d47; */
+  --secondary-col: #87999e;
   --accent-col: #f2bab0;
   --bg-col: #f3f3f3;
   --txt-col: #191919;

From 8858d6717cf67c1da5bef78e1b498c911e532732 Mon Sep 17 00:00:00 2001
From: AndrewRoberts1 <andy.direct101@gmail.com>
Date: Fri, 9 Jan 2026 13:05:03 +0000
Subject: [PATCH 07/11] test(accessibility-test): remove test error and add
 more recent test tags - wcag22aa

---
 src/assets/main.css | 3 +--
 tests/a11y.spec.js  | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index e400df1..b7d74a5 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -18,8 +18,7 @@
 
 :root {
   --primary-col: #333d47;
-  /* --secondary-col: #333d47; */
-  --secondary-col: #87999e;
+  --secondary-col: #333d47;
   --accent-col: #f2bab0;
   --bg-col: #f3f3f3;
   --txt-col: #191919;
diff --git a/tests/a11y.spec.js b/tests/a11y.spec.js
index 3bb99bb..d42ca6a 100644
--- a/tests/a11y.spec.js
+++ b/tests/a11y.spec.js
@@ -24,7 +24,7 @@ for (const path of PAGES) {
     await page.goto(`http://localhost:4173${path}`);
 
     const results = await new AxeBuilder({ page })
-      .withTags(['wcag2aa', 'wcag2a'])
+      .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa'])
       .analyze();
 
     if (results.violations.length > 0) {

From 294b7702146ab2ea1d5f2a7f1d22e264f70a8cdf Mon Sep 17 00:00:00 2001
From: AndrewRoberts1 <andy.direct101@gmail.com>
Date: Fri, 9 Jan 2026 14:14:00 +0000
Subject: [PATCH 08/11] test(accessibility-test): adds additional standard tags
 to test

---
 tests/a11y.spec.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/tests/a11y.spec.js b/tests/a11y.spec.js
index d42ca6a..67796a1 100644
--- a/tests/a11y.spec.js
+++ b/tests/a11y.spec.js
@@ -24,7 +24,17 @@ for (const path of PAGES) {
     await page.goto(`http://localhost:4173${path}`);
 
     const results = await new AxeBuilder({ page })
-      .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa'])
+      .withTags([
+        'wcag2a',
+        'wcag2aa',
+        'wcag21a',
+        'wcag21aa',
+        'wcag22aa',
+        'best-practice',
+        'section508',
+        'RGAAv4',
+        'EN-301-549',
+      ])
       .analyze();
 
     if (results.violations.length > 0) {

From 39bd84eb3d9b297c68d3937c8f9baaf6c8ef4b99 Mon Sep 17 00:00:00 2001
From: AndrewRoberts1 <andy.direct101@gmail.com>
Date: Fri, 9 Jan 2026 15:00:28 +0000
Subject: [PATCH 09/11] test(accessibility-test): removes restriction on
 testing standards

---
 tests/a11y.spec.js | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/tests/a11y.spec.js b/tests/a11y.spec.js
index 67796a1..708eeb9 100644
--- a/tests/a11y.spec.js
+++ b/tests/a11y.spec.js
@@ -2,7 +2,6 @@ import AxeBuilder from '@axe-core/playwright';
 import { expect, test } from '@playwright/test';
 
 const PAGES = [
-  // '/login',
   '/',
   '/about',
   '/reports',
@@ -23,19 +22,7 @@ for (const path of PAGES) {
     // Navigate to the page
     await page.goto(`http://localhost:4173${path}`);
 
-    const results = await new AxeBuilder({ page })
-      .withTags([
-        'wcag2a',
-        'wcag2aa',
-        'wcag21a',
-        'wcag21aa',
-        'wcag22aa',
-        'best-practice',
-        'section508',
-        'RGAAv4',
-        'EN-301-549',
-      ])
-      .analyze();
+    const results = await new AxeBuilder({ page }).analyze();
 
     if (results.violations.length > 0) {
       console.log(results.violations);

From eaa02fae43e25ebe9fd5fbe1bc8d681eeeecdd63 Mon Sep 17 00:00:00 2001
From: AndrewRoberts1 <andy.direct101@gmail.com>
Date: Fri, 9 Jan 2026 16:02:56 +0000
Subject: [PATCH 10/11] test: removes old setup file

---
 tests/global-setup.js | 20 --------------------
 1 file changed, 20 deletions(-)
 delete mode 100644 tests/global-setup.js

diff --git a/tests/global-setup.js b/tests/global-setup.js
deleted file mode 100644
index c37c955..0000000
--- a/tests/global-setup.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { request } from '@playwright/test';
-import fs from 'fs';
-
-export default async () => {
-  const context = await request.newContext({
-    baseURL: 'http://localhost:5000',
-  });
-
-  // Call CI-only login endpoint
-  const response = await context.post('/__test/login');
-
-  if (!response.ok()) {
-    throw new Error('CI login failed');
-  }
-
-  // Save cookies + storage
-  const storageState = await context.storageState();
-
-  fs.writeFileSync('auth.json', JSON.stringify(storageState, null, 2));
-};

From 8c6b2859fc81b0b3db7ecf8769541fc1ba7c98d0 Mon Sep 17 00:00:00 2001
From: AndrewRoberts1 <andy.direct101@gmail.com>
Date: Thu, 15 Jan 2026 13:25:28 +0000
Subject: [PATCH 11/11] fix: reduced textbox autosave frequency

Closes: #108
---
 src/components/unit sections/CustomField.vue | 13 ++++++++++---
 src/views/ViewUnit.vue                       |  1 -
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/unit sections/CustomField.vue b/src/components/unit sections/CustomField.vue
index 7208f06..f3a41ff 100644
--- a/src/components/unit sections/CustomField.vue	
+++ b/src/components/unit sections/CustomField.vue	
@@ -42,6 +42,7 @@
         :label-position="field.field_type === 'checkbox' ? 'right' : 'above'"
         :config="field_config || {}"
         v-model="local_value"
+        @change="emitChange"
       />
     </div>
     <div v-if="field.dependant_fields" class="row dep-fields-container">
@@ -99,7 +100,7 @@ export default {
     field_config() {
       switch (this.field.field_type) {
         case 'textbox':
-          return { placeholder: 'Enter text here' };
+          return { placeholder: 'Enter text here', delay: 1000 };
         case 'number':
           return { placeholder: 'Enter a number' };
         case 'checkbox':
@@ -152,7 +153,6 @@ export default {
           new_val = val ? 'yes' : 'no';
         }
         // Inform parent
-        this.$emit('dataChange', this.field.field_name, new_val);
         this.$emit('updateValue', new_val);
         // Update dependent field binding
         this.setCurrentOption(new_val);
@@ -161,7 +161,14 @@ export default {
   },
   methods: {
     emitChange() {
-      this.$emit('change', this.field.field_name, this.value);
+      // Reconfigure value for checkbox
+      let new_val = this.local_value;
+      if (this.field.field_type === 'checkbox') {
+        new_val = this.local_value ? 'yes' : 'no';
+      }
+      // Emit change to parent to be saved
+      this.$emit('dataChange', this.field.field_name, new_val);
+      this.$emit('updateValue', new_val);
     },
     fetchDropdownOptions() {
       getGeneric(this.field.options_source).then((response) => {
diff --git a/src/views/ViewUnit.vue b/src/views/ViewUnit.vue
index 3191664..43b0e4c 100644
--- a/src/views/ViewUnit.vue
+++ b/src/views/ViewUnit.vue
@@ -448,7 +448,6 @@ export default {
           const resp = await submitDataGeneric('submit-field', data);
           // If the data is saved correctly
           this.store.handleChangeResponse(resp);
-          this.fetchUnitData();
         } catch (error) {
           console.error('Submission error:', error);
           this.store.addMessage(