Project

General

Profile

Actions

Patch #21805

closed

Improve accessibility for icon-only links

Added by Daniel Ritz almost 9 years ago. Updated almost 9 years ago.

Status:
Closed
Priority:
Normal
Category:
UI
Target version:
Start date:
Due date:
% Done:

0%

Estimated time:

Description

Per #21256-9, this patch adds invisible <span class="hidden-for-sighted"> as part of icon-only links to improve accessibility. The text in the span is automatically set to the :title attribute of the link.

Based on r15093, passes all tests with Ruby 2.1.5


Files


Related issues

Related to Redmine - Defect #32829: HTML entity is used in CSS stringClosedGo MAEDA

Actions
Actions #1

Updated by Jean-Philippe Lang almost 9 years ago

  • Target version set to 3.3.0

I'd prefer not to add specific helper methods for this.
Can't we just use a regular link with the icon-only class and use some styling to hide the label, eg:

<a href="/foo" class="icon icon-only">Label</a>

and the CSS:

a.icon.icon-only {display:inline-block; width:0px; overflow:hidden;}

This is just an example, maybe the CSS could be improved.

Actions #2

Updated by Daniel Ritz almost 9 years ago

I don't like the helpers too much myself, but..here's why I did the helpers:
  • No need to use l(:bla) twice (one for the invisible text, one for the title attribute)
  • Shorter to write
  • It's easy to forget the accessible content

Anyways, please have a look at v2 of the patch w/o the helpers.

Actions #3

Updated by Daniel Ritz almost 9 years ago

Daniel Ritz wrote:

Anyways, please have a look at v2 of the patch w/o the helpers.

Missed one:

diff --git a/app/views/news/show.html.erb b/app/views/news/show.html.erb
index 0390964..2178e1c 100644
--- 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' %>

Found it because it broke badly. With the CSS in v2, a <a class="icon-only icon-del"></a> without any content inside the tag like the one I missed will not show anything at all in the browser, link completely gone. The display:inline-block" is necessary to make it work with content, but breaks w/o content...it's fixable with this:

a.icon-only::after {
  content: "&nbsp;";
}

Not all that pretty, but seems to work...Fixed patch attached.

Actions #4

Updated by Jean-Philippe Lang almost 9 years ago

  • Status changed from New to Closed
  • Assignee set to Jean-Philippe Lang

Patch committed, thanks. I made a few more changes to fix the display of these links in several places.

Actions #5

Updated by Go MAEDA almost 5 years ago

  • Related to Defect #32829: HTML entity is used in CSS string added
Actions

Also available in: Atom PDF