Styling and accessibility clarification for navs documentation #22472
Conversation
|
@mdo for context here, requesting review purely as a quick read-through/check that what i say about the |
| 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. |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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)
There was a problem hiding this comment.
@mdo are you ok with me just leaving this one callout in (and neutering the others)?
docs/components/navs.md
Outdated
| @@ -235,6 +239,10 @@ 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. | |||
|
|
|||
| {% callout info %} | |||
| 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. | |||
There was a problem hiding this comment.
This is under the section heading ## Regarding accessibility—I don't think it needs to be a callout.
There was a problem hiding this comment.
sure thing, can make this regular para
docs/components/navs.md
Outdated
|
|
||
| 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. | ||
|
|
||
| {% callout info %} | ||
| 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). |
There was a problem hiding this comment.
I'd remove this as a callout and treat it as generic text, too.
There was a problem hiding this comment.
fair enough, will make regular para
|
urgh, managed to completely mess up this PR with that rebase :( |
|
@mdo if you're ok with leaving just that first thing as a callout, as per my comment, i'm happy to close this PR and make a fresh clean one for merging... |
|
@mdo I may be bold and merge this with that one callout (which I think is quite easy to miss unless you're reading everything very carefully, and leaves you wondering why |
patrickhlauke
changed the title
Closes #22470