adds messages to tab panel

epimorphics · Aug 30, 2024 · 0f8ecfa · 0f8ecfa
1 parent 8cad02c
commit 0f8ecfa
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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."