Fixed a couple of the column headers accessibility tests.

Now showing updated column header titles based on column sorting.

app/assets/javascripts/angular/directives/work_packages/sort-header-directive.js

@@ -20,12 +20,24 @@ angular.module('openproject.workPackages.directives')
         targetSortation = scope.query.sortation.getTargetSortationOfHeader(scope.headerName);
         scope.query.setSortation(targetSortation);
         scope.currentSortDirection = scope.query.sortation.getDisplayedSortDirectionOfHeader(scope.headerName);
+        scope.setFullTitle();
       };
 
+      scope.setFullTitle = function(){
+        if(!scope.sortable) scope.fullTitle = '';
+        if(scope.currentSortDirection){
+          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_sort_by') + ' \"' + scope.headerTitle + '\"');
+        }
+      }
+
       scope.headerName = attributes['headerName'];
       scope.headerTitle = attributes['headerTitle'];
       scope.sortable = attributes['sortable'];
       scope.currentSortDirection = scope.query.sortation.getDisplayedSortDirectionOfHeader(scope.headerName);
+      scope.setFullTitle();
     }
   };
 }]);

config/locales/js-de.yml

@@ -15,9 +15,11 @@ de:
     general_text_yes: "ja"
     label_add_columns: "Ausgewählte Spalten hinzufügen"
     label_all_work_packages: "alle Arbeitspakete"
+    label_ascending: "Aufsteigend"
     label_collapse: "Zuklappen"
     label_collapsed: "zugeklappt"
     label_collapse_all: "Alle zuklappen"
+    label_descending: "Absteigend"
     label_expand: "Aufklappen"
     label_expanded: "aufgeklappt"
     label_expand_all: "Alle aufklappen"
@@ -26,6 +28,7 @@ de:
     label_no_data: "Nichts anzuzeigen"
     label_remove_columns: "Ausgewählte Spalten entfernen"
     label_sort_by: "Sortiert nach"
+    label_sorted_by: "sortiert nach"
     label_sort_higher: "Eins höher"
     label_sort_lower: "Eins tiefer"
     label_sum_for: "Summe für"

config/locales/js-en.yml

@@ -15,6 +15,8 @@ en:
     general_text_yes: "yes"
     label_add_columns: "Add selected columns"
     label_all_work_packages: "all work packages"
+    label_ascending: "Ascending"
+    label_descending: "Descending"
     label_collapse: "Collapse"
     label_collapsed: "collapsed"
     label_collapse_all: "Collapse all"
@@ -26,6 +28,7 @@ en:
     label_no_data: "No data to display"
     label_remove_columns: "Remove selected columns"
     label_sort_by: "Sort by"
+    label_sorted_by: "sorted by"
     label_sort_higher: "Move up"
     label_sort_lower: "Move down"
     label_sum_for: "Sum for"

public/templates/components/icon_wrapper.html

@@ -1,3 +1,3 @@
 <span class="icon-context icon-button icon-{{iconName}}">
-  <span class="hidden-for-sighted">{{title}}</span>
+  <span class="hidden-for-sighted"></span>
 </span>

public/templates/work_packages/sort_header.html

@@ -1,4 +1,4 @@
-<span title="{{sortable && (I18n.t('js.label_sort_by') + ' &quot;' + headerTitle + '&quot;') || ''}}">
+<span title="{{ fullTitle }}">
   <a ng-if="sortable"
      ng-class="[currentSortDirection && 'sort', currentSortDirection]"
      ng-click="performSort()">

public/templates/work_packages/work_packages_table.html

@@ -2,14 +2,13 @@
   <thead>
     <tr>
       <th class="checkbox hide-when-print">
-        <a ng-href=""
+        <a href="#"
            alt="{{(rows | allRowsChecked) && I18n.t('js.button_uncheck_all') || I18n.t('js.button_check_all')}}"
            class="no-decoration-on-hover"
            ng-click="setCheckedStateForAllRows(!(rows | allRowsChecked))"
            title="{{(rows | allRowsChecked) && I18n.t('js.button_uncheck_all') || I18n.t('js.button_check_all')}}">
           <icon-wrapper icon-title="I18n.t('js.button_check_all') + '/' + I18n.t('js.button_uncheck_all')"
-                        icon-name="yes"/>
-
+                        icon-name="yes"></icon-wrapper>
         </a>
       </th>
 

spec/features/accessibility/work_packages/work_package_query_spec.rb

@@ -44,7 +44,7 @@ describe 'Work package index accessibility' do
 
   describe 'Select all link' do
     let(:select_all_link) { find('table.list.issues th.checkbox a') }
-    let(:description_for_blind) { select_all_link.find('span.hidden-for-sighted') }
+    let(:description_for_blind) { select_all_link.find(:xpath, 'span/span[@class="hidden-for-sighted"]') }
 
     describe 'Initial state', js: true do
       it { expect(select_all_link).not_to be_nil }
@@ -63,7 +63,7 @@ describe 'Work package index accessibility' do
 
   describe 'Sort link' do
     shared_examples_for 'sort column' do
-      it { expect(find(sort_header_selector)[:title]).to eq(sort_text) }
+      it { expect(find(sort_header_selector).find("span")[:title]).to eq(sort_text) }
     end
 
     shared_examples_for 'unsorted column' do
@@ -118,7 +118,7 @@ describe 'Work package index accessibility' do
       end
     end
 
-    describe 'id column' do
+    describe 'id column', js: true do
       let(:link_caption) { '#' }
       let(:sort_header_selector) { 'table.list.issues th.checkbox + th' }
       let(:sort_link_selector) { sort_header_selector + ' a' }
@@ -128,7 +128,7 @@ describe 'Work package index accessibility' do
       it_behaves_like 'descending sortable first'
     end
 
-    describe 'type column' do
+    describe 'type column', js: true do
       let(:link_caption) { 'Type' }
       let(:sort_header_selector) { 'table.list.issues th.checkbox + th + th' }
       let(:sort_link_selector) { sort_header_selector + ' a' }

spec/spec_helper.rb

@@ -47,6 +47,10 @@ require 'capybara/rails'
 # in spec/support/ and its subdirectories.
 Dir[Rails.root.join("spec/support/**/*.rb")].each {|f| require f}
 
+# require 'capybara/rspec'
+# require 'capybara/webkit/matchers'
+# Capybara.javascript_driver = :webkit
+
 RSpec.configure do |config|
   # ## Mock Framework
   #