Javascript docs: Accessibility and cosmetic changes to headings.

Closes #15915 by merging it.

diff --git a/docs/_includes/js/alerts.html b/docs/_includes/js/alerts.html
index 7f3bf99c2e4eb700d4e53e70a8b685de150ab12e..711fd6c40ce9b03db93cb6fc542464492b57e591 100644 (file)
--- 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 83bf0bfaae9c4c4dbdda1a07d594b9b5a547da5b..827906cd885f97736366aaf8c6fc6086eaab21c2 100644 (file)
--- 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 6234032fb8b73cc04d2b4d1bbf7e5906fa160e33..7d9d783679151e7d8edbe109c7fa4ef98e92b270 100644 (file)
--- 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 e193098cc10431bd5e71f3e4bbcdc46b3b4a1d3a..72b1e678504b45be27eff520917a3ab4d46d27a7 100644 (file)
--- 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 d00c4da38cd94c4ea7fe58cb6280f4ca32f6b2b4..98184eb9cc5dee604e2682ba503c636fcd4ff077 100644 (file)
--- 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 2e32331431793504c3e7c62ff941feeb8a7c2b8f..8f6b2fb6c7864123f326c5285761fd96837e7dbe 100644 (file)
--- 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 3616c15216b64fb794916cdf922581b70b852b59..5f8c6e6610d5824bedff1e12d2b173d3ea5120ba 100644 (file)
--- 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 7d5fa5b496da2bff6319048d0417555c9f95a42f..afac356e12e388d10855ab3f90d834e23736ee18 100644 (file)
--- 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 8622440fc82b55bad41e113facedd2f40b801146..b107ca6a22fa161885182a58f0bf12bb05a08d39 100644 (file)
--- 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 77a0d5cb508d125aff277daddc37e9207448d85d..c3fe17ec24749640f814829f6276ac6ccc4a871f 100644 (file)
--- 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 3c88d4865fc01cbe9ef84b3eef1e912e60fc7058..d95ba093c755cad09baee4528cb29050c766a01a 100644 (file)
--- 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;