Skip to content
GitLab
Commit 29f23576 authored by Mark Otto's avatar Mark Otto
Browse files

Merge pull request #12679 from twbs/sr-only-focusable 

add .sr-only-focusable
parents 5e6d16ef d8bc65b9
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 47 additions and 11 deletions
+47 -11
dist/css/bootstrap-rtl.css
+ 10
- 0
View file @ 29f23576
...@@ -1250,6 +1250,16 @@ hr { ...@@ -1250,6 +1250,16 @@ hr {
border: 0; border: 0;
} }
.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
h1, h1,
h2, h2,
h3, h3,
......
dist/css/bootstrap-rtl.min.css
+ 1
- 1
View file @ 29f23576
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/css/bootstrap.css
+ 9
- 0
View file @ 29f23576
...@@ -973,6 +973,15 @@ hr { ...@@ -973,6 +973,15 @@ hr {
clip: rect(0, 0, 0, 0); clip: rect(0, 0, 0, 0);
border: 0; border: 0;
} }
.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
h1, h1,
h2, h2,
h3, h3,
......
dist/css/bootstrap.css.map
+481 bytes (+0%)
View file @ 29f23576
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
dist/css/bootstrap.min.css
+ 1
- 1
View file @ 29f23576
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/_layouts/default.html
+ 1
- 1
View file @ 29f23576
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
{% include header.html %} {% include header.html %}
</head> </head>
<body> <body>
<a class="sr-only" href="#content">Skip to main content</a> <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<!-- Docs master nav --> <!-- Docs master nav -->
{% include nav-main.html %} {% include nav-main.html %}
......
docs/_layouts/home.html
+ 1
- 1
View file @ 29f23576
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
{% include header.html %} {% include header.html %}
</head> </head>
<body class="bs-docs-home"> <body class="bs-docs-home">
<a class="sr-only" href="#content">Skip to main content</a> <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<!-- Docs master nav --> <!-- Docs master nav -->
{% include nav-main.html %} {% include nav-main.html %}
......
docs/assets/js/raw-files.min.js
+ 1
- 1
View file @ 29f23576
This diff is collapsed.
docs/css.html
+ 4
- 3
View file @ 29f23576
...@@ -2611,15 +2611,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2611,15 +2611,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %} {% endhighlight %}
<h3 id="helper-classes-screen-readers">Screen reader content</h3> <h3 id="helper-classes-screen-readers">Screen reader and keyboard navigation content</h3>
<p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Necessary for following <a href="../getting-started/#accessibility">accessibility best practices</a>. Can also be used as a mixin.</p> <p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Combine <code>.sr-only</code> with <code>.sr-only-focusable</code> to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following <a href="../getting-started/#accessibility">accessibility best practices</a>. Can also be used as mixins.</p>
{% highlight html %} {% highlight html %}
<a class="sr-only" href="#content">Skip to main content</a> <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
{% endhighlight %} {% endhighlight %}
{% highlight scss %} {% highlight scss %}
// Usage as a Mixin // Usage as a Mixin
.skip-navigation { .skip-navigation {
.sr-only(); .sr-only();
.sr-only-focusable();
} }
{% endhighlight %} {% endhighlight %}
......
docs/dist/css/bootstrap-rtl.min.css
+ 1
- 1
View file @ 29f23576
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/dist/css/bootstrap.css.map
+481 bytes (+0%)
View file @ 29f23576
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
docs/dist/css/bootstrap.min.css
+ 1
- 1
View file @ 29f23576
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/getting-started.html
+ 1
- 1
View file @ 29f23576
...@@ -621,7 +621,7 @@ if (isAndroid) { ...@@ -621,7 +621,7 @@ if (isAndroid) {
<p>If your navigation contains many links and comes before the main content in the DOM, add a <code>Skip to main content</code> link immediately after your opening <code>&lt;body&gt;</code> tag. <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</a></p> <p>If your navigation contains many links and comes before the main content in the DOM, add a <code>Skip to main content</code> link immediately after your opening <code>&lt;body&gt;</code> tag. <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</a></p>
{% highlight html %} {% highlight html %}
<body> <body>
<a href="#content" class="sr-only">Skip to main content</a> <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
<div class="container" id="content"> <div class="container" id="content">
The main page content. The main page content.
</div> </div>
......
less/scaffolding.less
+ 16
- 0
View file @ 29f23576
...@@ -132,3 +132,19 @@ hr { ...@@ -132,3 +132,19 @@ hr {
clip: rect(0,0,0,0); clip: rect(0,0,0,0);
border: 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;
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment