プロジェクト

全般

プロフィール

Vote #77120

完了

Improve accessibility for icon-only links

Admin Redmine さんが3年以上前に追加. 3年以上前に更新.

ステータス:
Closed
優先度:
通常
担当者:
-
カテゴリ:
UI_10
対象バージョン:
開始日:
2022/05/09
期日:
進捗率:

0%

予定工数:
category_id:
10
version_id:
110
issue_org_id:
21805
author_id:
48958
assigned_to_id:
1
comments:
5
status_id:
5
tracker_id:
3
plus1:
0
affected_version:
closed_on:
affected_version_id:
ステータス-->[Closed]

説明

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: "&nbsp;";
}
</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

Admin Redmine さんが3年以上前に更新

  • カテゴリUI_10 にセット
  • 対象バージョン3.3.0_110 にセット

他の形式にエクスポート: Atom PDF

いいね!0
いいね!0