Merge pull request #4527 from oliverguenther/accessibility/23286/add-table-caption

[23286] Add a general table caption with explanations for inline-edit, sorting

config/locales/js-en.yml

@@ -281,7 +281,6 @@ en:
         other: "You can only select {{limit}} items"
         zero: "You cannot select any items"
 
-    text_hint_wp_table: "With the links in the table headers you can sort, group, reorder, remove and add table columns."
     text_work_packages_destroy_confirmation: "Are you sure you want to delete the selected work package(s)?"
     text_query_destroy_confirmation: "Are you sure you want to delete the selected query?"
     text_attachment_destroy_confirmation: "Are you sure you want to delete the attachment?"
@@ -432,6 +431,10 @@ en:
         display_sums: "Display Sums"
         errors:
           unretrievable_query: "Unable to retrieve query from URL"
+      table:
+        summary: "Table with rows of work package and columns of work package attributes."
+        text_inline_edit: "Most cells of this table are buttons that activate inline-editing functionality of that attribute."
+        text_sort_hint: "With the links in the table headers you can sort, group, reorder, remove and add table columns."
       tabs:
         overview: Overview
         activity: Activity

frontend/app/components/wp-table/sort-header/sort-header.directive.js

@@ -62,9 +62,15 @@ function sortHeader(){
         scope.fullTitle = scope.headerTitle;
 
         if(scope.currentSortDirection) {
-          var sortDirectionText = (scope.currentSortDirection == 'asc') ? I18n.t('js.label_ascending') : I18n.t('js.label_descending');
-          var summaryContent = I18n.t('js.label_work_package_plural') + " " + sortDirectionText + " " + I18n.t('js.label_sorted_by') + " " + scope.headerTitle + '. ' + I18n.t('js.text_hint_wp_table');
-          jQuery('#wp-table-summary').text(summaryContent);
+          var ascending = scope.currentSortDirection === 'asc';
+          var summaryContent = [
+            ascending ? I18n.t('js.label_ascending') : I18n.t('js.label_descending'),
+            I18n.t('js.label_sorted_by'),
+            scope.headerTitle + '.',
+            I18n.t('js.work_packages.table.text_sort_hint')
+          ];
+
+          jQuery('#wp-table-sort-summary').text(summaryContent.join(" "));
         }
       }
 

frontend/app/components/wp-table/wp-table.directive.html

@@ -6,7 +6,10 @@
         <col highlight-col />
         <col highlight-col ng-repeat="column in columns" />
       </colgroup>
-      <caption id="wp-table-summary" class="hidden-for-sighted">
+      <caption class="hidden-for-sighted">
+        <span ng-bind="::text.tableSummary"></span>
+        <span id="wp-table-sort-summary"></span>
+        <span ng-bind="::text.tableSummaryHints"></span>
       </caption>
       <thead>
         <tr>

frontend/app/components/wp-table/wp-table.directive.ts

@@ -260,7 +260,12 @@ function WorkPackagesTableController($scope, $rootScope, I18n) {
     sumFor: I18n.t('js.label_sum_for'),
     allWorkPackages: I18n.t('js.label_all_work_packages'),
     noResults: I18n.t('js.work_packages.no_results.title'),
-    noResultsDescription: I18n.t('js.work_packages.no_results.description')
+    noResultsDescription: I18n.t('js.work_packages.no_results.description'),
+    tableSummary: I18n.t('js.work_packages.table.summary'),
+    tableSummaryHints: [
+      I18n.t('js.work_packages.table.text_inline_edit'),
+      I18n.t('js.work_packages.table.text_sort_hint')
+    ].join(' ')
   };
 
   $scope.$watch('workPackagesTableData.allRowsChecked', function(checked) {