From c4e242bdb170be26e64e859c5636f3cb0285f679 Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Mon, 10 Feb 2014 10:34:38 -0800
Subject: [PATCH] add .sr-only-focusable; fixes #12259
---
dist/css/bootstrap.css | 9 +++++++++
less/scaffolding.less | 16 ++++++++++++++++
2 files changed, 25 insertions(+)
diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
index 329b4fa2ed..a0689a31d7 100644
--- a/dist/css/bootstrap.css
+++ b/dist/css/bootstrap.css
@@ -346,6 +346,15 @@ hr {
clip: rect(0, 0, 0, 0);
border: 0;
}
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
+ position: static;
+ width: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ clip: auto;
+}
h1,
h2,
h3,
diff --git a/less/scaffolding.less b/less/scaffolding.less
index fe29f2d62c..c658d7bf5b 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -132,3 +132,19 @@ hr {
clip: rect(0,0,0,0);
border: 0;
}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+// Credit: HTML5 Boilerplate
+
+.sr-only-focusable {
+ &:active,
+ &:focus {
+ position: static;
+ width: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ clip: auto;
+ }
+}
--
GitLab