mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

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

Browse Source 
add .sr-only-focusable
This commit is contained in:
Mark Otto
2014-03-09 12:39:29 -07:00
parent 5e6d16ef4d d8bc65b9d0
commit 29f23576ee
14 changed files with 49 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/css/bootstrap-rtl.css
Vendored
+10
View File
@@ -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
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/css/bootstrap.css
Vendored
+9
View File
@@ -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
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/css/bootstrap.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/_layouts/default.html
+1 -1
View File
@@ -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
@@ -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
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/css.html
+4 -3
View File
@@ -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
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/dist/css/bootstrap.css.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/dist/css/bootstrap.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/getting-started.html
+1 -1
View File
@@ -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
View File
@@ -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;
}
}