#897638 by casey, sun, mgifford, et al: Allow .element-invisible to work with focusable elements like links.

1 files changed, 12 insertions, 4 deletions

diff --git a/modules/system/system.base.css b/modules/system/system.base.css
index 785acf47c..a6daadd2c 100644
--- a/modules/system/system.base.css
+++ b/modules/system/system.base.css
@@ -223,10 +223,8 @@ html.js .js-hide {
  *
  * 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.
+ * manner should be kept concise, to avoid unnecessary burden on the user.
+ * "!important" is used to prevent unintentional overrides.
  */
 .element-invisible {
   position: absolute !important;
@@ -235,6 +233,16 @@ html.js .js-hide {
 }
 
 /**
+ * The .element-focusable class extends the .element-invisible class to allow
+ * the element to be focusable when navigated to via the keyboard.
+ */
+.element-invisible.element-focusable:active,
+.element-invisible.element-focusable:focus {
+  position: static !important;
+  clip: auto;
+}
+
+/**
  * Markup free clearing.
  *
  * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack