From 0f8ecfaf1c06faefdfd083906c5d9a39187dddfc Mon Sep 17 00:00:00 2001
From: Daniel Couzens <dan.couzens@epimorphics.com>
Date: Fri, 30 Aug 2024 14:05:14 +0100
Subject: [PATCH 1/6] adds messages to tab panel

---
 app/assets/stylesheets/_utilities.scss  |  2 ++
 app/javascript/components/data-view.vue | 18 +++++++++++++++---
 config/locales/cy.yml                   |  2 ++
 config/locales/en.yml                   |  2 ++
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/_utilities.scss b/app/assets/stylesheets/_utilities.scss
index a3915b3b..5802f216 100644
--- a/app/assets/stylesheets/_utilities.scss
+++ b/app/assets/stylesheets/_utilities.scss
@@ -10,6 +10,8 @@
   overflow: hidden;
   clip: rect(0 0 0 0);
   border: 0;
+  pointer-events: none;
+  user-select: none;
 }
 
 .u-full-width {
diff --git a/app/javascript/components/data-view.vue b/app/javascript/components/data-view.vue
index 570e3c15..2327006d 100644
--- a/app/javascript/components/data-view.vue
+++ b/app/javascript/components/data-view.vue
@@ -1,14 +1,17 @@
 <template lang="html">
+  <div>
   <div class='o-data-view__vue-root u-js-only'>
     <div class='o-data-view__js-options'>
       <data-view-statistics :initial-statistics='availableStatistics' :zoom='false'></data-view-statistics>
     </div>
-    <div class='o-data-view__data-display'>
+    <div role='tabpanel' aria-describedby='tabpanel-accessibility-message' class='o-data-view__data-display'>
       <el-tabs
+        role='tablist'
+        aria-describedby='tablist-accessibility-message'
         v-model='activeTab'
         @tab-click='onChangeTab'
       >
-        <el-tab-pane :label='$t("js.action.data_graph")' :name='`graphs-tab-${indicator.slug}-${theme.slug}`'>
+        <el-tab-pane :aria-describedby="'tab-message'" :label='$t("js.action.data_graph")' :name='`graphs-tab-${indicator.slug}-${theme.slug}`'>
           <data-view-graph
             :theme='theme'
             :indicator='indicator'
@@ -44,7 +47,16 @@
       </el-tabs>
     </div>
   </div>
-
+    <p id="tabpanel-accessibility-message" class="u-sr-only" aria-hidden="true">
+      {{ $t('browse.show.intro.property_type') }}
+    </p>
+    <p id="tablist-accessibility-message" class="u-sr-only" aria-hidden="true">
+      {{ $t('js.action.accessibility_tablist') }}
+    </p>
+    <p id="tab-message" class="u-sr-only"  aria-hidden="true">
+      {{ $t('js.action.accessibility_tab') }}
+    </p>
+  </div>
 </template>
 
 <script>
diff --git a/config/locales/cy.yml b/config/locales/cy.yml
index b2f94200..cf70795b 100644
--- a/config/locales/cy.yml
+++ b/config/locales/cy.yml
@@ -178,6 +178,8 @@ cy:
       print_table: "argraffu’r tabl hwn"
       download_data_as: "Lawrlwytho’r data hwn fel:"
       choose_another_location: "Dewiswch leoliad arall"
+      accessibility_tablist: "Tabiwch drwy'r tabiau canlynol: Gweler graff data, Gweler tabl data, Lawrlwythwch y data hwn a Cymharwch leoliad."
+      accessibility_tab: "Defnyddiwch y tabl data yn y tab nesaf, Gweler y tabl data, sy'n cynnwys data hygyrch."
 
     graph:
       no_data: "Mae’n flin gennym, nid yw data %{label} ar gael ar gyfer %{location}. Dewiswch leoliad gwahanol."
diff --git a/config/locales/en.yml b/config/locales/en.yml
index cc62c965..a34b9c49 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -178,6 +178,8 @@ en:
       print_table: "print this table"
       download_data_as: "Download this data as:"
       choose_another_location: "Choose another location"
+      accessibility_tablist: "Tab through the following tabs: See data graph, See data table, Download this data and Compare location."
+      accessibility_tab: "Please use the data table in the next tab, See data table, which contains accessible data."
 
     graph:
       no_data: "Sorry, there is no %{label} data available for %{location}. Please select a different location."

From bc3bd2776b4a2741fdc77155891c563c42592ee0 Mon Sep 17 00:00:00 2001
From: Daniel Couzens <dan.couzens@epimorphics.com>
Date: Mon, 2 Sep 2024 09:27:00 +0100
Subject: [PATCH 2/6] adds screenreader message to tabpanel

---
 app/javascript/components/data-view.vue | 13 +++----------
 config/locales/cy.yml                   |  3 +--
 config/locales/en.yml                   |  3 +--
 3 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/app/javascript/components/data-view.vue b/app/javascript/components/data-view.vue
index 2327006d..eb0d714e 100644
--- a/app/javascript/components/data-view.vue
+++ b/app/javascript/components/data-view.vue
@@ -6,12 +6,10 @@
     </div>
     <div role='tabpanel' aria-describedby='tabpanel-accessibility-message' class='o-data-view__data-display'>
       <el-tabs
-        role='tablist'
-        aria-describedby='tablist-accessibility-message'
         v-model='activeTab'
         @tab-click='onChangeTab'
       >
-        <el-tab-pane :aria-describedby="'tab-message'" :label='$t("js.action.data_graph")' :name='`graphs-tab-${indicator.slug}-${theme.slug}`'>
+        <el-tab-pane :label='$t("js.action.data_graph")' :name='`graphs-tab-${indicator.slug}-${theme.slug}`'>
           <data-view-graph
             :theme='theme'
             :indicator='indicator'
@@ -48,15 +46,10 @@
     </div>
   </div>
     <p id="tabpanel-accessibility-message" class="u-sr-only" aria-hidden="true">
-      {{ $t('browse.show.intro.property_type') }}
-    </p>
-    <p id="tablist-accessibility-message" class="u-sr-only" aria-hidden="true">
-      {{ $t('js.action.accessibility_tablist') }}
-    </p>
-    <p id="tab-message" class="u-sr-only"  aria-hidden="true">
-      {{ $t('js.action.accessibility_tab') }}
+      {{ $t('js.action.accessibility_tabpanel') }}
     </p>
   </div>
+
 </template>
 
 <script>
diff --git a/config/locales/cy.yml b/config/locales/cy.yml
index cf70795b..08fc972f 100644
--- a/config/locales/cy.yml
+++ b/config/locales/cy.yml
@@ -178,8 +178,7 @@ cy:
       print_table: "argraffu’r tabl hwn"
       download_data_as: "Lawrlwytho’r data hwn fel:"
       choose_another_location: "Dewiswch leoliad arall"
-      accessibility_tablist: "Tabiwch drwy'r tabiau canlynol: Gweler graff data, Gweler tabl data, Lawrlwythwch y data hwn a Cymharwch leoliad."
-      accessibility_tab: "Defnyddiwch y tabl data yn y tab nesaf, Gweler y tabl data, sy'n cynnwys data hygyrch."
+      accessibility_tabpanel: "Mae gan y bwrdd strwythur anarferol. Defnyddiwch yr ail dab yn y tablydd o'r enw Gweler y tabl data am ddata sydd mewn fformat hygyrch."
 
     graph:
       no_data: "Mae’n flin gennym, nid yw data %{label} ar gael ar gyfer %{location}. Dewiswch leoliad gwahanol."
diff --git a/config/locales/en.yml b/config/locales/en.yml
index a34b9c49..963c7143 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -178,8 +178,7 @@ en:
       print_table: "print this table"
       download_data_as: "Download this data as:"
       choose_another_location: "Choose another location"
-      accessibility_tablist: "Tab through the following tabs: See data graph, See data table, Download this data and Compare location."
-      accessibility_tab: "Please use the data table in the next tab, See data table, which contains accessible data."
+      accessibility_tabpanel: "The table has an unusual structure. Please use the second tab in the tablist named See data table for data that is in an accessible format."
 
     graph:
       no_data: "Sorry, there is no %{label} data available for %{location}. Please select a different location."

From bca0ca68a20e86cddd3bb3c9d9770f7b0c843721 Mon Sep 17 00:00:00 2001
From: Daniel Couzens <dan.couzens@epimorphics.com>
Date: Mon, 2 Sep 2024 09:38:54 +0100
Subject: [PATCH 3/6] updates changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9efb6e88..4425c155 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## 1.7.5 - 2024-08
 
+- (Dan) Adds message for screenreaders for guidance on how to use tables [Gh-405](https://github.com/epimorphics/ukhpi/issues/405)
 - (Dan) Fixed aria-label in compare locations form [GH-416](https://github.com/epimorphics/ukhpi/issues/416)
 - (Dan) Adds `aria-label` link attributes on the about page to SPARQL link
   [GH-413](https://github.com/epimorphics/ukhpi/issues/413)

From f96dfc4197d1b8b1058bd9aec509fb82da29f10c Mon Sep 17 00:00:00 2001
From: Daniel Couzens <dan.couzens@epimorphics.com>
Date: Mon, 2 Sep 2024 09:43:39 +0100
Subject: [PATCH 4/6] reverts scss

---
 app/assets/stylesheets/_utilities.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/assets/stylesheets/_utilities.scss b/app/assets/stylesheets/_utilities.scss
index 5802f216..a3915b3b 100644
--- a/app/assets/stylesheets/_utilities.scss
+++ b/app/assets/stylesheets/_utilities.scss
@@ -10,8 +10,6 @@
   overflow: hidden;
   clip: rect(0 0 0 0);
   border: 0;
-  pointer-events: none;
-  user-select: none;
 }
 
 .u-full-width {

From de4b77f1ededdd76fbe522380641a440a4b64fe6 Mon Sep 17 00:00:00 2001
From: Daniel Couzens <dan.couzens@epimorphics.com>
Date: Mon, 2 Sep 2024 09:44:46 +0100
Subject: [PATCH 5/6] updates html

---
 app/javascript/components/data-view.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/javascript/components/data-view.vue b/app/javascript/components/data-view.vue
index eb0d714e..d9d17ea2 100644
--- a/app/javascript/components/data-view.vue
+++ b/app/javascript/components/data-view.vue
@@ -1,5 +1,4 @@
 <template lang="html">
-  <div>
   <div class='o-data-view__vue-root u-js-only'>
     <div class='o-data-view__js-options'>
       <data-view-statistics :initial-statistics='availableStatistics' :zoom='false'></data-view-statistics>
@@ -44,7 +43,6 @@
         </el-tab-pane>
       </el-tabs>
     </div>
-  </div>
     <p id="tabpanel-accessibility-message" class="u-sr-only" aria-hidden="true">
       {{ $t('js.action.accessibility_tabpanel') }}
     </p>

From 7be00615960d3e56e17ae439c2e19c163fa32db1 Mon Sep 17 00:00:00 2001
From: Daniel Couzens <dan.couzens@epimorphics.com>
Date: Mon, 2 Sep 2024 15:40:27 +0100
Subject: [PATCH 6/6] updates grammar

---
 config/locales/cy.yml | 2 +-
 config/locales/en.yml | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/config/locales/cy.yml b/config/locales/cy.yml
index 08fc972f..08d758a1 100644
--- a/config/locales/cy.yml
+++ b/config/locales/cy.yml
@@ -178,7 +178,7 @@ cy:
       print_table: "argraffu’r tabl hwn"
       download_data_as: "Lawrlwytho’r data hwn fel:"
       choose_another_location: "Dewiswch leoliad arall"
-      accessibility_tabpanel: "Mae gan y bwrdd strwythur anarferol. Defnyddiwch yr ail dab yn y tablydd o'r enw Gweler y tabl data am ddata sydd mewn fformat hygyrch."
+      accessibility_tabpanel: "Mae gan y bwrdd strwythur anarferol. Defnyddiwch yr ail dab yn y tablydd o'r enw 'Gweler tabl data' am ddata sydd mewn fformat hygyrch."
 
     graph:
       no_data: "Mae’n flin gennym, nid yw data %{label} ar gael ar gyfer %{location}. Dewiswch leoliad gwahanol."
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 963c7143..16427058 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -178,7 +178,7 @@ en:
       print_table: "print this table"
       download_data_as: "Download this data as:"
       choose_another_location: "Choose another location"
-      accessibility_tabpanel: "The table has an unusual structure. Please use the second tab in the tablist named See data table for data that is in an accessible format."
+      accessibility_tabpanel: "The table has an unusual structure. Please use the second tab in the tablist named 'See data table' for data that is in an accessible format."
 
     graph:
       no_data: "Sorry, there is no %{label} data available for %{location}. Please select a different location."