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

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 7ad6caec98b96eeaacf395ad995dbafa6f1b8ae4..f0910379184dfdd4510c330852656f7f41b86578 100644 (file)
--- a/app/helpers/application_helper.rb
+++ b/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),

diff --git a/app/helpers/email_addresses_helper.rb b/app/helpers/email_addresses_helper.rb
index f75657cf831b922dd6c13589eda31e24d271c9e9..81449edfa69da0f709d7029c91161ea628cfb272 100644 (file)
--- a/app/helpers/email_addresses_helper.rb
+++ b/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

diff --git a/app/helpers/issues_helper.rb b/app/helpers/issues_helper.rb
index 68b98e6c2ceed4ae29c54e470eb6b5008d6eadef..0d6f69913f2dd357d293baebb416e538b9ba06d8 100644 (file)
--- a/app/helpers/issues_helper.rb
+++ b/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

diff --git a/app/helpers/journals_helper.rb b/app/helpers/journals_helper.rb
index e64037f61991fb32c1312d5d9b0d51a43a92005e..f9dc7c9eaaef274a9202ae21295a4a9848020a3b 100644 (file)
--- a/app/helpers/journals_helper.rb
+++ b/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)}, 

diff --git a/app/helpers/watchers_helper.rb b/app/helpers/watchers_helper.rb
index 389a7bacbacd031f4c53815774ea69b3ae6925ae..7ed7b8914ba27c1d56d0bfa94d4251bbbbb63c88 100644 (file)
--- a/app/helpers/watchers_helper.rb
+++ b/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))

diff --git a/app/views/attachments/_links.html.erb b/app/views/attachments/_links.html.erb
index 53324c2213d091fa0c9c67c99cad61cf3e87a5b4..a71a722baac626c9e3fc513616a8d9c1762792ad 100644 (file)
--- a/app/views/attachments/_links.html.erb
+++ b/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',

diff --git a/app/views/issues/_attributes.html.erb b/app/views/issues/_attributes.html.erb
index f0a989063fd0959d6e413815270383aeb4f50fa3..63782d237920aad7a46bbc211b66b50aae08962c 100644 (file)
--- a/app/views/issues/_attributes.html.erb
+++ b/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',

diff --git a/app/views/issues/_relations.html.erb b/app/views/issues/_relations.html.erb
index b79e7448943e7349322892ee430580973ae44019..dcf0795647cbb8936db6889157e587df80c0de6e 100644 (file)
--- a/app/views/issues/_relations.html.erb
+++ b/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,

diff --git a/app/views/my/blocks/_timelog.html.erb b/app/views/my/blocks/_timelog.html.erb
index 76b974e52efea850b17307cd336b50943228b6df..7fcac4aa4177b63ca3c1a70d0b2282ac5971ef8c 100644 (file)
--- a/app/views/my/blocks/_timelog.html.erb
+++ b/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' %>

diff --git a/app/views/news/show.html.erb b/app/views/news/show.html.erb
index 0390964855c28d8bf1aa70704148d30b25521012..2178e1c149c81e523c490d136848359e3d54d13c 100644 (file)
--- a/app/views/news/show.html.erb
+++ b/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' %>

diff --git a/app/views/reports/issue_report.html.erb b/app/views/reports/issue_report.html.erb
index 1cb3ccdd33593c6b574a6a242b8176c163e06242..95c40ad6dc57a6ce8f695a35c4eb14342d5f947b 100644 (file)
--- a/app/views/reports/issue_report.html.erb
+++ b/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 />

diff --git a/app/views/repositories/_related_issues.html.erb b/app/views/repositories/_related_issues.html.erb
index ea4539120bb53cab69e3213f7af175c86c376251..a90fbc3b64b9db32744096300d2451df296b7e66 100644 (file)
--- a/app/views/repositories/_related_issues.html.erb
+++ b/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},

diff --git a/app/views/settings/_repositories.html.erb b/app/views/settings/_repositories.html.erb
index b2c001a9b1d0c3da15175d57117d4e6a6d6e946a..760903ea08602137d0b24f581b425b0a9958bb5c 100644 (file)
--- a/app/views/settings/_repositories.html.erb
+++ b/app/views/settings/_repositories.html.erb
@@ -118,8 +118,9 @@
                     ) %>
       </td>
       <td class="buttons">
-        <%= link_to('', '#',
-                    :class => 'delete-commit-keywords icon-only icon-del') %>
+        <%= link_to(l(:button_delete), '#',
+                    :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('', '#',
-                    :class => 'add-commit-keywords icon-only icon-add') %>
+        <%= link_to(l(:button_add), '#',
+                    :class => 'add-commit-keywords icon-only icon-add',
+                    :title => l(:button_add)) %>
       </td>
     </tr>
   </tbody>

diff --git a/app/views/timelog/_list.html.erb b/app/views/timelog/_list.html.erb
index df497d47e463a22cae4b20b033d4ee719397f5e4..89e1bc8c36fc15cfb5d3b1b6b690241c41d7f810 100644 (file)
--- a/app/views/timelog/_list.html.erb
+++ b/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' %>
-        <%= link_to '', time_entry_path(entry),
+                    :class => 'icon-only icon-edit' %>
+        <%= link_to l(:button_delete), time_entry_path(entry),
                     :data => {:confirm => l(:text_are_you_sure)},
                     :method => :delete,
                     :title => l(:button_delete),

diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index fbd2b7a05ce0ed73fd772eaa91dd7b38b1004378..f1d92de5f804fd3df8db9eb7eca1ef8aa86dbcab 100644 (file)
--- a/public/stylesheets/application.css
+++ b/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); }

diff --git a/test/unit/helpers/application_helper_test.rb b/test/unit/helpers/application_helper_test.rb
index 4058f35092e0cfe25ae1885a0a590b41ffd1f1fd..01d91a52b9a63c14a63509dc01ebb04a9cde4a6d 100644 (file)
--- a/test/unit/helpers/application_helper_test.rb
+++ b/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