Reduce redundant information

config/locales/js-en.yml

@@ -90,9 +90,10 @@ en:
     label_activate: "Activate"
     label_activity_no: "Activity entry number %{activityNo}"
     label_activity_with_comment_no: "Activity entry number %{activityNo}. Has a user comment."
-    label_add_columns: "Add selected columns"
+    label_add_columns: "Add columns"
     label_add_comment: "Add comment"
     label_add_comment_title: "Click to add a comment"
+    label_add_selected_columns: "Add selected columns"
     label_added_by: "added by"
     label_added_time_by: "Added by %{author} %{age}"
     label_ago: "days ago"

frontend/app/components/common/collapsible-section/collapsible-section.directive.html

@@ -1,6 +1,6 @@
 <section class="collapsible-section" ng-class="{ '-expanded': $ctrl.expanded }">
   <accessible-by-keyboard execute="$ctrl.toggle()"
-                          aria-label="{{ ::$ctrl.sectionTitle }}"
+                          link-aria-label="{{ ::$ctrl.sectionTitle }}"
                           link-class="collapsible-section--toggle-link"
                           span-class="collapsible-section--legend">
     <span ng-bind="::$ctrl.sectionTitle"></span>

frontend/app/components/routing/wp-list/wp.list.html

@@ -68,7 +68,7 @@
 
   <accessible-by-keyboard
       link-class="hidden-for-sighted skip-navigation-link"
-      aria-label="{{ ::text.text_jump_to_pagination }}"
+      link-aria-label="{{ ::text.text_jump_to_pagination }}"
       execute="setAnchorToNextElement()">
     <span ng-bind="::text.jump_to_pagination"></span>
   </accessible-by-keyboard>

frontend/app/components/work-packages/work-package-comment/work-package-comment.directive.html

@@ -22,7 +22,7 @@
             class="inplace-editing--trigger-container"
             span-class="inplace-editing--container"
             link-class="inplace-editing--trigger-link"
-            aria-label="{{ ::vm.text.editTitle }}"
+            link-aria-label="{{ ::vm.text.editTitle }}"
             execute="vm.activate()"
             focus="vm.shouldFocus()">
             <span class="inplace-edit--read-value -default">

frontend/app/components/wp-fast-table/builders/cell-builder.ts

@@ -59,7 +59,6 @@ export class CellBuilder {
       text = cellEmptyPlaceholder;
     } else {
       text = field.valueString;
-      span.setAttribute('aria-label', `${field.label} ${text}`);
     }
 
     field.render(span, text);

frontend/app/components/wp-relations/wp-relation-row/wp-relation-row.template.html

@@ -40,7 +40,7 @@
         <div class="grid-content medium-2 collapse wp-relations-controls-section"
              ng-class="{ '-visible': $ctrl.userInputs.showRelationControls, '-expanded': $ctrl.userInputs.showRelationInfo }">
             <accessible-by-keyboard ng-show="$ctrl.showDescriptionInfo"
-                                    aria-label="{{ ::$ctrl.text.description_label }}"
+                                    link-aria-label="{{ ::$ctrl.text.description_label }}"
                                     link-title="{{ ::$ctrl.text.description_label }}"
                                     link-class="wp-relations--description-btn"
                                     execute="$ctrl.userInputs.showRelationInfo = !$ctrl.userInputs.showRelationInfo">
@@ -52,7 +52,7 @@
             <accessible-by-keyboard ng-if="$ctrl.relation.delete"
                                     execute="$ctrl.removeRelation($ctrl.relation)"
                                     aria-hidden="false"
-                                    aria-label="{{ ::$ctrl.text.remove }}"
+                                    link-aria-label="{{ ::$ctrl.text.remove }}"
                                     link-title="{{ ::$ctrl.text.remove }}"
                                     link-class="relation-row--remove-btn"
                                     class="-shown-in-accessibility-mode">

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

@@ -1,9 +1,10 @@
-<div class="generic-table--sort-header-outer">
+<div class="generic-table--sort-header-outer"  aria-hidden="true">
   <span class="hierarchy-header--outer-span" ng-if="isHierarchyColumn">
     <accessible-by-keyboard execute="toggleHierarchy($event)"
-                            aria-label="{{ ::I18n.t('js.work_packages.hierarchy.toggle_button') }}"
+                            link-aria-label="{{ text.toggleHierarchy }}"
                             link-class="hierarchy-header--icon"
-                            span-class="icon icon-show-more">
+                            span-class="icon icon-show-more"
+                            aria-hidden="true">
     </accessible-by-keyboard>
     <a href="javascript://"
        class="hierarchy-header--sort-title"
@@ -13,10 +14,9 @@
        lang="{{locale}}"
        id="{{ headerName }}">{{headerTitle}}</a>
     <a ng-if="!sortable">{{headerTitle}}</a>
-    <label class="hidden-for-sighted" aria-hidden="true" for="{{ headerTitle }}"> {{ fullTitle }} </label>
     <icon-wrapper css-class="dropdown-indicator icon-small"
                   icon-name="pulldown"
-                  title="{{I18n.t('js.label_open_menu')}}"></icon-wrapper>
+                  title="{{ text.openMenu }}"></icon-wrapper>
   </span>
   <span class="generic-table--sort-header" ng-if="!isHierarchyColumn">
     <a href="javascript://"
@@ -26,9 +26,8 @@
        lang="{{locale}}"
        id="{{ headerName }}">{{headerTitle}}</a>
     <a ng-if="!sortable">{{headerTitle}}</a>
-    <label class="hidden-for-sighted" aria-hidden="true" for="{{ headerTitle }}"> {{ fullTitle }} </label>
     <icon-wrapper css-class="dropdown-indicator icon-small"
                   icon-name="pulldown"
-                  title="{{I18n.t('js.label_open_menu')}}"></icon-wrapper>
+                  title="{{ text.openMenu }}"></icon-wrapper>
   </span>
 </div>

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

@@ -68,6 +68,11 @@ function sortHeader(wpTableHierarchy: WorkPackageTableHierarchyService){
         return false;
       }
 
+      scope.text = {
+        toggleHierarchy: I18n.t('js.work_packages.hierarchy.toggle_button'),
+        openMenu: I18n.t('js.label_open_menu')
+      };
+
       function setFullTitleAndSummary() {
         scope.fullTitle = scope.headerTitle;
 

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

@@ -27,10 +27,11 @@
                           ng-class="column.name == 'id' && '-short' ">
           </th>
           <th class="wp-table--details-column -short hide-when-print">
-            <div class="generic-table--sort-header-outer">
+            <div class="generic-table--sort-header-outer" aria-hidden="true">
               <accessible-by-keyboard
                           execute="openColumnsModal()"
-                          link-class="wp-table--columns-selection">
+                          link-class="wp-table--columns-selection"
+                          link-aria-label="{{ text.addColumns }}">
                 <span class="icon-button icon-small icon-add"></span>
               </accessible-by-keyboard>
             </div>
@@ -51,8 +52,6 @@
             </div>
           </th>
 
-
-
         </tr>
       </thead>
       <tbody class="work-package--empty-tbody" ng-if="query.hasError || rowcount === 0">

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

@@ -188,6 +188,7 @@ function WorkPackagesTableController($scope:any, $rootScope:ng.IRootScopeService
       title: I18n.t('js.work_packages.faulty_query.title'),
       description: I18n.t('js.work_packages.faulty_query.description')
     },
+    addColumns: I18n.t('js.label_add_columns'),
     tableSummary: I18n.t('js.work_packages.table.summary'),
     tableSummaryHints: [
       I18n.t('js.work_packages.table.text_inline_edit'),

frontend/app/components/wp-watchers/wp-watcher-entry.directive.html

@@ -5,10 +5,8 @@
       <span class="inplace-editing--container">
         <span class="inplace-edit--read-value" >
           <span data-ng-class="{'deleting': $ctrl.state.deleting}">
-            <a ng-href="{{ $ctrl.watcher.showUser.href }}"
-               title="{{ $ctrl.watcher.name }}">
+            <a ng-href="{{ $ctrl.watcher.showUser.href }}">
               <img ng-attr-src="{{ $ctrl.watcher.avatar }}"
-                   ng-attr-alt="{{ $ctrl.watcher.name }}"
                    ng-show="$ctrl.watcher.avatar"
                    class="avatar-mini">
               <span class="work-package--watcher-name">{{ $ctrl.watcher.name }}</span>
@@ -16,7 +14,7 @@
           </span>
         </span>
         <accessible-by-keyboard execute="$ctrl.remove()"
-                                aria-label="{{ ::$ctrl.text.remove }}"
+                                link-aria-label="{{ ::$ctrl.text.remove }}"
                                 link-title="{{ ::$ctrl.text.remove }}"
                                 link-class="inplace-edit--icon-wrapper remove-watcher-btn">
           <icon-wrapper icon-name="remove"

frontend/app/templates/components/accessible_by_keyboard.html

@@ -3,7 +3,7 @@
    class='{{ linkClass }}'
    ng-disabled="isDisabled"
    title='{{ linkTitle }}'
-   aria-label="{{ ariaLabel }}"
+   aria-label="{{ linkAriaLabel }}"
    data-click-on-keypress="[13, 32]"
    href>
    <span ng-transclude class='{{ spanClass }}'></span>

frontend/app/templates/work_packages/query_columns.html

@@ -14,12 +14,12 @@
         </select>
       </td>
       <td class="table-buttons" align="center" valign="middle">
-        <label class="hidden-for-sighted" for="add_selected_columns">{{ I18n.t('js.label_add_columns') }}</label>
+        <label class="hidden-for-sighted" for="add_selected_columns">{{ I18n.t('js.label_add_selected_columns') }}</label>
         <input id="add_selected_columns"
                type="button"
                value="→"
                ng-click="showColumns(markedAvailableColumns)"
-               title="{{ I18n.t('js.label_add_columns') }}"
+               title="{{ I18n.t('js.label_add_selected_columns') }}"
                ng-disabled="loading"><br>
         <label class="hidden-for-sighted" for="add_selected_columns">{{ I18n.t('js.label_remove_columns') }}</label>
         <input type="button"

frontend/app/ui_components/accessible-by-keyboard-directive.js

@@ -36,7 +36,7 @@ module.exports = function() {
       linkClass: '@',
       linkTitle: '@',
       spanClass: '@',
-      ariaLabel: '@'
+      linkAriaLabel: '@'
     },
     templateUrl: '/templates/components/accessible_by_keyboard.html'
   };