From daf8b90695a361c5e4406c4dbf1cec68b24e760e Mon Sep 17 00:00:00 2001
From: Marco Villegas <marvil07@gmail.com>
Date: Thu, 11 Nov 2010 04:11:40 -0500
Subject: [PATCH] #815984 follow-up by marvil07, droplet: Make widgets readable by screen readers for all missing widgets.

---
 widgets/alternate/alternate.css  |   16 ++++++++++++++++
 widgets/alternate/widget.tpl.php |    3 ++-
 widgets/plain/plain.css          |   16 ++++++++++++++++
 widgets/plain/widget.tpl.php     |    2 ++
 widgets/upanddown/upanddown.css  |   16 ++++++++++++++++
 widgets/upanddown/widget.tpl.php |    2 +-
 6 files changed, 53 insertions(+), 2 deletions(-)

diff --git widgets/alternate/alternate.css widgets/alternate/alternate.css
index b552536..c64436c 100644
--- widgets/alternate/alternate.css
+++ widgets/alternate/alternate.css
@@ -55,3 +55,19 @@
 .vud-widget-alternate .ctools-ajaxing div {
   display: none;
 }
+
+/**
+ * Hide elements visually, but keep them available for screen-readers.
+ *
+ * Used for information required for screen-reader users to understand and use
+ * the site where visual display is undesirable. Information provided in this
+ * manner should be kept concise, to avoid unnecessary burden on the user. Must
+ * not be used for focusable elements (such as links and form elements) as this
+ * causes issues for keyboard only or voice recognition users. "!important" is
+ * used to prevent unintentional overrides.
+ */
+.element-invisible {
+  position: absolute !important;
+  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+  clip: rect(1px, 1px, 1px, 1px);
+}
diff --git widgets/alternate/widget.tpl.php widgets/alternate/widget.tpl.php
index 0f3662f..0988bfc 100644
--- widgets/alternate/widget.tpl.php
+++ widgets/alternate/widget.tpl.php
@@ -12,7 +12,8 @@
     <div class="alternate-votes-display"><?php print $unsigned_points; ?></div>
     <?php if ($show_links): ?>
       <a href="<?php print $link_up; ?>" rel="nofollow" class="<?php print $link_class_up; ?>">
-        <div class="<?php print $class_up; ?>" title="<?php print t('Vote up!'); ?>">  </div>
+        <div class="<?php print $class_up; ?>" title="<?php print t('Vote up!'); ?>"></div>
+        <div class="element-invisible"><?php print t('Vote up!'); ?></div>
       </a>
     <?php endif; ?>
   <?php endif; ?>
diff --git widgets/plain/plain.css widgets/plain/plain.css
index c1e659a..a55fca1 100644
--- widgets/plain/plain.css
+++ widgets/plain/plain.css
@@ -89,3 +89,19 @@
 .vud-widget-plain .ctools-ajaxing span {
   display: none;
 }
+
+/**
+ * Hide elements visually, but keep them available for screen-readers.
+ *
+ * Used for information required for screen-reader users to understand and use
+ * the site where visual display is undesirable. Information provided in this
+ * manner should be kept concise, to avoid unnecessary burden on the user. Must
+ * not be used for focusable elements (such as links and form elements) as this
+ * causes issues for keyboard only or voice recognition users. "!important" is
+ * used to prevent unintentional overrides.
+ */
+.element-invisible {
+  position: absolute !important;
+  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+  clip: rect(1px, 1px, 1px, 1px);
+}
diff --git widgets/plain/widget.tpl.php widgets/plain/widget.tpl.php
index 6290f91..bc98588 100644
--- widgets/plain/widget.tpl.php
+++ widgets/plain/widget.tpl.php
@@ -11,9 +11,11 @@
   <div class="vud-widget vud-widget-plain" id="<?php print $id; ?>">
     <a href="<?php print $link_up; ?>" rel="nofollow" class="<?php print $link_class_up; ?>">
       <span class="<?php print $class_up; ?>" title="<?php print t('Vote up!'); ?>"></span>
+      <div class="element-invisible"><?php print t('Vote up!'); ?></div>
     </a>
     <a href="<?php print $link_down; ?>" rel="nofollow" class="<?php print $link_class_down; ?>">
       <span class="<?php print $class_down; ?>" title="<?php print t('Vote down!'); ?>"></span>
+      <div class="element-invisible"><?php print t('Vote down!'); ?></div>
     </a>
   </div>
 <?php endif; ?>
diff --git widgets/upanddown/upanddown.css widgets/upanddown/upanddown.css
index 38874d6..6261612 100644
--- widgets/upanddown/upanddown.css
+++ widgets/upanddown/upanddown.css
@@ -73,3 +73,19 @@
   background-image: url(status-active.gif);
   background-position: center;
 }
+
+/**
+ * Hide elements visually, but keep them available for screen-readers.
+ *
+ * Used for information required for screen-reader users to understand and use
+ * the site where visual display is undesirable. Information provided in this
+ * manner should be kept concise, to avoid unnecessary burden on the user. Must
+ * not be used for focusable elements (such as links and form elements) as this
+ * causes issues for keyboard only or voice recognition users. "!important" is
+ * used to prevent unintentional overrides.
+ */
+.element-invisible {
+  position: absolute !important;
+  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+  clip: rect(1px, 1px, 1px, 1px);
+}
diff --git widgets/upanddown/widget.tpl.php widgets/upanddown/widget.tpl.php
index a23b7ea..b972d46 100644
--- widgets/upanddown/widget.tpl.php
+++ widgets/upanddown/widget.tpl.php
@@ -11,7 +11,7 @@
 <div class="vud-widget vud-widget-upanddown" id="<?php print $id; ?>">
   <div class="up-score clear-block">
     <?php if ($show_links): ?>
-      <a href="<?php print $link_up; ?>" rel="nofollow" class="<?php print "$link_class_up $class_up"; ?>" title="<?php print t('Vote up!'); ?>"></a>
+      <a href="<?php print $link_up; ?>" rel="nofollow" class="<?php print "$link_class_up $class_up"; ?>" title="<?php print t('Vote up!'); ?>"><div class="element-invisible"><?php print t('Vote up!'); ?></div></a>
     <?php endif; ?>
     <span class="up-current-score"><?php print $up_points; ?></span>
   </div>
-- 
1.7.2.3