From 457885075f8fa004f3a190efdcf381af218e1bb7 Mon Sep 17 00:00:00 2001
From: Steven Black <steveb@stevenblack.com>
Date: Wed, 25 Feb 2015 04:00:37 +0200
Subject: [PATCH] Javascript docs: Accessibility and cosmetic changes to
 headings.

Closes #15915 by merging it.
---
 docs/_includes/js/alerts.html    |  4 ++--
 docs/_includes/js/buttons.html   |  8 ++++----
 docs/_includes/js/carousel.html  | 12 ++++++------
 docs/_includes/js/collapse.html  |  8 ++++----
 docs/_includes/js/dropdowns.html |  2 +-
 docs/_includes/js/modal.html     |  8 ++++----
 docs/_includes/js/popovers.html  | 10 +++++-----
 docs/_includes/js/scrollspy.html |  2 +-
 docs/_includes/js/tabs.html      |  2 +-
 docs/_includes/js/tooltips.html  | 10 +++++-----
 docs/assets/css/src/docs.css     |  7 +++++++
 11 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/docs/_includes/js/alerts.html b/docs/_includes/js/alerts.html
index 7f3bf99c2e..711fd6c40c 100644
--- a/docs/_includes/js/alerts.html
+++ b/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>
 
 
diff --git a/docs/_includes/js/buttons.html b/docs/_includes/js/buttons.html
index 83bf0bfaae..827906cd88 100644
--- a/docs/_includes/js/buttons.html
+++ b/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">
   ...
diff --git a/docs/_includes/js/carousel.html b/docs/_includes/js/carousel.html
index 6234032fb8..7d9d783679 100644
--- a/docs/_includes/js/carousel.html
+++ b/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>
diff --git a/docs/_includes/js/collapse.html b/docs/_includes/js/collapse.html
index e193098cc1..72b1e67850 100644
--- a/docs/_includes/js/collapse.html
+++ b/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>
diff --git a/docs/_includes/js/dropdowns.html b/docs/_includes/js/dropdowns.html
index d00c4da38c..98184eb9cc 100644
--- a/docs/_includes/js/dropdowns.html
+++ b/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>
diff --git a/docs/_includes/js/modal.html b/docs/_includes/js/modal.html
index 2e32331431..8f6b2fb6c7 100644
--- a/docs/_includes/js/modal.html
+++ b/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 %}
 
diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html
index 3616c15216..5f8c6e6610 100644
--- a/docs/_includes/js/popovers.html
+++ b/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 %}
 
diff --git a/docs/_includes/js/scrollspy.html b/docs/_includes/js/scrollspy.html
index 7d5fa5b496..afac356e12 100644
--- a/docs/_includes/js/scrollspy.html
+++ b/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 () {
diff --git a/docs/_includes/js/tabs.html b/docs/_includes/js/tabs.html
index 8622440fc8..b107ca6a22 100644
--- a/docs/_includes/js/tabs.html
+++ b/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>
diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html
index 77a0d5cb50..c3fe17ec24 100644
--- a/docs/_includes/js/tooltips.html
+++ b/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 %}
 
diff --git a/docs/assets/css/src/docs.css b/docs/assets/css/src/docs.css
index 3c88d4865f..d95ba093c7 100644
--- a/docs/assets/css/src/docs.css
+++ b/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;