Add labels for better accessibility of wp table header

frontend/app/components/wp-table/directives/sort-header/sort-header.directive.html

@@ -4,8 +4,10 @@
        ng-if="sortable"
        ng-class="[currentSortDirection && 'sort', currentSortDirection]"
        lang-attribute
-       lang="{{locale}}">{{headerTitle}}</a>
+       lang="{{locale}}"
+       id="{{ headerTitle }}">{{headerTitle}}</a>
     <a ng-if="!sortable">{{headerTitle}}</a>
+    <label class="hidden-for-sighted" for="{{ headerTitle }}"> {{ fullTitle }} </label>
     <icon-wrapper css-class="dropdown-indicator icon-small"
                   icon-name="pulldown"
                   title="{{I18n.t('js.label_open_menu')}}"></icon-wrapper>

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

@@ -65,7 +65,7 @@ function sortHeader(){
           var sortDirectionText = (scope.currentSortDirection == 'asc') ? I18n.t('js.label_ascending') : I18n.t('js.label_descending');
           scope.fullTitle = sortDirectionText + " " + I18n.t('js.label_sorted_by') + ' \"' + scope.headerTitle + '\"';
         } else {
-          scope.fullTitle = I18n.t('js.label_open_menu');
+          scope.fullTitle = I18n.t('js.label_open_menu') + ' \"' + scope.headerTitle + '\"';
         }
       }
 

spec/features/accessibility/work_packages/work_package_query_spec.rb

@@ -113,7 +113,7 @@ describe 'Work package index accessibility', type: :feature, selenium: true do
     end
 
     shared_examples_for 'unsorted column' do
-      let(:sort_text) { I18n.t(:label_open_menu) }
+      let(:sort_text) { I18n.t(:label_open_menu) + " \"#{link_caption}\"" }
 
       it_behaves_like 'sort column'
     end