From 9fc3e216b3c5635b6753b2d9bf85fb0483dd370c Mon Sep 17 00:00:00 2001
From: StephDriver <5330770+StephDriver@users.noreply.github.com>
Date: Thu, 14 Nov 2024 17:06:34 +0000
Subject: [PATCH 1/2] b-#4055 Front of House tables a11y updates with comments

---
 .../OLH/templates/elements/section_block.html | 39 +++++++++----------
 .../templates/elements/sections_block.html    | 13 ++++---
 .../templates/elements/sections_display.html  | 21 +++-------
 .../material/templates/journal/article.html   | 17 ++++----
 4 files changed, 40 insertions(+), 50 deletions(-)

diff --git a/src/themes/OLH/templates/elements/section_block.html b/src/themes/OLH/templates/elements/section_block.html
index 3c8ed481d5..7934605618 100644
--- a/src/themes/OLH/templates/elements/section_block.html
+++ b/src/themes/OLH/templates/elements/section_block.html
@@ -1,50 +1,47 @@
 <h3>{% trans 'Sections' %}</h3>
+{# TableA11y superflous p tags, single row of headings, very ambiguous data -> single row and column headings and make icons screen-reader compatible #}
 <table>
     <thead>
         <tr>
-            <th>
-                <p>{% trans "Section or article type" %}</p>
-            </th>
-            <th>
-                <p>{% trans "Public Submissions" %}</p>
-            </th>
-            <th>
-                <p>{% trans "Peer Reviewed" %}</p>
-            </th>
-            <th>
-                <p>{% trans "Indexed" %}</p>
-            </th>
+            <th scope="col" >{% trans "Section or article type" %}</th>
+            <th scope="col" >{% trans "Public Submissions" %}</th>
+            <th scope="col" >{% trans "Peer Reviewed" %}</th>
+            <th scope="col" >{% trans "Indexed" %}</th>
     </thead>
     <tbody>
         {% for section in sections %}
         <tr>
-            <td>
-                <p>{{ section.name }}</p>
-            </td>
+            <th scope="row" >{{ section.name }}</th>
             <td>
                 <strong>
                     {% if section.public_submissions %}
-                        <i class="fa fa-check" title="{% trans 'yes' %}"></i>
+                        <i aria-hidden="true" class="fa fa-check"></i>
+                        <span class="sr-only">{% trans 'has public submissions' %}</span>
                     {% else %}
-                        <i class="fa fa-times" title="{% trans 'no' %}"></i>
+                        <i aria-hidden="true" class="fa fa-times"></i>
+                        <span class="sr-only">{% trans 'does not have public submissions' %}</span>
                     {% endif %}
                 </strong>
             </td>
             <td>
                 <strong>
                     {% if section.number_of_reviewers > 0 %}
-                        <i class="fa fa-check" title="{% trans 'yes' %}"></i>
+                        <i aria-hidden="true" class="fa fa-check"></i>
+                        <span class="sr-only">{% trans 'is peer reviewed' %}</span>
                     {% else %}
-                        <i class="fa fa-times" title="{% trans 'no' %}"></i>
+                        <i aria-hidden="true" class="fa fa-times"></i>
+                        <span class="sr-only">{% trans 'is not peer reviewed' %}</span>
                     {% endif %}
                 </strong>
             </td>
             <td>
                 <strong>
                     {% if section.indexing %}
-                        <i class="fa fa-check" title="{% trans 'yes' %}"></i>
+                        <i aria-hidden="true" class="fa fa-check"></i>
+                        <span class="sr-only">{% trans 'is indexed' %}</span>
                     {% else %}
-                        <i class="fa fa-times" title="{% trans 'no' %}"></i>
+                        <i aria-hidden="true" class="fa fa-times"></i>
+                        <span class="sr-only">{% trans 'is not indexed' %}</span>
                     {% endif %}
                 </strong>
             </td>
diff --git a/src/themes/clean/templates/elements/sections_block.html b/src/themes/clean/templates/elements/sections_block.html
index fd76f9dd95..85d43bf4fa 100644
--- a/src/themes/clean/templates/elements/sections_block.html
+++ b/src/themes/clean/templates/elements/sections_block.html
@@ -1,25 +1,26 @@
 <h2>{% trans 'Sections' %}</h2>
 
+{# TableA11y single row headings, but very ambiguous data, should be one row and one column headings #}
 <table class="table">
     <caption>{% trans 'Sections submission information' %}</caption>
     <thead>
     <tr>
-        <th>{% trans 'Section or article type' %}</th>
-        <th>{% trans 'Public Submissions' %}</th>
-        <th>{% trans 'Peer Reviewed' %}</th>
-        <th>{% trans 'Indexed' %}</th>
+        <th scope="col">{% trans 'Section or article type' %}</th>
+        <th scope="col">{% trans 'Public Submissions' %}</th>
+        <th scope="col">{% trans 'Peer Reviewed' %}</th>
+        <th scope="col">{% trans 'Indexed' %}</th>
     </tr>
     </thead>
     <tbody>
     {% for section in sections %}
         <tr>
-            <td>{{ section.name }}</td>
+            <th scope="row">{{ section.name }}</th>
             <td>{% if section.public_submissions %}<span class="fa fa-check"> {% trans 'Yes' %}</span>{% else %}
                 <span class="fa fa-times"> {% trans 'No' %}</span>{% endif %}</td>
             <td>{% if section.number_of_reviewers > 0 %}<span class="fa fa-check"> {% trans 'Yes' %}</span>{% else %}
                 <span class="fa fa-times"> {% trans 'No' %}</span>{% endif %}</td>
             <td>{% if section.indexing %}<span class="fa fa-check"> {% trans 'Yes' %}</span>{% else %}
-                <span class="fa fa-times"> {% trans 'No' %}}</span>{% endif %}</td>
+                <span class="fa fa-times"> {% trans 'No' %}</span>{% endif %}</td>
         </tr>
         {% empty %}
     {% endfor %}
diff --git a/src/themes/material/templates/elements/sections_display.html b/src/themes/material/templates/elements/sections_display.html
index 987ff1593e..03175adfb1 100644
--- a/src/themes/material/templates/elements/sections_display.html
+++ b/src/themes/material/templates/elements/sections_display.html
@@ -1,25 +1,16 @@
+{# TableA11y superfluous paragraph tags, single row headings, but very ambiguous data, should be one row and one column headings #}
 <table class="striped responsive-table">
     <thead>
         <tr>
-            <th>
-                <p>{% trans "Section or article type" %}</p>
-            </th>
-            <th>
-                <p>{% trans "Public Submissions" %}</p>
-            </th>
-            <th>
-                <p>{% trans "Peer Reviewed" %}</p>
-            </th>
-            <th>
-                <p>{% trans "Indexed" %}</p>
-            </th>
+            <th scope="col">{% trans "Section or article type" %}</th>
+            <th scope="col">{% trans "Public Submissions" %}</th>
+            <th scope="col">{% trans "Peer Reviewed" %}</th>
+            <th scope="col">{% trans "Indexed" %}</th>
     </thead>
     <tbody>
         {% for section in sections %}
         <tr>
-            <td>
-                <p>{{ section.name }}</p>
-            </td>
+            <th scope="row">{{ section.name }}</th>
             <td>
                 <strong>
                     {% if section.public_submissions %}
diff --git a/src/themes/material/templates/journal/article.html b/src/themes/material/templates/journal/article.html
index 3283b7f9df..fb3d4c985d 100644
--- a/src/themes/material/templates/journal/article.html
+++ b/src/themes/material/templates/journal/article.html
@@ -306,52 +306,53 @@ <h4>
                     {% if article.has_publication_details %}
                     <div class="section">
                         <h4>{% trans "Publication details" %}</h4>
+                        {# TableA11y header cells in first column, ambiguous data #}
                         <table class="sidebar-table">
                             {% if article.page_range %}
                             <tr>
-                                <th>{% trans "Pages" %}</th>
+                                <th scope="row" >{% trans "Pages" %}</th>
                                 <td>{{ article.page_range }}</td>
                             </tr>
                             {% endif %}
                             {% if article.article_number %}
                             <tr>
-                                <th>{% trans "Article No." %}</th>
+                                <th scope="row" >{% trans "Article No." %}</th>
                                 <td>{{ article.article_number }}</td>
                             </tr>
                             {% endif %}
                             {% if article.publisher_name %}
                             <tr>
-                                <th>{% trans "Publisher" %}</th>
+                                <th scope="row" >{% trans "Publisher" %}</th>
                                 <td>{{ article.publisher_name }}</td>
                             </tr>
                             {% endif %}
                             {% if article.publication_title %}
                             <tr>
-                                <th>{% trans "Publication" %}</th>
+                                <th scope="row" >{% trans "Publication" %}</th>
                                 <td>{{ article.publication_title }}</td>
                             </tr>
                             {% endif %}
                             {% if article.ISSN_override %}
                             <tr>
-                                <th>{% trans "Original ISSN" %}</th>
+                                <th scope="row" >{% trans "Original ISSN" %}</th>
                                 <td>{{ article.ISSN_override}}</td>
                             </tr>
                             {% endif %}
                             {% if journal_settings.article.display_date_submitted and article.date_submitted %}
                                 <tr>
-                                    <th>{% trans "Submitted on" %}</th>
+                                    <th scope="row" >{% trans "Submitted on" %}</th>
                                     <td>{{ article.date_submitted|date:"Y-m-d" }}</td>
                                 </tr>
                             {% endif %}
                             {% if journal_settings.article.display_date_accepted and article.date_accepted %}
                                 <tr>
-                                    <th>{% trans "Accepted on" %}</th>
+                                    <th scope="row" >{% trans "Accepted on" %}</th>
                                     <td>{{ article.date_accepted|date:"Y-m-d" }}</td>
                                 </tr>
                             {% endif %}
                             {% if article.date_published or proofing %}
                             <tr>
-                                <th>{% trans "Published on" %}</th>
+                                <th scope="row" >{% trans "Published on" %}</th>
                                 <td id="article_date_published">
                                     {{ article.date_published|date:"Y-m-d" }}
                                 </td>

From 95c758a63603b11bf33c8136da50c6eadb447215 Mon Sep 17 00:00:00 2001
From: StephDriver <5330770+StephDriver@users.noreply.github.com>
Date: Thu, 14 Nov 2024 17:08:49 +0000
Subject: [PATCH 2/2] b-#4055 Front of House tables a11y update

---
 src/themes/OLH/templates/elements/section_block.html         | 1 -
 src/themes/clean/templates/elements/sections_block.html      | 1 -
 src/themes/material/templates/elements/sections_display.html | 1 -
 src/themes/material/templates/journal/article.html           | 1 -
 4 files changed, 4 deletions(-)

diff --git a/src/themes/OLH/templates/elements/section_block.html b/src/themes/OLH/templates/elements/section_block.html
index 7934605618..1ec146e517 100644
--- a/src/themes/OLH/templates/elements/section_block.html
+++ b/src/themes/OLH/templates/elements/section_block.html
@@ -1,5 +1,4 @@
 <h3>{% trans 'Sections' %}</h3>
-{# TableA11y superflous p tags, single row of headings, very ambiguous data -> single row and column headings and make icons screen-reader compatible #}
 <table>
     <thead>
         <tr>
diff --git a/src/themes/clean/templates/elements/sections_block.html b/src/themes/clean/templates/elements/sections_block.html
index 85d43bf4fa..740249aa4d 100644
--- a/src/themes/clean/templates/elements/sections_block.html
+++ b/src/themes/clean/templates/elements/sections_block.html
@@ -1,6 +1,5 @@
 <h2>{% trans 'Sections' %}</h2>
 
-{# TableA11y single row headings, but very ambiguous data, should be one row and one column headings #}
 <table class="table">
     <caption>{% trans 'Sections submission information' %}</caption>
     <thead>
diff --git a/src/themes/material/templates/elements/sections_display.html b/src/themes/material/templates/elements/sections_display.html
index 03175adfb1..ce3e21e698 100644
--- a/src/themes/material/templates/elements/sections_display.html
+++ b/src/themes/material/templates/elements/sections_display.html
@@ -1,4 +1,3 @@
-{# TableA11y superfluous paragraph tags, single row headings, but very ambiguous data, should be one row and one column headings #}
 <table class="striped responsive-table">
     <thead>
         <tr>
diff --git a/src/themes/material/templates/journal/article.html b/src/themes/material/templates/journal/article.html
index fb3d4c985d..1fa4cf47cf 100644
--- a/src/themes/material/templates/journal/article.html
+++ b/src/themes/material/templates/journal/article.html
@@ -306,7 +306,6 @@ <h4>
                     {% if article.has_publication_details %}
                     <div class="section">
                         <h4>{% trans "Publication details" %}</h4>
-                        {# TableA11y header cells in first column, ambiguous data #}
                         <table class="sidebar-table">
                             {% if article.page_range %}
                             <tr>