adds screenreader message to tabpanel

epimorphics · Sep 2, 2024 · bc3bd27 · bc3bd27
1 parent cc0b4e0
commit bc3bd27
Show file tree

Hide file tree

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