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>&lt;label&gt;</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>&lt;label&gt;</code> elements, <code>&lt;label&gt;</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>