add .sr-only-focusable; fixes #12259

diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
index 329b4fa2ed0f49e2502d5f0be5dac0a2d3153061..a0689a31d7f89acbc0a93b361b1af14b69366a63 100644 (file)
--- 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 fe29f2d62cdcb9f7ce6bd1d62b60831fbb2a9650..c658d7bf5b91e6f7ac60a87e968ca544955ba990 100644 (file)
--- 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;
+  }
+}