https://www.redmine.org/https://www.redmine.org/favicon.ico?16793021292015-11-20T01:22:59ZRedmineRedmine - Patch #21256: Use CSS instead of image_tag() to show icons for better theming supporthttps://www.redmine.org/issues/21256?journal_id=674042015-11-20T01:22:59ZGo MAEDA
<ul><li><strong>Has duplicate</strong> <i><a class="issue tracker-3 status-5 priority-4 priority-default closed" href="/issues/21245">Patch #21245</a>: UI/CSS refinements, part 1</i> added</li></ul> Redmine - Patch #21256: Use CSS instead of image_tag() to show icons for better theming supporthttps://www.redmine.org/issues/21256?journal_id=679992015-12-17T10:38:14ZToshi MARUYAMA
<ul></ul><p>Daniel Ritz wrote:</p>
<blockquote>
<p>Replaces all uses of image_tag() to render icons with icon-* definitions. This makes is possible to replace all these icons with Font-based icons, e.g. FontAwesome.</p>
</blockquote>
<p>Could you explain more details?</p> Redmine - Patch #21256: Use CSS instead of image_tag() to show icons for better theming supporthttps://www.redmine.org/issues/21256?journal_id=680122015-12-17T19:30:36ZDaniel Ritz
<ul></ul><p>Toshi MARUYAMA wrote:</p>
<blockquote>
<p>Daniel Ritz wrote:</p>
<blockquote>
<p>Replaces all uses of image_tag() to render icons with icon-* definitions. This makes is possible to replace all these icons with Font-based icons, e.g. FontAwesome.</p>
</blockquote>
<p>Could you explain more details?</p>
</blockquote>
<p>Currently, in most places where an icon is shown, it's done with CSS classes, e.g. setting <code>class="icon icon-edit"</code> to a <code><span></code> or <code><a></code> or whatever. This makes it very easy in themes to replace those .png based icons with font-based icons like FontAwesome. However not all icons displayed in the GUI use CSS. Some rely on simple <code><img></code> tags, mostly added with the helper function <code>image_tag()</code>.</p>
<p>This patch changes all these icons to use CSS classes as well instead of the <code><img></code> tags. Icons that did not have a <code>icon-<name></code> CSS class defined already are added (11 I think). Where necessary, test cases are adapted as well.</p>
<p>Also, this introduces the CSS class <code>icon-only</code>". It is like <code>icon</code>, but does not add additional padding on the right side since no text is expected after this. This is mostly cosmetic. I did it so the look of certain pages does not change, e.g. the sort icons (top, up, down, bottom) in Administration -> Issue statuses.</p>
<p>With this patch, almost all icons in Redmine can be replaced with font-based icons. The only exception being the "search" icon in some input fields. They are done with CSS as background, but there's no replacement for it with font-based icons w/o an additional tag to wrap the input field. But that's for another patch :)</p> Redmine - Patch #21256: Use CSS instead of image_tag() to show icons for better theming supporthttps://www.redmine.org/issues/21256?journal_id=680772015-12-22T10:39:45ZToshi MARUYAMA
<ul><li><strong>Related to</strong> <i><a class="issue tracker-3 status-1 priority-4 priority-default" href="/issues/21257">Patch #21257</a>: Use PDF icon for "Also available in PDF"</i> added</li></ul> Redmine - Patch #21256: Use CSS instead of image_tag() to show icons for better theming supporthttps://www.redmine.org/issues/21256?journal_id=681662015-12-29T21:37:28ZTobias Fischer
<ul></ul><p>I agree, this would be very useful for theme developers!</p> Redmine - Patch #21256: Use CSS instead of image_tag() to show icons for better theming supporthttps://www.redmine.org/issues/21256?journal_id=684022016-01-09T17:16:01ZDaniel Ritz
<ul><li><strong>File</strong> <a href="/attachments/14969">0001-Replace-uses-of-image_tag-with-CSS.patch</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/14969/0001-Replace-uses-of-image_tag-with-CSS.patch">0001-Replace-uses-of-image_tag-with-CSS.patch</a> added</li></ul><p>Updated patch for <a class="changeset" title="Estonian translation updated by John Wilcox (#21632)" href="https://www.redmine.org/projects/redmine/repository/svn/revisions/15041">r15041</a></p> Redmine - Patch #21256: Use CSS instead of image_tag() to show icons for better theming supporthttps://www.redmine.org/issues/21256?journal_id=686232016-01-16T09:46:17ZToshi MARUYAMA
<ul><li><strong>Target version</strong> set to <i>3.3.0</i></li></ul> Redmine - Patch #21256: Use CSS instead of image_tag() to show icons for better theming supporthttps://www.redmine.org/issues/21256?journal_id=687612016-01-20T08:51:11ZJean-Philippe Langjp_lang@yahoo.fr
<ul><li><strong>Category</strong> changed from <i>UI</i> to <i>Code cleanup/refactoring</i></li><li><strong>Status</strong> changed from <i>New</i> to <i>Closed</i></li><li><strong>Assignee</strong> set to <i>Jean-Philippe Lang</i></li></ul><p>Patch committed, thanks for this nice work Daniel.</p> Redmine - Patch #21256: Use CSS instead of image_tag() to show icons for better theming supporthttps://www.redmine.org/issues/21256?journal_id=688122016-01-21T10:02:28ZGregor Schmidtschmidt@nach-vorne.eu
<ul></ul><p>Removing the link content and only relying on the icon, which is added via CSS, severely hampers accessibility. To make life easier for screen readers and their users, I think the link description should be made available in a hidden span, e.g. using a technique described <a href="https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C7.html" class="external">in this document</a>.</p>
<p>Only relying on the title attribute might not be sufficient.</p>
<blockquote>
<p>Current user agents and assistive technology provide no feedback to the user when links have title attribute content available.</p>
</blockquote>
<p><a class="external" href="https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H33.html">https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H33.html</a></p> Redmine - Patch #21256: Use CSS instead of image_tag() to show icons for better theming supporthttps://www.redmine.org/issues/21256?journal_id=688132016-01-21T10:14:32ZToshi MARUYAMA
<ul><li><strong>Status</strong> changed from <i>Closed</i> to <i>Reopened</i></li></ul><p>Gregor Schmidt wrote:</p>
<blockquote>
<p>To make life easier for screen readers and their users, I think the link description should be made available in a hidden span, e.g. using a technique described <a href="https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C7.html" class="external">in this document</a>.</p>
</blockquote>
<p>Patch welcome.</p> Redmine - Patch #21256: Use CSS instead of image_tag() to show icons for better theming supporthttps://www.redmine.org/issues/21256?journal_id=688142016-01-21T11:28:51ZTobias Fischer
<ul><li><strong>File</strong> <a href="/attachments/15036">21256-label-example.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/15036/21256-label-example.png">21256-label-example.png</a> added</li></ul><p>Gregor Schmidt wrote:</p>
<blockquote>
<p>Removing the link content and only relying on the icon, which is added via CSS, severely hampers accessibility. To make life easier for screen readers and their users, I think the link description should be made available in a hidden span, e.g. using a technique described <a href="https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C7.html" class="external">in this document</a>.</p>
<p>Only relying on the title attribute might not be sufficient.</p>
</blockquote>
<p>For cases where the icon was missing an adjacent label, I'm completely with you.</p>
<p>However, in most cases, the current icons were "bundled" with a label like this:<br /><img src="https://www.redmine.org/attachments/download/15036/21256-label-example.png" alt="" /></p>
<p>The label should then be enough as a description for the CSS icon attached to it, don't you think so?</p> Redmine - Patch #21256: Use CSS instead of image_tag() to show icons for better theming supporthttps://www.redmine.org/issues/21256?journal_id=688152016-01-21T11:37:46ZGregor Schmidtschmidt@nach-vorne.eu
<ul></ul><blockquote>
<p>However, in most cases, the current icons were "bundled" with a label like this:</p>
<p>The label should then be enough as a description for the CSS icon attached to it, don't you think so?</p>
</blockquote>
<p>You're right. If the link still contains descriptive text, everything is fine.</p>
<p>But if there's an "empty" link with an icon, next to a text-only link pointing to the same target, then I would say that should be changed to a single link containing the icon and the descriptive text.</p> Redmine - Patch #21256: Use CSS instead of image_tag() to show icons for better theming supporthttps://www.redmine.org/issues/21256?journal_id=688162016-01-21T11:51:37ZDaniel Ritz
<ul></ul><p>Gregor Schmidt wrote:</p>
<blockquote><blockquote>
<p>However, in most cases, the current icons were "bundled" with a label like this:</p>
<p>The label should then be enough as a description for the CSS icon attached to it, don't you think so?</p>
</blockquote>
<p>You're right. If the link still contains descriptive text, everything is fine.</p>
<p>But if there's an "empty" link with an icon, next to a text-only link pointing to the same target, then I would say that should be changed to a single link containing the icon and the descriptive text.</p>
</blockquote>
<p>There <em>should</em> be no such thing as an empty icon link followed by a text-only link with the same target. There are links with icon/text and links with icon only. This patched changed only the latter not to use <img> tags. I'm pretty sure this is no change wrt accessibility. Your suggested hidden span is relatively easy to implement on top of what we have now. It however means checking all icon links. The new icon-only are few and easy to find, but there are others without the "icon-only" class so they need to be checked manually. I can have a look over the weekend if time permits...</p> Redmine - Patch #21256: Use CSS instead of image_tag() to show icons for better theming supporthttps://www.redmine.org/issues/21256?journal_id=688312016-01-22T09:14:47ZGregor Schmidtschmidt@nach-vorne.eu
<ul></ul><p><a class="user active" href="https://www.redmine.org/users/3056">Daniel Lopez</a>: That sounds great.</p>
<p>Also sorry for mentioning it not in my first comment: Thanks for the effort and braveness to create such a big patch in the first place. The changes are a great improvement with respect to extensibility and page speed.</p> Redmine - Patch #21256: Use CSS instead of image_tag() to show icons for better theming supporthttps://www.redmine.org/issues/21256?journal_id=688442016-01-23T18:02:53ZDaniel Ritz
<ul></ul><p>Gregor Schmidt wrote:</p>
<blockquote>
<p>Removing the link content and only relying on the icon, which is added via CSS, severely hampers accessibility. To make life easier for screen readers and their users, I think the link description should be made available in a hidden span, e.g. using a technique described <a href="https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C7.html" class="external">in this document</a>.</p>
<p>Only relying on the title attribute might not be sufficient.</p>
<blockquote>
<p>Current user agents and assistive technology provide no feedback to the user when links have title attribute content available.</p>
</blockquote>
<p><a class="external" href="https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H33.html">https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H33.html</a></p>
</blockquote>
<p>Daniel Ritz wrote:</p>
<blockquote>
<p>Your suggested hidden span is relatively easy to implement on top of what we have now. It however means checking all icon links. The new icon-only are few and easy to find, but there are others without the "icon-only" class so they need to be checked manually. I can have a look over the weekend if time permits...</p>
</blockquote>
<p>I implemented this in <a class="issue tracker-3 status-5 priority-4 priority-default closed" title="Patch: Improve accessibility for icon-only links (Closed)" href="https://www.redmine.org/issues/21805">#21805</a>. Please have a look. Maybe the discussion should move to the new patch with this one closed?</p> Redmine - Patch #21256: Use CSS instead of image_tag() to show icons for better theming supporthttps://www.redmine.org/issues/21256?journal_id=689742016-01-31T10:00:18ZJean-Philippe Langjp_lang@yahoo.fr
<ul><li><strong>Status</strong> changed from <i>Reopened</i> to <i>Closed</i></li></ul><p>Daniel Ritz wrote:</p>
<blockquote>
<p>I implemented this in <a class="issue tracker-3 status-5 priority-4 priority-default closed" title="Patch: Improve accessibility for icon-only links (Closed)" href="https://www.redmine.org/issues/21805">#21805</a>. Please have a look. Maybe the discussion should move to the new patch with this one closed?</p>
</blockquote>
<p>Agreed.</p> Redmine - Patch #21256: Use CSS instead of image_tag() to show icons for better theming supporthttps://www.redmine.org/issues/21256?journal_id=922082019-06-04T05:30:17ZGo MAEDA
<ul><li><strong>Related to</strong> <i><a class="issue tracker-1 status-5 priority-4 priority-default closed" href="/issues/31510">Defect #31510</a>: Fix missing closing tags in workflows/permissions.html.erb</i> added</li></ul>