Javascript docs: Accessibility and cosmetic changes to headings.

Closes #15915 by merging it.

docs/_includes/js/alerts.html

@@ -36,10 +36,10 @@
 
   <h3 id="alerts-methods">Methods</h3>
 
-  <h4>$().alert()</h4>
+  <h4><code>$().alert()</code></h4>
   <p>Makes an alert listen for click events on descendant elements which have the <code>data-dismiss="alert"</code> attribute. (Not necessary when using the data-api's auto-initialization.)</p>
 
-  <h4>$().alert('close')</h4>
+  <h4><code>$().alert('close')</code></h4>
   <p>Closes an alert by removing it from the DOM. If the <code>.fade</code> and <code>.in</code> classes are present on the element, the alert will fade out before it is removed.</p>
 
 

docs/_includes/js/buttons.html

@@ -115,15 +115,15 @@
 {% endhighlight %}
 
   <h2 id="buttons-methods">Methods</h2>
-
-  <h4>$().button('toggle')</h4>
+  <h4><code>$().button('toggle')</code></h4>
   <p>Toggles push state. Gives the button the appearance that it has been activated.</p>
 
-  <h4>$().button('reset')</h4>
+  <h4><code>$().button('reset')</code></h4>
   <p>Resets button state - swaps text to original text.</p>
 
-  <h4>$().button(string)</h4>
+  <h4><code>$().button(string)</code></h4>
   <p>Swaps text to any data defined text state.</p>
+
 {% highlight html %}
 <button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
   ...

docs/_includes/js/carousel.html

@@ -195,7 +195,7 @@ $('.carousel').carousel()
 
   <h3 id="carousel-methods">Methods</h3>
 
-  <h4>.carousel(options)</h4>
+  <h4><code>.carousel(options)</code></h4>
   <p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
 {% highlight js %}
 $('.carousel').carousel({
@@ -203,20 +203,20 @@ $('.carousel').carousel({
 })
 {% endhighlight %}
 
-  <h4>.carousel('cycle')</h4>
+  <h4><code>.carousel('cycle')</code></h4>
   <p>Cycles through the carousel items from left to right.</p>
 
-  <h4>.carousel('pause')</h4>
+  <h4><code>.carousel('pause')</code></h4>
   <p>Stops the carousel from cycling through items.</p>
 
 
-  <h4>.carousel(number)</h4>
+  <h4><code>.carousel(number)</code></h4>
   <p>Cycles the carousel to a particular frame (0 based, similar to an array).</p>
 
-  <h4>.carousel('prev')</h4>
+  <h4><code>.carousel('prev')</code></h4>
   <p>Cycles to the previous item.</p>
 
-  <h4>.carousel('next')</h4>
+  <h4><code>.carousel('next')</code></h4>
   <p>Cycles to the next item.</p>
 
   <h3 id="carousel-events">Events</h3>

docs/_includes/js/collapse.html

@@ -220,7 +220,7 @@ $('.collapse').collapse()
 
   <h3 id="collapse-methods">Methods</h3>
 
-  <h4>.collapse(options)</h4>
+  <h4><code>.collapse(options)</code></h4>
   <p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.</p>
 {% highlight js %}
 $('#myCollapsible').collapse({
@@ -228,13 +228,13 @@ $('#myCollapsible').collapse({
 })
 {% endhighlight %}
 
-  <h4>.collapse('toggle')</h4>
+  <h4><code>.collapse('toggle')</code></h4>
   <p>Toggles a collapsible element to shown or hidden.</p>
 
-  <h4>.collapse('show')</h4>
+  <h4><code>.collapse('show')</code></h4>
   <p>Shows a collapsible element.</p>
 
-  <h4>.collapse('hide')</h4>
+  <h4><code>.collapse('hide')</code></h4>
   <p>Hides a collapsible element.</p>
 
   <h3 id="collapse-events">Events</h3>

docs/_includes/js/dropdowns.html

@@ -159,7 +159,7 @@ $('.dropdown-toggle').dropdown()
   <p><em>None</em></p>
 
   <h3 id="dropdowns-methods">Methods</h3>
-  <h4>$().dropdown('toggle')</h4>
+  <h4><code>$().dropdown('toggle')</code></h4>
   <p>Toggles the dropdown menu of a given navbar or tabbed navigation.</p>
 
   <h3 id="dropdowns-events">Events</h3>

docs/_includes/js/modal.html

@@ -456,7 +456,7 @@ $('#exampleModal').on('show.bs.modal', function (event) {
 
   <h3 id="modals-methods">Methods</h3>
 
-  <h4>.modal(options)</h4>
+  <h4><code>.modal(options)</code></h4>
   <p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
 {% highlight js %}
 $('#myModal').modal({
@@ -464,15 +464,15 @@ $('#myModal').modal({
 })
 {% endhighlight %}
 
-  <h4>.modal('toggle')</h4>
+  <h4><code>.modal('toggle')</code></h4>
   <p>Manually toggles a modal. <strong>Returns to the caller before the modal has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.modal</code> or <code>hidden.bs.modal</code> event occurs).</p>
   {% highlight js %}$('#myModal').modal('toggle'){% endhighlight %}
 
-  <h4>.modal('show')</h4>
+  <h4><code>.modal('show')</code></h4>
   <p>Manually opens a modal. <strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <code>shown.bs.modal</code> event occurs).</p>
   {% highlight js %}$('#myModal').modal('show'){% endhighlight %}
 
-  <h4>.modal('hide')</h4>
+  <h4><code>.modal('hide')</code></h4>
   <p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code>hidden.bs.modal</code> event occurs).</p>
   {% highlight js %}$('#myModal').modal('hide'){% endhighlight %}
 

docs/_includes/js/popovers.html

@@ -248,22 +248,22 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
   </div>
 
   <h3>Methods</h3>
-  <h4>$().popover(options)</h4>
+  <h4><code>$().popover(options)</code></h4>
   <p>Initializes popovers for an element collection.</p>
 
-  <h4>.popover('show')</h4>
+  <h4><code>.popover('show')</code></h4>
   <p>Reveals an element's popover. <strong>Returns to the caller before the popover has actually been shown</strong> (i.e. before the <code>shown.bs.popover</code> event occurs). This is considered a "manual" triggering of the popover. Popovers whose both title and content are zero-length are never displayed.</p>
   {% highlight js %}$('#element').popover('show'){% endhighlight %}
 
-  <h4>.popover('hide')</h4>
+  <h4><code>.popover('hide')</code></h4>
   <p>Hides an element's popover. <strong>Returns to the caller before the popover has actually been hidden</strong> (i.e. before the <code>hidden.bs.popover</code> event occurs). This is considered a "manual" triggering of the popover.</p>
   {% highlight js %}$('#element').popover('hide'){% endhighlight %}
 
-  <h4>.popover('toggle')</h4>
+  <h4><code>.popover('toggle')</code></h4>
   <p>Toggles an element's popover. <strong>Returns to the caller before the popover has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.popover</code> or <code>hidden.bs.popover</code> event occurs). This is considered a "manual" triggering of the popover.</p>
   {% highlight js %}$('#element').popover('toggle'){% endhighlight %}
 
-  <h4>.popover('destroy')</h4>
+  <h4><code>.popover('destroy')</code></h4>
   <p>Hides and destroys an element's popover. Popovers that use delegation (which are created using <a href="#popovers-options">the <code>selector</code> option</a>) cannot be individually destroyed on descendant trigger elements.</p>
   {% highlight js %}$('#element').popover('destroy'){% endhighlight %}
 

docs/_includes/js/scrollspy.html

@@ -94,7 +94,7 @@ $('body').scrollspy({ target: '#navbar-example' })
 
 
   <h3 id="scrollspy-methods">Methods</h3>
-  <h4>.scrollspy('refresh')</h4>
+  <h4><code>.scrollspy('refresh')</code></h4>
   <p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p>
 {% highlight js %}
 $('[data-spy="scroll"]').each(function () {

docs/_includes/js/tabs.html

@@ -92,7 +92,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
 {% endhighlight %}
 
   <h3 id="tabs-methods">Methods</h3>
-  <h4>$().tab</h4>
+  <h4><code>$().tab</code></h4>
   <p>
     Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.
   </p>

docs/_includes/js/tooltips.html

@@ -209,22 +209,22 @@ $('#example').tooltip(options)
 
   <h3 id="tooltips-methods">Methods</h3>
 
-  <h4>$().tooltip(options)</h4>
+  <h4><code>$().tooltip(options)</code></h4>
   <p>Attaches a tooltip handler to an element collection.</p>
 
-  <h4>.tooltip('show')</h4>
+  <h4><code>.tooltip('show')</code></h4>
   <p>Reveals an element's tooltip. <strong>Returns to the caller before the tooltip has actually been shown</strong> (i.e. before the <code>shown.bs.tooltip</code> event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.</p>
   {% highlight js %}$('#element').tooltip('show'){% endhighlight %}
 
-  <h4>.tooltip('hide')</h4>
+  <h4><code>.tooltip('hide')</code></h4>
   <p>Hides an element's tooltip. <strong>Returns to the caller before the tooltip has actually been hidden</strong> (i.e. before the <code>hidden.bs.tooltip</code> event occurs). This is considered a "manual" triggering of the tooltip.</p>
   {% highlight js %}$('#element').tooltip('hide'){% endhighlight %}
 
-  <h4>.tooltip('toggle')</h4>
+  <h4><code>.tooltip('toggle')</code></h4>
   <p>Toggles an element's tooltip. <strong>Returns to the caller before the tooltip has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.tooltip</code> or <code>hidden.bs.tooltip</code> event occurs). This is considered a "manual" triggering of the tooltip.</p>
   {% highlight js %}$('#element').tooltip('toggle'){% endhighlight %}
 
-  <h4>.tooltip('destroy')</h4>
+  <h4><code>.tooltip('destroy')</code></h4>
   <p>Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using <a href="#tooltips-options">the <code>selector</code> option</a>) cannot be individually destroyed on descendant trigger elements.</p>
   {% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
 

docs/assets/css/src/docs.css

@@ -28,6 +28,13 @@ body {
   font-weight: normal;
 }
 
+/* Inline code within headings retain the heading's background-color */
+h2 code,
+h3 code,
+h4 code {
+  background-color: inherit;
+}
+
 /* Outline button for use within the docs */
 .btn-outline {
   color: #563d7c;