diff --git a/components/index.html b/components/index.html index 5a874cc64a..2a22800363 100644 --- a/components/index.html +++ b/components/index.html @@ -1906,34 +1906,34 @@

We do not support multiple form-controls in a single input group.

- @ - + @ +

- - .00 + + @example.com

$ - + .00 
<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>
@@ -1941,33 +1941,33 @@

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

- @ - + @ +

- @ - + @ +

- @ - + @ + 
<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>
@@ -1978,17 +1978,17 @@
- + - +
- + - +
@@ -1997,17 +1997,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 --> @@ -2022,12 +2022,12 @@ - +
- + @@ -2041,12 +2041,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> @@ -2070,12 +2070,12 @@
  • Separated link
    • - +
    - +
    - +
    - +
    - +
    -
    -
    <nav class="navbar navbar-default" role="navigation">
+
    <nav class="navbar navbar-default">
   <div class="container-fluid">
     <!-- Brand and toggle get grouped for better mobile display -->
     <div class="navbar-header">
@@ -2500,17 +2500,17 @@
   
   
    Replace the navbar brand with your own image by swapping the text for an <img>. Since the .navbar-brand has its own padding and height, you may need to override some CSS depending on your image.
    
   
    
-    
    
-
    <nav class="navbar navbar-default" role="navigation">
+
    <nav class="navbar navbar-default">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">
@@ -2525,7 +2525,7 @@
   
    Place form content within .navbar-form for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.
    
   
    As a heads up, .navbar-form shares much of its code with .form-inline via mixin. Some form controls, like input groups, may require fixed widths to be show up properly within a navbar.
    
   
    
-