Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Headings: accessibility, hierarchy, and cosmetics of in-line code therein #15915

Closed
wants to merge 13 commits into from
Closed
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/_includes/js/alerts.html
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,10 @@ <h2 id="alerts-usage">Usage</h2>

<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>


Expand Down
8 changes: 4 additions & 4 deletions docs/_includes/js/buttons.html
Original file line number Diff line number Diff line change
Expand Up @@ -115,15 +115,15 @@ <h4>Visual checked state only updated on click</h4>
{% 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">
...
Expand Down
12 changes: 6 additions & 6 deletions docs/_includes/js/carousel.html
Original file line number Diff line number Diff line change
Expand Up @@ -195,28 +195,28 @@ <h3 id="carousel-options">Options</h3>

<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({
interval: 2000
})
{% 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>
Expand Down
8 changes: 4 additions & 4 deletions docs/_includes/js/collapse.html
Original file line number Diff line number Diff line change
Expand Up @@ -220,21 +220,21 @@ <h3 id="collapse-options">Options</h3>

<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({
toggle: false
})
{% 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>
Expand Down
2 changes: 1 addition & 1 deletion docs/_includes/js/dropdowns.html
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ <h3 id="dropdowns-options">Options</h3>
<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>
Expand Down
8 changes: 4 additions & 4 deletions docs/_includes/js/modal.html
Original file line number Diff line number Diff line change
Expand Up @@ -456,23 +456,23 @@ <h3 id="modals-options">Options</h3>

<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({
keyboard: false
})
{% 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 %}

Expand Down
10 changes: 5 additions & 5 deletions docs/_includes/js/popovers.html
Original file line number Diff line number Diff line change
Expand Up @@ -248,22 +248,22 @@ <h4>Data attributes for individual popovers</h4>
</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>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 %}

Expand Down
2 changes: 1 addition & 1 deletion docs/_includes/js/scrollspy.html
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ <h3>Via JavaScript</h3>


<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 () {
Expand Down
2 changes: 1 addition & 1 deletion docs/_includes/js/tabs.html
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ <h3>Fade effect</h3>
{% 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>
Expand Down
10 changes: 5 additions & 5 deletions docs/_includes/js/tooltips.html
Original file line number Diff line number Diff line change
Expand Up @@ -209,22 +209,22 @@ <h4>Data attributes for individual tooltips</h4>

<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>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 %}

Expand Down
5 changes: 5 additions & 0 deletions docs/assets/css/src/docs.css
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,11 @@ body {
font-weight: normal;
}

/* In-line code within headings retain the heading background */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's inline and not in-line as far as I can tell.

Also, break one selector per line.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@XhmikosR Confirming: in-line is correct usage.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd rather have it inline.

h4 code, h3 code, h2 code {
background-color: inherit;
}

/* Outline button for use within the docs */
.btn-outline {
color: #563d7c;
Expand Down