diff options
18 files changed, 68 insertions, 63 deletions
diff --git a/site/content/docs/4.3/components/card.md b/site/content/docs/4.3/components/card.md index 94abe9185..14ec94e06 100644 --- a/site/content/docs/4.3/components/card.md +++ b/site/content/docs/4.3/components/card.md @@ -290,7 +290,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item"> - <a class="nav-link active" href="#">Active</a> + <a class="nav-link active" aria-current="true" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> diff --git a/site/content/docs/4.3/components/dropdowns.md b/site/content/docs/4.3/components/dropdowns.md index 460aece5a..e53dc71ce 100644 --- a/site/content/docs/4.3/components/dropdowns.md +++ b/site/content/docs/4.3/components/dropdowns.md @@ -560,12 +560,12 @@ You can also create non-interactive dropdown items with `.dropdown-item-text`. F ### Active -Add `.active` to items in the dropdown to **style them as active**. +Add `.active` to items in the dropdown to **style them as active**. To convey the active state to assistive technologies, use the `aria-current` attribute — using the `page` value for the current page, or `true` for the current item in a set. {{< example >}} <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Regular link</a></li> - <li><a class="dropdown-item active" href="#">Active link</a></li> + <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li> <li><a class="dropdown-item" href="#">Another link</a></li> </ul> {{< /example >}} diff --git a/site/content/docs/4.3/components/list-group.md b/site/content/docs/4.3/components/list-group.md index a9bb3acd2..a8aad394d 100644 --- a/site/content/docs/4.3/components/list-group.md +++ b/site/content/docs/4.3/components/list-group.md @@ -26,7 +26,7 @@ Add `.active` to a `.list-group-item` to indicate the current active selection. {{< example >}} <ul class="list-group"> - <li class="list-group-item active">Cras justo odio</li> + <li class="list-group-item active" aria-current="true">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> @@ -56,7 +56,7 @@ Be sure to **not use the standard `.btn` classes here**. {{< example >}} <div class="list-group"> - <a href="#" class="list-group-item list-group-item-action active"> + <a href="#" class="list-group-item list-group-item-action active" aria-current="true"> Cras justo odio </a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> @@ -70,7 +70,7 @@ With `<button>`s, you can also make use of the `disabled` attribute instead of t {{< example >}} <div class="list-group"> - <button type="button" class="list-group-item list-group-item-action active"> + <button type="button" class="list-group-item list-group-item-action active" aria-current="true"> Cras justo odio </button> <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button> @@ -171,7 +171,7 @@ Add nearly any HTML within, even for linked list groups like the one below, with {{< example >}} <div class="list-group"> - <a href="#" class="list-group-item list-group-item-action active"> + <a href="#" class="list-group-item list-group-item-action active" aria-current="true"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small>3 days ago</small> diff --git a/site/content/docs/4.3/components/navbar.md b/site/content/docs/4.3/components/navbar.md index 5b6e9b93a..18d0bbce1 100644 --- a/site/content/docs/4.3/components/navbar.md +++ b/site/content/docs/4.3/components/navbar.md @@ -15,6 +15,7 @@ Here's what you need to know before getting started with the navbar: - Use our [spacing]({{< docsref "/utilities/spacing" >}}) and [flex]({{< docsref "/utilities/flex" >}}) utility classes for controlling spacing and alignment within navbars. - Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin. - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies. +- Indicate the current item by using `aria-current="page"` for the current page or `aria-current="true"` for the current item in a set. {{< callout info >}} {{< partial "callout-info-prefersreducedmotion.md" >}} @@ -46,7 +47,7 @@ Here's an example of all the sub-components included in a responsive light-theme <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -128,6 +129,8 @@ Navbar navigation links build on our `.nav` options with their own modifier clas Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s. +Please note that you should also add the `aria-current` attribute on the `.nav-link` itself. + {{< example >}} <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> @@ -138,7 +141,7 @@ Active states—with `.active`—to indicate the current page can be applied dir <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> @@ -166,7 +169,7 @@ And because we use classes for our navs, you can avoid the list-based approach e </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> - <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-item nav-link active" aria-current="page" href="#">Home</a> <a class="nav-item nav-link" href="#">Features</a> <a class="nav-item nav-link" href="#">Pricing</a> <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> @@ -188,7 +191,7 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> @@ -297,7 +300,7 @@ Mix and match with other components and utilities as needed. <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> @@ -328,7 +331,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl <div class="collapse navbar-collapse" id="navbarColor01"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> @@ -357,7 +360,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl <div class="collapse navbar-collapse" id="navbarColor02"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> @@ -386,7 +389,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl <div class="collapse navbar-collapse" id="navbarColor03"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> @@ -505,7 +508,7 @@ With no `.navbar-brand` shown in lowest breakpoint: <a class="navbar-brand" href="#">Hidden brand</a> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -536,7 +539,7 @@ With a brand name shown on the left and toggler on the right: <div class="collapse navbar-collapse" id="navbarTogglerDemo02"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -567,7 +570,7 @@ With a toggler on the left and brand name on the right: <div class="collapse navbar-collapse" id="navbarTogglerDemo03"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> diff --git a/site/content/docs/4.3/components/navs.md b/site/content/docs/4.3/components/navs.md index 9dbf0fa61..adbb7749b 100644 --- a/site/content/docs/4.3/components/navs.md +++ b/site/content/docs/4.3/components/navs.md @@ -14,12 +14,14 @@ The base `.nav` component is built with flexbox and provide a strong foundation {{< 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. + +To convey the active state to assistive technologies, use the `aria-current` attribute — using the `page` value for current page, or `true` for the current item in a set. {{< /callout >}} {{< example >}} <ul class="nav"> <li class="nav-item"> - <a class="nav-link active" href="#">Active</a> + <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -37,7 +39,7 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l {{< example >}} <nav class="nav"> - <a class="nav-link active" href="#">Active</a> + <a class="nav-link active" aria-current="page" href="#">Active</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> @@ -57,7 +59,7 @@ Centered with `.justify-content-center`: {{< example >}} <ul class="nav justify-content-center"> <li class="nav-item"> - <a class="nav-link active" href="#">Active</a> + <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -76,7 +78,7 @@ Right-aligned with `.justify-content-end`: {{< example >}} <ul class="nav justify-content-end"> <li class="nav-item"> - <a class="nav-link active" href="#">Active</a> + <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -97,7 +99,7 @@ Stack your navigation by changing the flex item direction with the `.flex-column {{< example >}} <ul class="nav flex-column"> <li class="nav-item"> - <a class="nav-link active" href="#">Active</a> + <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -115,7 +117,7 @@ As always, vertical navigation is possible without `<ul>`s, too. {{< example >}} <nav class="nav flex-column"> - <a class="nav-link active" href="#">Active</a> + <a class="nav-link active" aria-current="page" href="#">Active</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> @@ -129,7 +131,7 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb {{< example >}} <ul class="nav nav-tabs"> <li class="nav-item"> - <a class="nav-link active" href="#">Active</a> + <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -150,7 +152,7 @@ Take that same HTML, but use `.nav-pills` instead: {{< example >}} <ul class="nav nav-pills"> <li class="nav-item"> - <a class="nav-link active" href="#">Active</a> + <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -171,7 +173,7 @@ Force your `.nav`'s contents to extend the full available width one of two modif {{< example >}} <ul class="nav nav-pills nav-fill"> <li class="nav-item"> - <a class="nav-link active" href="#">Active</a> + <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Much longer nav link</a> @@ -189,7 +191,7 @@ When using a `<nav>`-based navigation, be sure to include `.nav-item` on the anc {{< example >}} <nav class="nav nav-pills nav-fill"> - <a class="nav-item nav-link active" href="#">Active</a> + <a class="nav-item nav-link active" aria-current="page" href="#">Active</a> <a class="nav-item nav-link" href="#">Much longer nav link</a> <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> @@ -201,7 +203,7 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ {{< example >}} <ul class="nav nav-pills nav-justified"> <li class="nav-item"> - <a class="nav-link active" href="#">Active</a> + <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Much longer nav link</a> @@ -219,7 +221,7 @@ Similar to the `.nav-fill` example using a `<nav>`-based navigation, be sure to {{< example >}} <nav class="nav nav-pills nav-justified"> - <a class="nav-item nav-link active" href="#">Active</a> + <a class="nav-item nav-link active" aria-current="page" href="#">Active</a> <a class="nav-item nav-link" href="#">Much longer nav link</a> <a class="nav-item nav-link" href="#">Link</a> <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> @@ -232,7 +234,7 @@ If you need responsive nav variations, consider using a series of [flexbox utili {{< example >}} <nav class="nav nav-pills flex-column flex-sm-row"> - <a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a> + <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a> <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a> <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a> <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> @@ -243,7 +245,7 @@ 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](#javascript-behavior) for dynamic tabbed interfaces in this section for an example. +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](#javascript-behavior) for dynamic tabbed interfaces in this section for an example. The `aria-current` attribute is not necessary on dynamic tabbed interfaces since our JavaScript handles the selected state by adding `aria-selected="true"` on the active tab. ## Using dropdowns @@ -254,7 +256,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin {{< example >}} <ul class="nav nav-tabs"> <li class="nav-item"> - <a class="nav-link active" href="#">Active</a> + <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> @@ -280,7 +282,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin {{< example >}} <ul class="nav nav-pills"> <li class="nav-item"> - <a class="nav-link active" href="#">Active</a> + <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a> diff --git a/site/content/docs/4.3/examples/carousel/index.html b/site/content/docs/4.3/examples/carousel/index.html index bf0e5e509..3ce8367b8 100644 --- a/site/content/docs/4.3/examples/carousel/index.html +++ b/site/content/docs/4.3/examples/carousel/index.html @@ -15,7 +15,7 @@ extra_css: <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> diff --git a/site/content/docs/4.3/examples/cover/index.html b/site/content/docs/4.3/examples/cover/index.html index d47a02a78..cce84690b 100644 --- a/site/content/docs/4.3/examples/cover/index.html +++ b/site/content/docs/4.3/examples/cover/index.html @@ -13,7 +13,7 @@ include_js: false <div> <h3 class="float-md-left mb-0">Cover</h3> <nav class="nav nav-masthead justify-content-center float-md-right"> - <a class="nav-link active" href="#">Home</a> + <a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link" href="#">Features</a> <a class="nav-link" href="#">Contact</a> </nav> diff --git a/site/content/docs/4.3/examples/dashboard/index.html b/site/content/docs/4.3/examples/dashboard/index.html index 0e208f2ec..f030eeeff 100644 --- a/site/content/docs/4.3/examples/dashboard/index.html +++ b/site/content/docs/4.3/examples/dashboard/index.html @@ -27,9 +27,9 @@ extra_js: <div class="sidebar-sticky"> <ul class="nav flex-column"> <li class="nav-item"> - <a class="nav-link active" href="#"> + <a class="nav-link active" aria-current="page" href="#"> <span data-feather="home"></span> - Dashboard <span class="sr-only">(current)</span> + Dashboard </a> </li> <li class="nav-item"> diff --git a/site/content/docs/4.3/examples/navbar-bottom/index.html b/site/content/docs/4.3/examples/navbar-bottom/index.html index 278efde0e..af8ffd53e 100644 --- a/site/content/docs/4.3/examples/navbar-bottom/index.html +++ b/site/content/docs/4.3/examples/navbar-bottom/index.html @@ -19,7 +19,7 @@ title: Bottom navbar example <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> diff --git a/site/content/docs/4.3/examples/navbar-fixed/index.html b/site/content/docs/4.3/examples/navbar-fixed/index.html index 073e2f63e..a3e8a6768 100644 --- a/site/content/docs/4.3/examples/navbar-fixed/index.html +++ b/site/content/docs/4.3/examples/navbar-fixed/index.html @@ -14,7 +14,7 @@ extra_css: <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> diff --git a/site/content/docs/4.3/examples/navbar-static/index.html b/site/content/docs/4.3/examples/navbar-static/index.html index 46f7cb87c..07b36d37c 100644 --- a/site/content/docs/4.3/examples/navbar-static/index.html +++ b/site/content/docs/4.3/examples/navbar-static/index.html @@ -14,7 +14,7 @@ extra_css: <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> diff --git a/site/content/docs/4.3/examples/navbars/index.html b/site/content/docs/4.3/examples/navbars/index.html index 7e40d3f78..4879a96a8 100644 --- a/site/content/docs/4.3/examples/navbars/index.html +++ b/site/content/docs/4.3/examples/navbars/index.html @@ -15,7 +15,7 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample01"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -49,7 +49,7 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample02"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -72,7 +72,7 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample03"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -106,7 +106,7 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample04"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -140,7 +140,7 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample05"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -174,7 +174,7 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample06"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -208,7 +208,7 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample07"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -242,7 +242,7 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample07XL"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -279,7 +279,7 @@ extra_css: <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08"> <ul class="navbar-nav"> <li class="nav-item active"> - <a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Centered nav only</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -311,7 +311,7 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExample09"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> @@ -344,7 +344,7 @@ extra_css: <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10"> <ul class="navbar-nav"> <li class="nav-item active"> - <a class="nav-link" href="#">Centered nav only <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Centered nav only</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> diff --git a/site/content/docs/4.3/examples/offcanvas/index.html b/site/content/docs/4.3/examples/offcanvas/index.html index f8f9bb295..442aa844e 100644 --- a/site/content/docs/4.3/examples/offcanvas/index.html +++ b/site/content/docs/4.3/examples/offcanvas/index.html @@ -18,7 +18,7 @@ body_class: "bg-light" <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Dashboard</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Notifications</a> @@ -48,7 +48,7 @@ body_class: "bg-light" <div class="nav-scroller bg-white shadow-sm"> <nav class="nav nav-underline"> - <a class="nav-link active" href="#">Dashboard</a> + <a class="nav-link active" aria-current="page" href="#">Dashboard</a> <a class="nav-link" href="#"> Friends <span class="badge bg-light text-dark rounded-pill align-text-bottom">27</span> diff --git a/site/content/docs/4.3/examples/starter-template/index.html b/site/content/docs/4.3/examples/starter-template/index.html index a51d22bbc..a53a033cc 100644 --- a/site/content/docs/4.3/examples/starter-template/index.html +++ b/site/content/docs/4.3/examples/starter-template/index.html @@ -15,7 +15,7 @@ extra_css: <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> diff --git a/site/content/docs/4.3/examples/sticky-footer-navbar/index.html b/site/content/docs/4.3/examples/sticky-footer-navbar/index.html index 3b261ef22..937fb8dc4 100644 --- a/site/content/docs/4.3/examples/sticky-footer-navbar/index.html +++ b/site/content/docs/4.3/examples/sticky-footer-navbar/index.html @@ -18,7 +18,7 @@ body_class: "d-flex flex-column h-100" <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> - <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html index d8b946b37..637341c69 100644 --- a/site/layouts/partials/docs-navbar.html +++ b/site/layouts/partials/docs-navbar.html @@ -7,13 +7,13 @@ <div class="navbar-nav-scroll order-3 order-md-0 d-flex justify-content-center justify-content-md-start"> <ul class="navbar-nav bd-navbar-nav flex-row"> <li class="nav-item"> - <a class="nav-link{{ if .IsHome }} active{{ end }}" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a> + <a class="nav-link{{ if .IsHome }} active" aria-current="page{{ end }}" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a> </li> <li class="nav-item"> - <a class="nav-link{{ if eq .Page.Layout "docs" }} active{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a> + <a class="nav-link{{ if eq .Page.Layout "docs" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a> </li> <li class="nav-item"> - <a class="nav-link{{ if eq .Page.Title "Examples" }} active{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a> + <a class="nav-link{{ if eq .Page.Title "Examples" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a> </li> <li class="nav-item"> <a class="nav-link" href="{{ .Site.Params.icons }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');">Icons</a> diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html index 1ffca3b0a..137596004 100644 --- a/site/layouts/partials/docs-sidebar.html +++ b/site/layouts/partials/docs-sidebar.html @@ -16,8 +16,8 @@ {{- $active_group := eq $.Page.Params.group $group_slug }} <li class="bd-sidenav-group my-1{{ if $active_group }} active{{ end }} js-sidenav-group{{ if $group.pages }} has-children{{ end }}"> - <a class="d-inline-flex align-items-center bd-sidenav-group-link" href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/{{ if $group.pages }}{{ $link_slug }}/{{ end }}"> - <div>{{ $group.title }}</div> + <a class="d-inline-flex align-items-center bd-sidenav-group-link" href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/{{ if $group.pages }}{{ $link_slug }}/{{ end }}"{{ if $active_group }} aria-current="true"{{ end }}> + {{ $group.title }} </a> {{- if $group.pages }} @@ -25,7 +25,7 @@ {{- range $doc := $group.pages -}} {{- $doc_slug := $doc.title | urlize }} <li{{ if and $active_group (eq $page_slug $doc_slug) }} class="active bd-sidenav-active"{{ end }}> - <a href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/{{ $doc_slug }}/"> + <a href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/{{ $doc_slug }}/"{{ if and $active_group (eq $page_slug $doc_slug) }} aria-current="page"{{ end }}> {{- $doc.title -}} </a> </li> diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html index 267eb0c74..c25409aa0 100644 --- a/site/layouts/partials/docs-versions.html +++ b/site/layouts/partials/docs-versions.html @@ -3,7 +3,7 @@ Bootstrap v{{ .Site.Params.docs_version }} </button> <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions"> - <a class="dropdown-item active" href="/docs/{{ .Site.Params.docs_version }}/">Latest (5.0.x)</a> + <a class="dropdown-item active" aria-current="true" href="/docs/{{ .Site.Params.docs_version }}/">Latest (5.0.x)</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://getbootstrap.com/docs/4.4/">v4.4.1</a> <a class="dropdown-item" href="https://getbootstrap.com/docs/4.3/">v4.3.1</a> |