From 936344ea5549a724fa504dec9df98fbc49f2dc01 Mon Sep 17 00:00:00 2001
From: Angie Byron <webchick@24967.no-reply.drupal.org>
Date: Tue, 21 Sep 2010 21:45:40 +0000
Subject: [PATCH] #897638 by casey, sun, mgifford, et al: Allow
.element-invisible to work with focusable elements like links.
---
modules/system/system.base.css | 16 ++++++++++++----
1 file changed, 12 insertions(+), 4 deletions(-)
diff --git a/modules/system/system.base.css b/modules/system/system.base.css
index 785acf47c35d..a6daadd2ca68 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;
@@ -234,6 +232,16 @@ html.js .js-hide {
clip: rect(1px, 1px, 1px, 1px);
}
+/**
+ * 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.
*
--
GitLab