From 52e4b87b5a2ac6543f9a901946bea84966681216 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Mon, 8 Dec 2014 10:36:26 +0000
Subject: [PATCH 1/5] Expand advice for optional icons with hidden labels
to clarify/hint that a ``<label class="sr-only">`` is not the only way
to do it
---
docs/_includes/css/forms.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html
index 3ab202f7c9..d88498f8e1 100644
--- a/docs/_includes/css/forms.html
+++ b/docs/_includes/css/forms.html
@@ -764,7 +764,7 @@
{% endhighlight %}
<h4>Optional icons with hidden <code>.sr-only</code> labels</h4>
- <p>For form controls with no visible label, add the <code>.sr-only</code> class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.</p>
+ <p>If you use the <code>.sr-only</code> class to hide a form control's <code><label></code> (rather than using other labelling options, such as the <code>aria-label</code> attribute), Bootstrap will automatically adjust the position of the icon once it's been added.</p>
<div class="bs-example" data-example-id="form-validation-state-with-icon-without-label">
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
--
GitLab
From c918127e68ac320830f960ac8ab804378588db5b Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Mon, 8 Dec 2014 12:05:42 +0000
Subject: [PATCH 2/5] Split out/clarify ``<select>`` and ``multiple``
---
docs/_includes/css/forms.html | 25 ++++++++++++++++---------
1 file changed, 16 insertions(+), 9 deletions(-)
diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html
index d88498f8e1..031dcd8793 100644
--- a/docs/_includes/css/forms.html
+++ b/docs/_includes/css/forms.html
@@ -378,7 +378,6 @@
{% endhighlight %}
<h3>Selects</h3>
- <p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p>
<div class="bs-example" data-example-ids="select-form-control">
<form>
<select class="form-control">
@@ -388,14 +387,6 @@
<option>4</option>
<option>5</option>
</select>
- <br>
- <select multiple class="form-control">
- <option>1</option>
- <option>2</option>
- <option>3</option>
- <option>4</option>
- <option>5</option>
- </select>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
@@ -406,7 +397,23 @@
<option>4</option>
<option>5</option>
</select>
+{% endhighlight %}
+
+ <p>For <code><select></code> controls with the <code>multiple</code> attribute, multiple options are shown by default.</p>
+
+ <div class="bs-example" data-example-ids="select-multiple-form-control">
+ <form>
+ <select multiple class="form-control">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ </form>
+ </div><!-- /.bs-example -->
+{% highlight html %}
<select multiple class="form-control">
<option>1</option>
<option>2</option>
--
GitLab
From eee275762ff962121576f5aca93e0dfc52679d51 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Mon, 8 Dec 2014 14:03:04 +0000
Subject: [PATCH 3/5] Callout for labelling of input groups
plus a few suggested approaches (in some cases, elided, as the actual
content of the label - being a generic example - is not important)
---
docs/_includes/components/input-groups.html | 90 +++++++++++----------
1 file changed, 47 insertions(+), 43 deletions(-)
diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html
index 8a07735d2b..ba14573ba2 100644
--- a/docs/_includes/components/input-groups.html
+++ b/docs/_includes/components/input-groups.html
@@ -16,7 +16,11 @@
<h4>Don't mix with other components</h4>
<p>Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.</p>
</div>
-
+ <div class="bs-callout bs-callout-warning" id="callout-inputgroup-form-labels">
+ <h4>Always add labels</h4>
+ <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.</p>
+ <p>The exact technique to be used (<code><label></code> elements hidden using the <code>.sr-only</code> class, or use of the <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-describedby</code>, <code>title</code> or <code>placeholder</code> attribute) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.</p>
+ </div>
<h2 id="input-groups-basic">Basic example</h2>
<p>Place one add-on or button on either side of an input. You may also place one on both sides of an input.</p>
@@ -24,35 +28,35 @@
<p><strong class="text-danger">We do not support multiple form-controls in a single input group.</strong></p>
<form class="bs-example bs-example-form" data-example-id="simple-input-groups">
<div class="input-group">
- <span class="input-group-addon">@</span>
- <input type="text" class="form-control" placeholder="Username">
+ <span class="input-group-addon" id="basic-addon1">@</span>
+ <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<br>
<div class="input-group">
- <input type="text" class="form-control">
- <span class="input-group-addon">.00</span>
+ <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
+ <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
- <input type="text" class="form-control">
+ <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
</form>
{% highlight html %}
<div class="input-group">
- <span class="input-group-addon">@</span>
- <input type="text" class="form-control" placeholder="Username">
+ <span class="input-group-addon" id="basic-addon1">@</span>
+ <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
- <input type="text" class="form-control">
- <span class="input-group-addon">.00</span>
+ <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
+ <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
- <input type="text" class="form-control">
+ <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
{% endhighlight %}
@@ -61,34 +65,34 @@
<p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
<form class="bs-example bs-example-form" data-example-id="input-group-sizing">
<div class="input-group input-group-lg">
- <span class="input-group-addon">@</span>
- <input type="text" class="form-control" placeholder="Username">
+ <span class="input-group-addon" id="sizing-addon1">@</span>
+ <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<br>
<div class="input-group">
- <span class="input-group-addon">@</span>
- <input type="text" class="form-control" placeholder="Username">
+ <span class="input-group-addon" id="sizing-addon2">@</span>
+ <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<br>
<div class="input-group input-group-sm">
- <span class="input-group-addon">@</span>
- <input type="text" class="form-control" placeholder="Username">
+ <span class="input-group-addon" id="sizing-addon3">@</span>
+ <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
</form>
{% highlight html %}
<div class="input-group input-group-lg">
- <span class="input-group-addon">@</span>
- <input type="text" class="form-control" placeholder="Username">
+ <span class="input-group-addon" id="sizing-addon1">@</span>
+ <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
- <span class="input-group-addon">@</span>
- <input type="text" class="form-control" placeholder="Username">
+ <span class="input-group-addon" id="sizing-addon2">@</span>
+ <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
- <span class="input-group-addon">@</span>
- <input type="text" class="form-control" placeholder="Username">
+ <span class="input-group-addon" id="sizing-addon3">@</span>
+ <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
{% endhighlight %}
@@ -100,17 +104,17 @@
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
- <input type="checkbox">
+ <input type="checkbox" aria-label="Checkbox for following text input">
</span>
- <input type="text" class="form-control">
+ <input type="text" class="form-control" aria-label="Text input with checkbox">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
- <input type="radio">
+ <input type="radio" aria-label="Radio button for following text input">
</span>
- <input type="text" class="form-control">
+ <input type="text" class="form-control" aria-label="Text input with radio button">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
@@ -120,17 +124,17 @@
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
- <input type="checkbox">
+ <input type="checkbox" aria-label="...">
</span>
- <input type="text" class="form-control">
+ <input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
- <input type="radio">
+ <input type="radio" aria-label="...">
</span>
- <input type="text" class="form-control">
+ <input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
@@ -146,12 +150,12 @@
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
- <input type="text" class="form-control">
+ <input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
- <input type="text" class="form-control">
+ <input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
@@ -166,12 +170,12 @@
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
- <input type="text" class="form-control">
+ <input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
- <input type="text" class="form-control">
+ <input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
@@ -196,12 +200,12 @@
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
- <input type="text" class="form-control">
+ <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
- <input type="text" class="form-control">
+ <input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
@@ -230,12 +234,12 @@
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
- <input type="text" class="form-control">
+ <input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
- <input type="text" class="form-control">
+ <input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
@@ -270,12 +274,12 @@
<li><a href="#">Separated link</a></li>
</ul>
</div>
- <input type="text" class="form-control">
+ <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
</div><!-- /.input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
- <input type="text" class="form-control">
+ <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
<div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex="-1">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
@@ -299,11 +303,11 @@
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
- <input type="text" class="form-control">
+ <input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
- <input type="text" class="form-control">
+ <input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
--
GitLab
From 24bc10266425cbb401ce9d4b681060159162a8b2 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Mon, 8 Dec 2014 14:54:20 +0000
Subject: [PATCH 4/5] Use aria-label for pagination prev/next
Cleaner alternative to using ``<span class="sr-only">``
---
docs/_includes/components/pagination.html | 31 ++++++++++-------------
1 file changed, 13 insertions(+), 18 deletions(-)
diff --git a/docs/_includes/components/pagination.html b/docs/_includes/components/pagination.html
index 60485a587d..46ee1f1edb 100644
--- a/docs/_includes/components/pagination.html
+++ b/docs/_includes/components/pagination.html
@@ -9,9 +9,8 @@
<nav>
<ul class="pagination">
<li>
- <a href="#">
+ <a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
- <span class="sr-only">Previous</span>
</a>
</li>
<li><a href="#">1</a></li>
@@ -20,9 +19,8 @@
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
- <a href="#">
+ <a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
- <span class="sr-only">Next</span>
</a>
</li>
</ul>
@@ -32,9 +30,8 @@
<nav>
<ul class="pagination">
<li>
- <a href="#">
+ <a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
- <span class="sr-only">Previous</span>
</a>
</li>
<li><a href="#">1</a></li>
@@ -43,9 +40,8 @@
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
- <a href="#">
+ <a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
- <span class="sr-only">Next</span>
</a>
</li>
</ul>
@@ -57,20 +53,20 @@
<div class="bs-example" data-example-id="disabled-active-pagination">
<nav>
<ul class="pagination">
- <li class="disabled"><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
+ <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
- <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
+ <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
</div>
{% highlight html %}
<nav>
<ul class="pagination">
- <li class="disabled"><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
+ <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
@@ -83,7 +79,6 @@
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
- <span class="sr-only">Previous</span>
</span>
</li>
<li class="active">
@@ -100,35 +95,35 @@
<div class="bs-example" data-example-id="pagination-sizing">
<nav>
<ul class="pagination pagination-lg">
- <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
+ <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
- <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
+ <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
<nav>
<ul class="pagination">
- <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
+ <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
- <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
+ <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm">
- <li><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
+ <li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
- <li><a href="#"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
+ <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
</div>
--
GitLab
From 285ec7049393792503b2127932e4bc6a967d58b6 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Mon, 8 Dec 2014 15:25:02 +0000
Subject: [PATCH 5/5] Make main segmented button keyboard-focusable
unless there's a reason why ``tabindex="-1"`` was dropped in there...
---
docs/_includes/components/input-groups.html | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html
index ba14573ba2..665c5b7cc9 100644
--- a/docs/_includes/components/input-groups.html
+++ b/docs/_includes/components/input-groups.html
@@ -261,7 +261,7 @@
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
- <button type="button" class="btn btn-default" tabindex="-1">Action</button>
+ <button type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
@@ -281,7 +281,7 @@
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
<div class="input-group-btn">
- <button type="button" class="btn btn-default" tabindex="-1">Action</button>
+ <button type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
--
GitLab