From 38c715316bc6d561a41bf4fa8e5eefa979c39ad0 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Thu, 9 Jul 2015 10:42:16 +0100
Subject: [PATCH] Add example with visible <label> and input group addon
Also, include visible <label> as a suggestion in the accessibility
callout.
---
docs/_includes/components/input-groups.html | 14 +++++++++++++-
1 file changed, 13 insertions(+), 1 deletion(-)
diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html
index 8d42b27cec..5d9a2f9c07 100644
--- a/docs/_includes/components/input-groups.html
+++ b/docs/_includes/components/input-groups.html
@@ -19,7 +19,7 @@
<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>
+ <p>The exact technique to be used (visible <code><label></code> elements, <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>
@@ -42,6 +42,12 @@
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
+ <br>
+ <label for="basic-url">Your vanity URL</label>
+ <div class="input-group">
+ <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
+ <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
+ </div>
</form>
{% highlight html %}
<div class="input-group">
@@ -59,6 +65,12 @@
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
+
+<label for="basic-url">Your vanity URL</label>
+<div class="input-group">
+ <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
+ <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
+</div>
{% endhighlight %}
<h2 id="input-groups-sizing">Sizing</h2>
--
GitLab