Add alt text to spacer elements

All HTML img elements should contain an alt attribute.
For decorative or spacer elements this alt text should be a blank string,
which indicates to assistive technologies that the image should not be announced.

Longer-term these spacer gifs could be replaced with empty <span> elements.
Inline-block css has been added to allow for this change in future,
however, the HTML element has not been changed for now to avoid breakage with non-default themes
(e.g. civicrm-admin-utilities WordPress plugin which replaces the default css/civicrm.css file)

diff --git a/CRM/Utils/Weight.php b/CRM/Utils/Weight.php
index d4961f776993af8ca81455972eef4bf3d1858198..891db2fa7a92c00d19bdc49e815eb25b1d858f55 100644 (file)
--- a/CRM/Utils/Weight.php
+++ b/CRM/Utils/Weight.php
@@ -400,8 +400,8 @@ class CRM_Utils_Weight {
         $links[] = "<a class=\"crm-weight-arrow\" href=\"{$url}&amp;dst={$prevID}&amp;dir=swap\"><img src=\"{$imageURL}/up.gif\" title=\"$alt\" alt=\"$alt\" class=\"order-icon\"></a>";
       }
       else {
-        $links[] = "<img src=\"{$imageURL}/spacer.gif\" class=\"order-icon\">";
-        $links[] = "<img src=\"{$imageURL}/spacer.gif\" class=\"order-icon\">";
+        $links[] = "<img src=\"{$imageURL}/spacer.gif\" class=\"order-icon\" alt=''>";
+        $links[] = "<img src=\"{$imageURL}/spacer.gif\" class=\"order-icon\" alt=''>";
       }
 
       if ($nextID != 0) {
@@ -412,8 +412,8 @@ class CRM_Utils_Weight {
         $links[] = "<a class=\"crm-weight-arrow\" href=\"{$url}&amp;dst={$lastID}&amp;dir=last\"><img src=\"{$imageURL}/last.gif\" title=\"$alt\" alt=\"$alt\" class=\"order-icon\"></a>";
       }
       else {
-        $links[] = "<img src=\"{$imageURL}/spacer.gif\" class=\"order-icon\">";
-        $links[] = "<img src=\"{$imageURL}/spacer.gif\" class=\"order-icon\">";
+        $links[] = "<img src=\"{$imageURL}/spacer.gif\" class=\"order-icon\" alt=''>";
+        $links[] = "<img src=\"{$imageURL}/spacer.gif\" class=\"order-icon\" alt=''>";
       }
       $rows[$id]['weight'] = implode('&nbsp;', $links);
     }

diff --git a/css/civicrm.css b/css/civicrm.css
index a19ac30c45c9b31b4e31b848594eba1a8dcc9e9e..dd2319bb2fc2f7fa69aa2ef2778ac7f87227b0fe 100644 (file)
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -1853,6 +1853,7 @@ input.crm-form-entityref {
   width: 10px;
   padding-top: 4px;
   padding-right: 4px;
+  display: inline-block;
 }
 
 /* crm button style */