Patch #21805
closedImprove accessibility for icon-only links
0%
Description
Files
Related issues
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.
Updated by Daniel Ritz almost 9 years ago
- File 0001-Improve-accessibility-for-icon-only-links-v2.patch 0001-Improve-accessibility-for-icon-only-links-v2.patch added
- No need to use
l(:bla)
twice (one for the invisible text, one for thetitle
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.
Updated by Daniel Ritz almost 9 years ago
- File 0001-Improve-accessibility-for-icon-only-links-v2.1.patch 0001-Improve-accessibility-for-icon-only-links-v2.1.patch added
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: " ";
}
Not all that pretty, but seems to work...Fixed patch attached.
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.
Updated by Go MAEDA almost 5 years ago
- Related to Defect #32829: HTML entity is used in CSS string added