Merge branch 'v4-dev' into btn-group-styling

docs/4.0/components/alerts.md

@@ -73,7 +73,7 @@ You can see this in action with a live demo:
 Enable dismissal of an alert via JavaScript:
 
 {% highlight js %}
-$(".alert").alert()
+$('.alert').alert()
 {% endhighlight %}
 
 Or with `data` attributes on a button **within the alert**, as demonstrated above:

docs/4.0/components/collapse.md

@@ -18,7 +18,7 @@ You can use a link with the `href` attribute, or a button with the `data-target`
 
 {% example html %}
 <p>
-  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
     Link with href
   </a>
   <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
@@ -39,7 +39,7 @@ Multiple `<button>` or `<a>` can show and hide an element if they each reference
 
 {% example html %}
 <p>
-  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
+  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
   <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
   <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
 </p>
@@ -70,7 +70,7 @@ Using the [card]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/card
   <div class="card">
     <div class="card-header" role="tab" id="headingOne">
       <h5 class="mb-0">
-        <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+        <a data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne">
           Collapsible Group Item #1
         </a>
       </h5>
@@ -85,7 +85,7 @@ Using the [card]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/card
   <div class="card">
     <div class="card-header" role="tab" id="headingTwo">
       <h5 class="mb-0">
-        <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+        <a class="collapsed" data-toggle="collapse" href="#collapseTwo" role="button" aria-expanded="false" aria-controls="collapseTwo">
           Collapsible Group Item #2
         </a>
       </h5>
@@ -99,7 +99,7 @@ Using the [card]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/card
   <div class="card">
     <div class="card-header" role="tab" id="headingThree">
       <h5 class="mb-0">
-        <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+        <a class="collapsed" data-toggle="collapse" href="#collapseThree" role="button" aria-expanded="false" aria-controls="collapseThree">
           Collapsible Group Item #3
         </a>
       </h5>
@@ -118,7 +118,7 @@ You can also create accordions with custom markup. Add the `data-children` attri
 {% example html %}
 <div id="exampleAccordion" data-children=".item">
   <div class="item">
-    <a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion1" aria-expanded="true" aria-controls="exampleAccordion1">
+    <a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion1" role="button" aria-expanded="true" aria-controls="exampleAccordion1">
       Toggle item
     </a>
     <div id="exampleAccordion1" class="collapse show" role="tabpanel">
@@ -128,7 +128,7 @@ You can also create accordions with custom markup. Add the `data-children` attri
     </div>
   </div>
   <div class="item">
-    <a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion2" aria-expanded="false" aria-controls="exampleAccordion2">
+    <a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion2" role="button" aria-expanded="false" aria-controls="exampleAccordion2">
       Toggle item 2
     </a>
     <div id="exampleAccordion2" class="collapse" role="tabpanel">
@@ -142,7 +142,7 @@ You can also create accordions with custom markup. Add the `data-children` attri
 
 ## Accessibility
 
-Be sure to add `aria-expanded` to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `show` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsbile element).
+Be sure to add `aria-expanded` to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `show` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsbile element). If the control element's HTML element is not a button (e.g., an `<a>` or `<div>`), the attribute `role="button"` should be added to the element.
 
 Additionally, if your control element is targeting a single collapsible element – i.e. the `data-target` attribute is pointing to an `id` selector – you may add an additional `aria-controls` attribute to the control element, containing the `id` of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.
 

docs/4.0/components/list-group.md

@@ -254,9 +254,9 @@ You can activate individual list item in several ways:
 
 {% highlight js %}
 $('#myList a[href="#profile"]').tab('show') // Select tab by name
-$('#myList a:first').tab('show') // Select first tab
-$('#myList a:last').tab('show') // Select last tab
-$('#myList li:eq(2) a').tab('show') // Select third tab (0-indexed)
+$('#myList a:first-child').tab('show') // Select first tab
+$('#myList a:last-child').tab('show') // Select last tab
+$('#myList a:nth-child(3)').tab('show') // Select third tab
 {% endhighlight %}
 
 ### Fade effect
@@ -295,7 +295,7 @@ Activates a list item element and content container. Tab should have either a `d
 
 <script>
   $(function () {
-    $('#myList a:last').tab('show')
+    $('#myList a:last-child').tab('show')
   })
 </script>
 {% endhighlight %}

docs/4.0/components/navs.md

@@ -522,9 +522,9 @@ You can activate individual tabs in several ways:
 
 {% highlight js %}
 $('#myTab a[href="#profile"]').tab('show') // Select tab by name
-$('#myTab a:first').tab('show') // Select first tab
-$('#myTab a:last').tab('show') // Select last tab
-$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
+$('#myTab li:first-child a').tab('show') // Select first tab
+$('#myTab li:last-child a').tab('show') // Select last tab
+$('#myTab li:nth-child(3) a').tab('show') // Select third tab
 {% endhighlight %}
 
 ### Fade effect
@@ -574,7 +574,7 @@ Activates a tab element and content container. Tab should have either a `data-ta
 
 <script>
   $(function () {
-    $('#myTab a:last').tab('show')
+    $('#myTab li:last-child a').tab('show')
   })
 </script>
 {% endhighlight %}

js/tests/unit/carousel.js

@@ -120,17 +120,17 @@ $(function () {
       .one('slide.bs.carousel', function (e) {
         e.preventDefault()
         setTimeout(function () {
-          assert.ok($carousel.find('.carousel-item:eq(0)').is('.active'), 'first item still active')
-          assert.ok($carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active')
+          assert.ok($carousel.find('.carousel-item:nth-child(1)').is('.active'), 'first item still active')
+          assert.ok($carousel.find('.carousel-indicators li:nth-child(1)').is('.active'), 'first indicator still active')
           $carousel.bootstrapCarousel('next')
         }, 0)
       })
       .one('slid.bs.carousel', function () {
         setTimeout(function () {
-          assert.ok(!$carousel.find('.carousel-item:eq(0)').is('.active'), 'first item still active')
-          assert.ok(!$carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active')
-          assert.ok($carousel.find('.carousel-item:eq(1)').is('.active'), 'second item active')
-          assert.ok($carousel.find('.carousel-indicators li:eq(1)').is('.active'), 'second indicator active')
+          assert.ok(!$carousel.find('.carousel-item:nth-child(1)').is('.active'), 'first item still active')
+          assert.ok(!$carousel.find('.carousel-indicators li:nth-child(1)').is('.active'), 'first indicator still active')
+          assert.ok($carousel.find('.carousel-item:nth-child(2)').is('.active'), 'second item active')
+          assert.ok($carousel.find('.carousel-indicators li:nth-child(2)').is('.active'), 'second indicator active')
           done()
         }, 0)
       })

js/tests/unit/tab.js

@@ -53,10 +53,10 @@ $(function () {
 
     $('<ul><li id="home"/><li id="profile"/></ul>').appendTo('#qunit-fixture')
 
-    $(tabsHTML).find('li:last a').bootstrapTab('show')
+    $(tabsHTML).find('li:last-child a').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
 
-    $(tabsHTML).find('li:first a').bootstrapTab('show')
+    $(tabsHTML).find('li:first-child a').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
   })
 
@@ -69,10 +69,10 @@ $(function () {
 
     $('<ul><li id="home"/><li id="profile"/></ul>').appendTo('#qunit-fixture')
 
-    $(pillsHTML).find('li:last a').bootstrapTab('show')
+    $(pillsHTML).find('li:last-child a').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
 
-    $(pillsHTML).find('li:first a').bootstrapTab('show')
+    $(pillsHTML).find('li:first-child a').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
   })
 
@@ -85,10 +85,10 @@ $(function () {
 
     $('<ol><li id="home"/><li id="profile"/></ol>').appendTo('#qunit-fixture')
 
-    $(pillsHTML).find('li:last a').bootstrapTab('show')
+    $(pillsHTML).find('li:last-child a').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
 
-    $(pillsHTML).find('li:first a').bootstrapTab('show')
+    $(pillsHTML).find('li:first-child a').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
   })
 
@@ -101,10 +101,10 @@ $(function () {
 
     $('<nav><div id="home"></div><div id="profile"></div></nav>').appendTo('#qunit-fixture')
 
-    $(tabsHTML).find('a:last').bootstrapTab('show')
+    $(tabsHTML).find('a:last-child').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
 
-    $(tabsHTML).find('a:first').bootstrapTab('show')
+    $(tabsHTML).find('a:first-child').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
   })
 
@@ -117,10 +117,10 @@ $(function () {
 
     $('<nav><div id="home"></div><div id="profile"></div></nav>').appendTo('#qunit-fixture')
 
-    $(tabsHTML).find('a:last').bootstrapTab('show')
+    $(tabsHTML).find('a:last-child').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
 
-    $(tabsHTML).find('a:first').bootstrapTab('show')
+    $(tabsHTML).find('a:first-child').bootstrapTab('show')
     assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
   })
 
@@ -193,10 +193,10 @@ $(function () {
         + '</ul>'
 
     $(dropHTML)
-      .find('ul > li:first a')
+      .find('ul > li:first-child a')
         .bootstrapTab('show')
       .end()
-      .find('ul > li:last a')
+      .find('ul > li:last-child a')
         .on('show.bs.tab', function (e) {
           assert.strictEqual(e.relatedTarget.hash, '#1-1', 'references correct element as relatedTarget')
         })
@@ -217,24 +217,24 @@ $(function () {
         + '</ul>'
 
     $(tabsHTML)
-      .find('li:first a')
+      .find('li:first-child a')
         .on('hide.bs.tab', function () {
           assert.ok(true, 'hide event fired')
         })
         .bootstrapTab('show')
       .end()
-      .find('li:last a')
+      .find('li:last-child a')
         .bootstrapTab('show')
 
     $(tabsHTML)
-      .find('li:first a')
+      .find('li:first-child a')
         .on('hidden.bs.tab', function () {
           assert.ok(true, 'hidden event fired')
           done()
         })
         .bootstrapTab('show')
       .end()
-      .find('li:last a')
+      .find('li:last-child a')
         .bootstrapTab('show')
   })
 
@@ -248,7 +248,7 @@ $(function () {
         + '</ul>'
 
     $(tabsHTML)
-      .find('li:first a')
+      .find('li:first-child a')
         .on('hide.bs.tab', function (e) {
           e.preventDefault()
           assert.ok(true, 'hide event fired')
@@ -259,7 +259,7 @@ $(function () {
         })
         .bootstrapTab('show')
       .end()
-      .find('li:last a')
+      .find('li:last-child a')
         .bootstrapTab('show')
   })
 
@@ -273,7 +273,7 @@ $(function () {
         + '</ul>'
 
     $(tabsHTML)
-      .find('li:first a')
+      .find('li:first-child a')
         .on('hide.bs.tab', function (e) {
           assert.strictEqual(e.relatedTarget.hash, '#profile', 'references correct element as relatedTarget')
         })
@@ -283,7 +283,7 @@ $(function () {
         })
         .bootstrapTab('show')
       .end()
-      .find('li:last a')
+      .find('li:last-child a')
         .bootstrapTab('show')
   })
 
@@ -295,19 +295,19 @@ $(function () {
         + '</ul>'
     var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
 
-    $tabs.find('li:first a').bootstrapTab('show')
+    $tabs.find('li:first-child a').bootstrapTab('show')
     assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'shown tab has aria-selected = true')
     assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'hidden tab has aria-selected = false')
 
-    $tabs.find('li:last a').trigger('click')
+    $tabs.find('li:last-child a').trigger('click')
     assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'after click, shown tab has aria-selected = true')
     assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'after click, hidden tab has aria-selected = false')
 
-    $tabs.find('li:first a').bootstrapTab('show')
+    $tabs.find('li:first-child a').bootstrapTab('show')
     assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'shown tab has aria-selected = true')
     assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'hidden tab has aria-selected = false')
 
-    $tabs.find('li:first a').trigger('click')
+    $tabs.find('li:first-child a').trigger('click')
     assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'after second show event, shown tab still has aria-selected = true')
     assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'after second show event, hidden tab has aria-selected = false')
   })
@@ -320,9 +320,9 @@ $(function () {
         + '</ul>'
     var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
 
-    $tabs.find('li:last a').trigger('click')
-    assert.notOk($tabs.find('li:first a').hasClass('active'))
-    assert.ok($tabs.find('li:last a').hasClass('active'))
+    $tabs.find('li:last-child a').trigger('click')
+    assert.notOk($tabs.find('li:first-child a').hasClass('active'))
+    assert.ok($tabs.find('li:last-child a').hasClass('active'))
   })
 
   QUnit.test('selected tab should deactivate previous selected link in dropdown', function (assert) {
@@ -339,10 +339,10 @@ $(function () {
         + '</ul>'
     var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
 
-    $tabs.find('li:first > a').trigger('click')
-    assert.ok($tabs.find('li:first a').hasClass('active'))
-    assert.notOk($tabs.find('li:last > a').hasClass('active'))
-    assert.notOk($tabs.find('li:last > .dropdown-menu > a:first').hasClass('active'))
+    $tabs.find('li:first-child a').trigger('click')
+    assert.ok($tabs.find('li:first-child a').hasClass('active'))
+    assert.notOk($tabs.find('li:last-child a').hasClass('active'))
+    assert.notOk($tabs.find('li:last-child .dropdown-menu a:first-child').hasClass('active'))
   })
 
   QUnit.test('Nested tabs', function (assert) {