Merge pull request #819 from opf/fix/accessibility_alt_text_collapse_expand_on_grouped_work_package_list

[FIX] Accessibility alt text collapse expand on grouped work package list

app/assets/javascripts/application.js.erb

@@ -161,45 +161,45 @@ function showAndScrollTo(id, focus) {
 	Element.scrollTo(id);
 }
 
-function toggleRowGroup(el) {
-	var tr = Element.up(el, 'tr');
-	var n = Element.next(tr);
-	tr.toggleClassName('open');
-	while (n != undefined && !n.hasClassName('group')) {
-		Element.toggle(n);
-		n = Element.next(n);
-	}
+function setGroupRowStatus(el) {
+  var collapseExpandButton = jQuery(el);
+  var row = jQuery(el).closest("tr");
+  var isOpen = row.hasClass("open")
+  var toggleAllLink = row.find(".toggle-all")
+  var toggleAllLinkText = isOpen ? I18n.t('js.label_collapse_all') : I18n.t('js.label_expand_all');
+
+  collapseExpandButton.toggleClass("icon-minus")
+  collapseExpandButton.toggleClass("icon-plus")
+  toggleAllLink.text(toggleAllLinkText);
 }
 
-function collapseAllRowGroups(el) {
-  var tbody = Element.up(el, 'tbody');
-  tbody.childElements('tr').each(function(tr) {
-    if (tr.hasClassName('group')) {
-      tr.removeClassName('open');
-    } else {
-      tr.hide();
-    }
-  })
-}
+function toggleRowGroup(el) {
+  var row = jQuery(el).closest("tr");
+  
+  row.toggleClass("open closed");
 
-function expandAllRowGroups(el) {
-  var tbody = Element.up(el, 'tbody');
-  tbody.childElements('tr').each(function(tr) {
-    if (tr.hasClassName('group')) {
-      tr.addClassName('open');
-    } else {
-      tr.show();
-    }
-  })
+  setGroupRowStatus(el);
+
+  row.nextUntil("tr.group").each(function(index) {
+    jQuery(this).toggle();
+  });
 }
 
 function toggleAllRowGroups(el) {
-	var tr = Element.up(el, 'tr');
-  if (tr.hasClassName('open')) {
-    collapseAllRowGroups(el);
-  } else {
-    expandAllRowGroups(el);
-  }
+  var row = jQuery(el).closest("tr");
+  var collapseExpandButton = jQuery(row).find(".expander");
+  var isOpen = row.hasClass("open");
+
+  toggleRowGroup(collapseExpandButton);
+
+  row.siblings("tr.group").each(function(index) {
+    var currentGroupOpen = jQuery(this).hasClass("open");
+    var collapseExpandButton = jQuery(this).find(".expander");
+
+    if (isOpen == currentGroupOpen) {
+      toggleRowGroup(collapseExpandButton);
+    }
+  });
 }
 
 function toggleFieldset(el) {

app/assets/stylesheets/default/main.css.erb

@@ -103,8 +103,9 @@ tr.entry td.revision, tr.entry td.author { text-align: center; }
 tr.entry td.age { text-align: right; }
 tr.entry.file td.filename a { margin-left: 16px; }
 
-tr span.expander {background-image: url(<%= asset_path 'bullet_toggle_plus.png' %>); padding-left: 8px; margin-left: 0; cursor: pointer;}
-tr.open span.expander {background-image: url(<%= asset_path 'bullet_toggle_minus.png' %>);}
+tr span.expander {cursor: pointer;}
+tr.open span .expand { display:none; }
+tr.closed span .collapse { display:none; }
 
 tr.changeset td.author { text-align: center; width: 15%; }
 tr.changeset td.committed_on { text-align: center; width: 15%; }

app/views/work_packages/_list.html.erb

@@ -59,21 +59,26 @@ See doc/COPYRIGHT.rdoc for more details.
       <% reset_cycle %>
       <tr class="group open">
         <td colspan="<%= query.columns.size + 2 %>">
-          <span class="expander" onclick="toggleRowGroup(this); return false;">
-            &nbsp;
+          <span class="expander icon-context icon-minus" onclick="toggleRowGroup(this); return false;">
+            <span class="hidden-for-sighted expand"><%= I18n.t('label_expand') %></span>
+            <span class="hidden-for-sighted collapse"><%= I18n.t('label_collapse') %></span>
           </span>
 
+          <span>
           <%= group.blank? ?
                 '-' :
                 column_content(query.group_by_column, work_package) %>
 
-          <span class="count">
-            (<%= results.work_package_count_for(group) %>)
-          </span>
+            <span class="count">
+              (<%= results.work_package_count_for(group) %>)
 
-          <%= link_to_function("#{l(:button_collapse_all)}/#{l(:button_expand_all)}",
-                               "toggleAllRowGroups(this)",
-                               :class => 'toggle-all') %>
+              <span aria-hidden="true" role="presentation" tabindex="-1">
+                <%= link_to_function("#{l(:button_collapse_all)}",
+                                     "toggleAllRowGroups(this)",
+                                     :class => 'toggle-all') %>
+              </span>
+            </span>
+          </span>
         </td>
       </tr>
       <% previous_group = group %>

config/locales/de.yml

@@ -573,6 +573,8 @@ de:
     filter:
       noneElement: "(keines)"
       noneSelection: "(keine)"
+    label_collapse_all: "Alle zuklappen"
+    label_expand_all: "Alle aufklappen"
 
   label_account: "Konto"
   label_activity: "Aktivität"
@@ -634,6 +636,8 @@ de:
   label_chronological_order: "in zeitlicher Reihenfolge"
   label_close_versions: "Vollständige Versionen schließen"
   label_closed_work_packages: "geschlossen"
+  label_collapse: "Zuklappen"
+  label_collapse_all: "Alle zuklappen"
   label_comment_add: "Kommentar hinzufügen"
   label_comment_added: "Kommentar hinzugefügt"
   label_comment_delete: "Kommentar löschen"
@@ -686,6 +690,8 @@ de:
   label_environment: "Umgebung"
   label_equals: "ist"
   label_example: "Beispiel"
+  label_expand: "Aufklappen"
+  label_expand_all: "Alle aufklappen"
   label_export_to: "Auch abrufbar als:"
   label_f_hour: "%{value} Stunde"
   label_f_hour_plural: "%{value} Stunden"

config/locales/en.yml

@@ -569,6 +569,8 @@ en:
     filter:
       noneElement: "(none)"
       noneSelection: "(none)"
+    label_collapse_all: "Collapse all"
+    label_expand_all: "Expand all"
 
   label_account: "Account"
   label_activity: "Activity"
@@ -630,6 +632,8 @@ en:
   label_chronological_order: "In chronological order"
   label_close_versions: "Close completed versions"
   label_closed_work_packages: "closed"
+  label_collapse: "Collapse"
+  label_collapse_all: "Collapse all"
   label_comment_add: "Add a comment"
   label_comment_added: "Comment added"
   label_comment_delete: "Delete comments"
@@ -682,6 +686,8 @@ en:
   label_environment: "Environment"
   label_equals: "is"
   label_example: "Example"
+  label_expand: "Expand"
+  label_expand_all: "Expand all"
   label_export_to: "Also available in:"
   label_f_hour: "%{value} hour"
   label_f_hour_plural: "%{value} hours"

doc/CHANGELOG.md

@@ -33,6 +33,7 @@ See doc/COPYRIGHT.rdoc for more details.
 * `#2153` [Accessibility] Required fields MUST be displayed as required - group new
 * `#2157` [Accessibility] Required fields MUST be displayed as required - enumeration new
 * `#2228` [Accessibility] low contrast in backlogs task view
+* `#2260` [Accessibility] no-existent alt-text for collapse/expand functionality in grouped work-package list
 * `#2734` [API] Access-Key not supported for all controllers
 * `#3120` Implement a test suite the spikes can be developed against
 * `#3251` [Timelines] Filtering for Responsible filters everything