Improve accessibility for icon-only links by adding hidden text (#21805).

Patch by Daniel Ritz.

git-svn-id: http://svn.redmine.org/redmine/trunk@15271 e93f8b46-1217-0410-a6f0-8f06a7374b81

app/helpers/application_helper.rb

@@ -454,16 +454,16 @@ module ApplicationHelper
   end
 
   def reorder_links(name, url, method = :post)
-    link_to('',
+    link_to(l(:label_sort_highest),
             url.merge({"#{name}[move_to]" => 'highest'}), :method => method,
             :title => l(:label_sort_highest), :class => 'icon-only icon-move-top') +
-    link_to('',
+    link_to(l(:label_sort_higher),
             url.merge({"#{name}[move_to]" => 'higher'}), :method => method,
             :title => l(:label_sort_higher), :class => 'icon-only icon-move-up') +
-    link_to('',
+    link_to(l(:label_sort_lower),
             url.merge({"#{name}[move_to]" => 'lower'}), :method => method,
             :title => l(:label_sort_lower), :class => 'icon-only icon-move-down') +
-    link_to('',
+    link_to(l(:label_sort_lowest),
             url.merge({"#{name}[move_to]" => 'lowest'}), :method => method,
             :title => l(:label_sort_lowest), :class => 'icon-only icon-move-bottom')
   end
@@ -892,7 +892,7 @@ module ApplicationHelper
       @current_section += 1
       if @current_section > 1
         content_tag('div',
-          link_to('', options[:edit_section_links].merge(:section => @current_section),
+          link_to(l(:button_edit_section), options[:edit_section_links].merge(:section => @current_section),
                   :class => 'icon-only icon-edit'),
           :class => "contextual heading-#{level}",
           :title => l(:button_edit_section),

app/helpers/email_addresses_helper.rb

@@ -22,17 +22,17 @@ module EmailAddressesHelper
   # Returns a link to enable or disable notifications for the address
   def toggle_email_address_notify_link(address)
     if address.notify?
-      link_to '',
+      link_to l(:label_disable_notifications),
         user_email_address_path(address.user, address, :notify => '0'),
         :method => :put, :remote => true,
         :title => l(:label_disable_notifications),
-        :class => 'icon icon-email'
+        :class => 'icon-only icon-email'
     else
-      link_to '',
+      link_to l(:label_enable_notifications),
         user_email_address_path(address.user, address, :notify => '1'),
         :method => :put, :remote => true,
         :title => l(:label_enable_notifications),
-        :class => 'icon icon-email-disabled'
+        :class => 'icon-only icon-email-disabled'
     end
   end
 end

app/helpers/issues_helper.rb

@@ -442,10 +442,11 @@ module IssuesHelper
         # Link to the attachment if it has not been removed
         value = link_to_attachment(atta, :download => true, :only_path => options[:only_path])
         if options[:only_path] != false && atta.is_text?
-          value += link_to('',
+          value += link_to(l(:button_view),
                            { :controller => 'attachments', :action => 'show',
                              :id => atta, :filename => atta.filename },
-                           :class => 'icon icon-magnifier')
+                           :class => 'icon-only icon-magnifier',
+                           :title => l(:button_view))
         end
       else
         value = content_tag("i", h(value)) if value

app/helpers/journals_helper.rb

@@ -30,21 +30,21 @@ module JournalsHelper
     editable = User.current.logged? && (User.current.allowed_to?(:edit_issue_notes, issue.project) || (journal.user == User.current && User.current.allowed_to?(:edit_own_issue_notes, issue.project)))
     links = []
     if !journal.notes.blank?
-      links << link_to('',
+      links << link_to(l(:button_quote),
                        quoted_issue_path(issue, :journal_id => journal),
                        :remote => true,
                        :method => 'post',
                        :title => l(:button_quote),
                        :class => 'icon-only icon-comment'
                       ) if options[:reply_links]
-      links << link_to('',
+      links << link_to(l(:button_edit),
                        edit_journal_path(journal),
                        :remote => true,
                        :method => 'get',
                        :title => l(:button_edit),
                        :class => 'icon-only icon-edit'
                       ) if editable
-      links << link_to('',
+      links << link_to(l(:button_delete),
                        journal_path(journal, :notes => ""),
                        :remote => true,
                        :method => 'put', :data => {:confirm => l(:text_are_you_sure)}, 

app/helpers/watchers_helper.rb

@@ -58,7 +58,7 @@ module WatchersHelper
                :object_id => object.id,
                :user_id => user}
         s << ' '
-        s << link_to('', url,
+        s << link_to(l(:button_delete), url,
                      :remote => true, :method => 'delete',
                      :class => "delete icon-only icon-del",
                      :title => l(:button_delete))

app/views/attachments/_links.html.erb

@@ -1,6 +1,6 @@
 <div class="attachments">
 <div class="contextual">
-  <%= link_to('',
+  <%= link_to(l(:label_edit_attachments),
               container_attachments_edit_path(container),
               :title => l(:label_edit_attachments),
               :class => 'icon-only icon-edit'
@@ -9,16 +9,16 @@
 <% for attachment in attachments %>
 <p><%= link_to_attachment attachment, :class => 'icon icon-attachment', :download => true -%>
   <% if attachment.is_text? %>
-    <%= link_to '',
+    <%= link_to l(:button_view),
                 { :controller => 'attachments', :action => 'show',
                   :id => attachment, :filename => attachment.filename },
-                :class => 'icon icon-magnifier',
+                :class => 'icon-only icon-magnifier',
                 :title => l(:button_view) %>
   <% end %>
   <%= " - #{attachment.description}" unless attachment.description.blank? %>
   <span class="size">(<%= number_to_human_size attachment.filesize %>)</span>
   <% if options[:deletable] %>
-    <%= link_to '', attachment_path(attachment),
+    <%= link_to l(:button_delete), attachment_path(attachment),
                 :data => {:confirm => l(:text_are_you_sure)},
                 :method => :delete,
                 :class => 'delete icon-only icon-del',

app/views/issues/_attributes.html.erb

@@ -20,7 +20,7 @@
 
 <% if @issue.safe_attribute?('category_id') && @issue.project.issue_categories.any? %>
 <p><%= f.select :category_id, (@issue.project.issue_categories.collect {|c| [c.name, c.id]}), :include_blank => true, :required => @issue.required_attribute?('category_id') %>
-<%= link_to('',
+<%= link_to(l(:label_issue_category_new),
             new_project_issue_category_path(@issue.project),
             :remote => true,
             :method => 'get',
@@ -32,7 +32,7 @@
 
 <% if @issue.safe_attribute?('fixed_version_id') && @issue.assignable_versions.any? %>
 <p><%= f.select :fixed_version_id, version_options_for_select(@issue.assignable_versions, @issue.fixed_version), :include_blank => true, :required => @issue.required_attribute?('fixed_version_id') %>
-<%= link_to('',
+<%= link_to(l(:label_version_new),
             new_project_version_path(@issue.project),
             :remote => true,
             :method => 'get',

app/views/issues/_relations.html.erb

@@ -19,7 +19,7 @@
   <td class="status"><%= other_issue.status.name %></td>
   <td class="start_date"><%= format_date(other_issue.start_date) %></td>
   <td class="due_date"><%= format_date(other_issue.due_date) %></td>
-  <td class="buttons"><%= link_to('',
+  <td class="buttons"><%= link_to(l(:label_relation_delete),
                                   relation_path(relation),
                                   :remote => true,
                                   :method => :delete,

app/views/my/blocks/_timelog.html.erb

@@ -42,10 +42,10 @@ entries_by_day = entries.group_by(&:spent_on)
     <td class="hours"><%= html_hours("%.2f" % entry.hours) %></td>
     <td class="buttons">
     <% if entry.editable_by?(@user) -%>
-        <%= link_to '', {:controller => 'timelog', :action => 'edit', :id => entry},
+        <%= link_to l(:button_edit), {:controller => 'timelog', :action => 'edit', :id => entry},
                     :title => l(:button_edit),
                     :class => 'icon-only icon-edit' %>
-        <%= link_to '', {:controller => 'timelog', :action => 'destroy', :id => entry},
+        <%= link_to l(:button_delete), {:controller => 'timelog', :action => 'destroy', :id => entry},
                     :data => {:confirm => l(:text_are_you_sure)}, :method => :delete,
                     :title => l(:button_delete),
                     :class => 'icon-only icon-del' %>

app/views/news/show.html.erb

@@ -36,7 +36,7 @@
 <% @comments.each do |comment| %>
     <% next if comment.new_record? %>
     <div class="contextual">
-    <%= link_to_if_authorized '', {:controller => 'comments', :action => 'destroy', :id => @news, :comment_id => comment},
+    <%= link_to_if_authorized l(:button_delete), {:controller => 'comments', :action => 'destroy', :id => @news, :comment_id => comment},
                               :data => {:confirm => l(:text_are_you_sure)}, :method => :delete,
                               :title => l(:button_delete),
                               :class => 'icon-only icon-del' %>

app/views/reports/issue_report.html.erb

@@ -3,25 +3,37 @@
 <div class="splitcontentleft">
 <h3>
   <%=l(:field_tracker)%>&nbsp;
-  <%= link_to '', project_issues_report_details_path(@project, :detail => 'tracker'), :class => 'icon-only icon-zoom-in' %>
+  <%= link_to l(:label_details),
+        project_issues_report_details_path(@project, :detail => 'tracker'),
+        :class => 'icon-only icon-zoom-in',
+        :title => l(:label_details) %>
 </h3>
 <%= render :partial => 'simple', :locals => { :data => @issues_by_tracker, :field_name => "tracker_id", :rows => @trackers } %>
 <br />
 <h3>
   <%=l(:field_priority)%>&nbsp;
-  <%= link_to '', project_issues_report_details_path(@project, :detail => 'priority'), :class => 'icon-only icon-zoom-in' %>
+  <%= link_to l(:label_details),
+        project_issues_report_details_path(@project, :detail => 'priority'),
+        :class => 'icon-only icon-zoom-in',
+        :title => l(:label_details) %>
 </h3>
 <%= render :partial => 'simple', :locals => { :data => @issues_by_priority, :field_name => "priority_id", :rows => @priorities } %>
 <br />
 <h3>
   <%=l(:field_assigned_to)%>&nbsp;
-  <%= link_to '', project_issues_report_details_path(@project, :detail => 'assigned_to'), :class => 'icon-only icon-zoom-in' %>
+  <%= link_to l(:label_details),
+        project_issues_report_details_path(@project, :detail => 'assigned_to'),
+        :class => 'icon-only icon-zoom-in',
+        :title => l(:label_details) %>
 </h3>
 <%= render :partial => 'simple', :locals => { :data => @issues_by_assigned_to, :field_name => "assigned_to_id", :rows => @assignees } %>
 <br />
 <h3>
   <%=l(:field_author)%>&nbsp;
-  <%= link_to '', project_issues_report_details_path(@project, :detail => 'author'), :class => 'icon-only icon-zoom-in' %>
+  <%= link_to l(:label_details),
+        project_issues_report_details_path(@project, :detail => 'author'),
+        :class => 'icon-only icon-zoom-in',
+        :title => l(:label_details) %>
 </h3>
 <%= render :partial => 'simple', :locals => { :data => @issues_by_author, :field_name => "author_id", :rows => @authors } %>
 <br />
@@ -31,21 +43,30 @@
 <div class="splitcontentright">
 <h3>
   <%=l(:field_version)%>&nbsp;
-  <%= link_to '', project_issues_report_details_path(@project, :detail => 'version'), :class => 'icon-only icon-zoom-in' %>
+  <%= link_to l(:label_details),
+        project_issues_report_details_path(@project, :detail => 'version'),
+        :class => 'icon-only icon-zoom-in',
+        :title => l(:label_details) %>
 </h3>
 <%= render :partial => 'simple', :locals => { :data => @issues_by_version, :field_name => "fixed_version_id", :rows => @versions } %>
 <br />
 <% if @project.children.any? %>
 <h3>
   <%=l(:field_subproject)%>&nbsp;
-  <%= link_to '', project_issues_report_details_path(@project, :detail => 'subproject'), :class => 'icon-only icon-zoom-in' %>
+  <%= link_to l(:label_details),
+        project_issues_report_details_path(@project, :detail => 'subproject'),
+        :class => 'icon-only icon-zoom-in',
+        :title => l(:label_details) %>
 </h3>
 <%= render :partial => 'simple', :locals => { :data => @issues_by_subproject, :field_name => "project_id", :rows => @subprojects } %>
 <br />
 <% end %>
 <h3>
   <%=l(:field_category)%>&nbsp;
-  <%= link_to '', project_issues_report_details_path(@project, :detail => 'category'), :class => 'icon-only icon-zoom-in' %>
+  <%= link_to l(:label_details),
+        project_issues_report_details_path(@project, :detail => 'category'),
+        :class => 'icon-only icon-zoom-in',
+        :title => l(:label_details) %>
 </h3>
 <%= render :partial => 'simple', :locals => { :data => @issues_by_category, :field_name => "category_id", :rows => @categories } %>
 <br />

app/views/repositories/_related_issues.html.erb

@@ -11,7 +11,7 @@
 <ul>
 <% @changeset.issues.visible.each do |issue| %>
   <li id="<%= "related-issue-#{issue.id}" %>"><%= link_to_issue issue %>
-    <%= link_to('',
+    <%= link_to(l(:label_relation_delete),
                 {:controller => 'repositories', :action => 'remove_related_issue',
                   :id => @project, :repository_id => @repository.identifier_param,
                   :rev => @changeset.identifier, :issue_id => issue},

app/views/settings/_repositories.html.erb

@@ -118,8 +118,9 @@
                     ) %>
       </td>
       <td class="buttons">
-        <%= link_to('', '#',
+        <%= link_to(l(:button_delete), '#',
-                    :class => 'delete-commit-keywords icon-only icon-del') %>
+                    :class => 'delete-commit-keywords icon-only icon-del',
+                    :title => l(:button_delete)) %>
       </td>
     </tr>
     <% end %>
@@ -129,8 +130,9 @@
       <td></td>
       <td></td>
       <td class="buttons">
-        <%= link_to('', '#',
+        <%= link_to(l(:button_add), '#',
-                    :class => 'add-commit-keywords icon-only icon-add') %>
+                    :class => 'add-commit-keywords icon-only icon-add',
+                    :title => l(:button_add)) %>
       </td>
     </tr>
   </tbody>

app/views/timelog/_list.html.erb

@@ -21,10 +21,10 @@
     <%= raw @query.inline_columns.map {|column| "<td class=\"#{column.css_classes}\">#{column_content(column, entry)}</td>"}.join %>
     <td class="buttons">
     <% if entry.editable_by?(User.current) -%>
-        <%= link_to '', edit_time_entry_path(entry),
+        <%= link_to l(:button_edit), edit_time_entry_path(entry),
                     :title => l(:button_edit),
-                    :class => 'icon icon-edit' %>
+                    :class => 'icon-only icon-edit' %>
-        <%= link_to '', time_entry_path(entry),
+        <%= link_to l(:button_delete), time_entry_path(entry),
                     :data => {:confirm => l(:text_are_you_sure)},
                     :method => :delete,
                     :title => l(:button_delete),

public/stylesheets/application.css

@@ -1113,6 +1113,17 @@ a.close-icon:hover {background-image:url('../images/close_hl.png');}
   background-repeat: no-repeat;
   padding-left: 16px;
 }
+a.icon-only {
+  display: inline-block;
+  width: 0;
+  overflow: hidden;
+  padding-top: 0;
+  padding-bottom: 0;
+  font-size: 8px;
+}
+a.icon-only::after {
+  content: " ";
+}
 
 .icon-add { background-image: url(../images/add.png); }
 .icon-edit { background-image: url(../images/edit.png); }

test/unit/helpers/application_helper_test.rb

@@ -1243,14 +1243,14 @@ RAW
 
     # heading that contains inline code
     assert_match Regexp.new('<div class="contextual heading-2" title="Edit this section" id="section-4">' +
-      '<a class="icon-only icon-edit" href="/projects/1/wiki/Test/edit\?section=4"></a></div>' +
+      '<a class="icon-only icon-edit" href="/projects/1/wiki/Test/edit\?section=4">Edit this section</a></div>' +
       '<a name="Subtitle-with-inline-code"></a>' +
       '<h2 >Subtitle with <code>inline code</code><a href="#Subtitle-with-inline-code" class="wiki-anchor">&para;</a></h2>'),
       result
 
     # last heading
     assert_match Regexp.new('<div class="contextual heading-2" title="Edit this section" id="section-5">' +
-      '<a class="icon-only icon-edit" href="/projects/1/wiki/Test/edit\?section=5"></a></div>' +
+      '<a class="icon-only icon-edit" href="/projects/1/wiki/Test/edit\?section=5">Edit this section</a></div>' +
       '<a name="Subtitle-after-pre-tag"></a>' +
       '<h2 >Subtitle after pre tag<a href="#Subtitle-after-pre-tag" class="wiki-anchor">&para;</a></h2>'),
       result