From 49825345b8dc9fe55c328bac55ee251e9c37d180 Mon Sep 17 00:00:00 2001
From: "Luis J. Villanueva" <villanueval@si.edu>
Date: Mon, 26 Feb 2024 08:20:08 -0500
Subject: [PATCH] Additional accessibility fixes

---
 web_app/templates/dashboard.html |  8 ++++----
 web_app/templates/file.html      | 12 ++++++------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/web_app/templates/dashboard.html b/web_app/templates/dashboard.html
index 5ce0f97..28f6280 100644
--- a/web_app/templates/dashboard.html
+++ b/web_app/templates/dashboard.html
@@ -252,7 +252,7 @@ <h4>QC Issues Found:</h4>
                   <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
                     <div class="modal-content">
                       <div class="modal-header">
-                        <h5 class="modal-title" id="previewmodal1Label">Image Preview (JPG)</h5>
+                        <h1 modal-title" id="previewmodal1Label">Image Preview (JPG)</h1>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                       </div>
                       <div class="modal-body">
@@ -271,7 +271,7 @@ <h5 class="modal-title" id="previewmodal1Label">Image Preview (JPG)</h5>
           {% elif tab == "lightbox" %}
 
               <br><br>
-                <h5>Image Previews for the Folder {{ folder_name.project_folder }}</h5>
+                <p class="fs-3">Image Previews for the Folder {{ folder_name.project_folder }}</p>
 
                   <div class="row">
                       <div class="col">
@@ -384,7 +384,7 @@ <h5>Image Previews for the Folder {{ folder_name.project_folder }}</h5>
                     ]
                 });
 
-                $('#files_table').append('<caption style="caption-side: top"><h5>Files in the Folder {{ folder_name.project_folder }}</h5></caption>');
+                $('#files_table').append('<caption style="caption-side: top"><p class="fs-3">Files in the Folder {{ folder_name.project_folder }}</p></caption>');
 
                 $('#files_table').DataTable({
                     dom: 'Bfrtip',
@@ -502,7 +502,7 @@ <h5>Image Previews for the Folder {{ folder_name.project_folder }}</h5>
 
         {% elif tab == "postprod" %}
 
-                $('#post_processing_table').append('<caption style="caption-side: top"><h5>Post-production Steps on the Files in the Folder {{ folder_name.project_folder }}</h5></caption>');
+                $('#post_processing_table').append('<caption style="caption-side: top"><p class="fs-3">Post-production Steps on the Files in the Folder {{ folder_name.project_folder }}</p></caption>');
 
                 $('#post_processing_table').DataTable({
                     dom: 'Bfrtip',
diff --git a/web_app/templates/file.html b/web_app/templates/file.html
index f01df7f..3dfa085 100644
--- a/web_app/templates/file.html
+++ b/web_app/templates/file.html
@@ -3,7 +3,7 @@
 {% block title %}Details of {{ file_details.file_name }} - DPO Collections Digitization Dashboard{% endblock %}
 
 {% block homelink %}
-    <p class="navbar-brand navtitle">Details of {{ file_details.file_name }}</p>
+    <h1 class="navbar-brand navtitle">Details of {{ file_details.file_name }}</h1>
 {% endblock %}
 
 {% block head_blocks %}
@@ -36,7 +36,7 @@
 
     <div class="row">
         <div class="col-4">
-            <h4>Image Preview:</h4>
+            <h2>Image Preview:</h2>
 
                     {% if kiosk  %}
 
@@ -67,7 +67,7 @@ <h4>Image Preview:</h4>
                       <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
                         <div class="modal-content">
                           <div class="modal-header">
-                            <h5 class="modal-title" id="checkmodalLabel">Check Details</h5>
+                            <h1 class="modal-title" id="checkmodalLabel">Check Details</h1>
                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                           </div>
                           <div class="modal-body">
@@ -87,7 +87,7 @@ <h5 class="modal-title" id="checkmodalLabel">Check Details</h5>
                 <div class="col">
 
                     <div class="card">
-                        <h5 class="card-header text-white bg-primary">File Technical Checks</h5>
+                        <h2 class="card-header text-white bg-primary">File Technical Checks</h2>
                         <div class="card-body">
                             <table class="table compact table-striped" style="width:100%">
                             <thead>
@@ -150,7 +150,7 @@ <h5 class="card-header text-white bg-primary">File Technical Checks</h5>
                     {% if file_links|length > 0 %}
                     <!-- File Links -->
                         <div class="card">
-                            <h5 class="card-header text-white bg-primary">Links related to this image</h5>
+                            <p class="fs-3 card-header text-white bg-primary">Links related to this image</p>
                             <div class="card-body">
                                 <div class="list-group">
 
@@ -192,7 +192,7 @@ <h5 class="card-header text-white bg-primary">Links related to this image</h5>
     <script type="text/javascript">
         $(document).ready( function () {
 
-            $('#file_metadata').append('<caption style="caption-side: top;"><h4>Embedded metadata in the file: {{ file_details.file_name }}</h4></caption>');
+            $('#file_metadata').append('<caption style="caption-side: top;"><p class="fs-3">Embedded metadata in the file: {{ file_details.file_name }}</p></caption>');
 
             $('#file_metadata').DataTable({
                 dom: 'Bfrtip',