rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #15085 from patrickhlauke/glyphicons-in-forms-tweak

Browse Source 
Glyphicon tweaks
This commit is contained in:
Heinrich Fenkart 2014-11-12 00:41:28 +01:00
commit a4497c8a83
7 changed files with 75 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
docs/_includes/css/forms.html
View File

@ -653,43 +653,49 @@
</div>
<div class="bs-callout bs-callout-warning">
<h4>Conveying the icon's meaning to assistive technologies</h4>
<p>To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the <code>sr-only</code> class, and the icon itself explicitly associated with the form control it relates to using <code>aria-describedby</code>. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual <code>&lt;label&gt;</code> associated with the form control.</p>
<p>To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the <code>sr-only</code> class and explicitly associated with the form control it relates to using <code>aria-describedby</code>. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual <code>&lt;label&gt;</code> associated with the form control.</p>
<p>Although the following examples already mention the validation state of their respective form controls in the <code>&lt;label&gt;</code> text itself, the above technique (using <code>sr-only</code> text and <code>aria-describedby</code>) has been included for illustrative purposes.</p>
</div>
<div class="bs-example">
<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Icon">
<span id="inputSuccess2Icon" class="glyphicon glyphicon-ok form-control-feedback"><span class="sr-only">(success)</span></span>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Icon">
<span id="inputWarning2Icon" class="glyphicon glyphicon-warning-sign form-control-feedback"><span class="sr-only">(warning)</span></span>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Icon">
<span id="inputError2Icon" class="glyphicon glyphicon-remove form-control-feedback"><span class="sr-only">(error)</span></span>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
</form>
</div>
{% highlight html %}
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Icon">
<span id="inputSuccess2Icon" class="glyphicon glyphicon-ok form-control-feedback"><span class="sr-only">(success)</span></span>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Icon">
<span id="inputWarning2Icon" class="glyphicon glyphicon-warning-sign form-control-feedback"><span class="sr-only">(warning)</span></span>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Icon">
<span id="inputError2Icon" class="glyphicon glyphicon-remove form-control-feedback"><span class="sr-only">(error)</span></span>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
{% endhighlight %}
@ -699,8 +705,9 @@
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Icon">
<span id="inputSuccess3Icon" class="glyphicon glyphicon-ok form-control-feedback"><span class="sr-only">(success)</span></span>
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
</form>
@ -710,8 +717,9 @@
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Icon">
<span id="inputSuccess3Icon" class="glyphicon glyphicon-ok form-control-feedback"><span class="sr-only">(success)</span></span>
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
</form>
@ -721,8 +729,9 @@
<form class="form-inline" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Icon">
<span id="inputSuccess4Icon" class="glyphicon glyphicon-ok form-control-feedback"><span class="sr-only">(success)</span></span>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
</div>
@ -730,8 +739,9 @@
<form class="form-inline" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Icon">
<span id="inputSuccess4Icon" class="glyphicon glyphicon-ok form-control-feedback"><span class="sr-only">(success)</span></span>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
{% endhighlight %}
@ -741,15 +751,17 @@
<div class="bs-example">
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Icon">
<span id="inputSuccess5Icon" class="glyphicon glyphicon-ok form-control-feedback"><span class="sr-only">(success)</span></span>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
</div>
{% highlight html %}
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Icon">
<span id="inputSuccess5Icon" class="glyphicon glyphicon-ok form-control-feedback"><span class="sr-only">(success)</span></span>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
{% endhighlight %}

46
docs/_includes/getting-started/browser-device-support.html
View File

@ -19,33 +19,33 @@
<tbody>
<tr>
<th>Android</th>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not Supported</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
<td class="text-muted">N/A</td>
</tr>
<tr>
<th>iOS</th>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-muted">N/A</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
</tr>
<tr>
<th>Mac OS X</th>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
</tr>
<tr>
<th>Windows</th>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
</tr>
</tbody>
</table>
@ -67,26 +67,26 @@
<tbody>
<tr>
<th scope="row"><code>border-radius</code></th>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
</tr>
<tr>
<th scope="row"><code>box-shadow</code></th>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
</tr>
<tr>
<th scope="row"><code>transform</code></th>
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> Supported, with <code>-ms</code> prefix</td>
<td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
<td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported, with <code>-ms</code> prefix</td>
</tr>
<tr>
<th scope="row"><code>transition</code></th>
<td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
<td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
</tr>
<tr>
<th scope="row"><code>placeholder</code></th>
<td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove"></span> Not supported</td>
<td colspan="2" class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not supported</td>
</tr>
</tbody>
</table>

12
docs/_includes/js/carousel.html
View File

@ -23,11 +23,11 @@
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
@ -60,11 +60,11 @@
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
@ -108,11 +108,11 @@
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

2
docs/assets/js/customize.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
docs/assets/js/src/customizer.js
View File

@ -22,8 +22,8 @@ window.onload = function () { // wait for load in a dumb way because B-0
function showError(msg, err) {
$('<div id="bsCustomizerAlert" class="bs-customizer-alert">' +
'<div class="container">' +
'<a href="#bsCustomizerAlert" data-dismiss="alert" class="close pull-right">&times;</a>' +
'<p class="bs-customizer-alert-text"><span class="glyphicon glyphicon-warning-sign"></span>' + msg + '</p>' +
'<a href="#bsCustomizerAlert" data-dismiss="alert" class="close pull-right" aria-label="Close" role="button"><span aria-hidden="true">&times;</span></a>' +
'<p class="bs-customizer-alert-text"><span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span><span class="sr-only">Warning:</span>' + msg + '</p>' +
(err.extract ? '<pre class="bs-customizer-alert-extract">' + err.extract.join('\n') + '</pre>' : '') +
'</div>' +
'</div>').appendTo('body').alert()
@ -32,7 +32,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
function showSuccess(msg) {
$('<div class="bs-callout bs-callout-info">' +
'<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + msg +
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + msg +
'</div>').insertAfter('.bs-customize-download')
}
@ -50,7 +50,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
}
function showAlert(type, msg, insertAfter) {
$('<div class="alert alert-' + type + '">' + msg + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button></div>')
$('<div class="alert alert-' + type + '">' + msg + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>')
.insertAfter(insertAfter)
}

4
docs/examples/carousel/index.html
View File

@ -111,11 +111,11 @@
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->

4
docs/examples/theme/index.html
View File

@ -616,11 +616,11 @@
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>