Vote #77120
完了Improve accessibility for icon-only links
0%
説明
Per #21256-9, this patch adds invisible @@ 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
journals
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:
<pre>
<a href="/foo" class="icon icon-only">Label</a>
</pre>
and the CSS:
<pre>
a.icon.icon-only {display:inline-block; width:0px; overflow:hidden;}
</pre>
This is just an example, maybe the CSS could be improved.
--------------------------------------------------------------------------------
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.
--------------------------------------------------------------------------------
Daniel Ritz wrote:
> Anyways, please have a look at v2 of the patch w/o the helpers.
Missed one:
<pre><code class="diff">
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' %>
</code></pre>
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:
<pre><code class="css">
a.icon-only::after {
content: " ";
}
</code></pre>
Not all that pretty, but seems to work...Fixed patch attached.
--------------------------------------------------------------------------------
Patch committed, thanks. I made a few more changes to fix the display of these links in several places.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
related_issues
relates,Closed,32829,HTML entity is used in CSS string