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.

Sign up for GitHub

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

Jump to bottom

Styling and accessibility clarification for navs documentation #22472

Merged
merged 5 commits into from
May 4, 2017
+10 −2
Merged

Styling and accessibility clarification for navs documentation #22472

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f8f694f
Split out/expand mention that base navs lack active styles
patrickhlauke Apr 19, 2017
2737c94
Add accessibility callouts for navigation bars vs dynamic tabbed inte…
patrickhlauke Apr 19, 2017
3c40c73
Remove callout markers, make regular paragraphs
patrickhlauke Apr 22, 2017
779aa04
Merge branch 'v4-dev' into v4-docs-navbar-fixup1
patrickhlauke Apr 28, 2017
d6ae2b5
Merge branch 'v4-dev' into v4-docs-navbar-fixup1
patrickhlauke May 4, 2017
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
12 changes: 10 additions & 2 deletions docs/components/navs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@ Navigation available in Bootstrap share general markup and styles, from the base

## Base nav

The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling. No active states are included in the base nav.
The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.

{% callout info %}
The base `.nav` component does not include any `.active` state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.
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 prefer to keep this as the single sentence in the above paragraph. I don't think this really clarifies anything and instead draws attention away from what .nav includes.

Copy link
Member Author

Choose a reason for hiding this comment

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

i think as this is a bit "meta" (in that it clarifies why all the following examples use .active but don't look any different) it would warrant being in a callout. otherwise it can and will easily be missed (see #22470)

Copy link
Member Author

Choose a reason for hiding this comment

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

@mdo are you ok with me just leaving this one callout in (and neutering the others)?

{% endcallout %}

{% example html %}
<ul class="nav">
Expand Down Expand Up @@ -235,6 +239,8 @@ If you need responsive nav variations, consider using a series of [flexbox utili

If you're using navs to provide a navigation bar, be sure to add a `role="navigation"` to the most logical parent container of the `<ul>`, or wrap a `<nav>` element around the whole navigation. Do not add the role to the `<ul>` itself, as this would prevent it from being announced as an actual list by assistive technologies.

Note that navigation bars, even if visually styled as tabs with the `.nav-tabs` class, should **not** be given `role="tablist"`, `role="tab"` or `role="tabpanel"` attributes. These are only appropriate for dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel). See [JavaScript behavior for dynamic tabbed interfaces](#javascript-behavior-for-dynamic-tabbed-interfaces) in this section for an example.

## Using dropdowns

Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}/components/dropdowns/#usage).
Expand Down Expand Up @@ -291,10 +297,12 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
</ul>
{% endexample %}

## JavaScript behavior
## JavaScript behavior for dynamic tabbed interfaces

Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.

Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).

<div class="bd-example bd-example-tabs">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
Expand Down