diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/4.0/components/breadcrumb.md | 45 | ||||
| -rw-r--r-- | docs/4.0/components/collapse.md | 2 | ||||
| -rw-r--r-- | docs/4.0/components/forms.md | 2 | ||||
| -rw-r--r-- | docs/4.0/content/reboot.md | 2 | ||||
| -rw-r--r-- | docs/4.0/layout/grid.md | 2 | ||||
| -rw-r--r-- | docs/4.0/migration.md | 2 |
6 files changed, 30 insertions, 25 deletions
diff --git a/docs/4.0/components/breadcrumb.md b/docs/4.0/components/breadcrumb.md index eb286d847..7a4b5f44e 100644 --- a/docs/4.0/components/breadcrumb.md +++ b/docs/4.0/components/breadcrumb.md @@ -4,31 +4,36 @@ title: Breadcrumb description: Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS. group: components --- +## Overview Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). {% example html %} -<ol class="breadcrumb"> - <li class="breadcrumb-item active">Home</li> -</ol> -<ol class="breadcrumb"> - <li class="breadcrumb-item"><a href="#">Home</a></li> - <li class="breadcrumb-item active">Library</li> -</ol> -<ol class="breadcrumb"> - <li class="breadcrumb-item"><a href="#">Home</a></li> - <li class="breadcrumb-item"><a href="#">Library</a></li> - <li class="breadcrumb-item active">Data</li> -</ol> -{% endexample %} -Similar to our navigation components, breadcrumbs work fine with or without the usage of list markup. +<nav aria-label="breadcrumb" role="navigation"> + <ol class="breadcrumb"> + <li class="breadcrumb-item active" aria-current="page">Home</li> + </ol> +</nav> -{% example html %} -<nav class="breadcrumb"> - <a class="breadcrumb-item" href="#">Home</a> - <a class="breadcrumb-item" href="#">Library</a> - <a class="breadcrumb-item" href="#">Data</a> - <span class="breadcrumb-item active">Bootstrap</span> +<nav aria-label="breadcrumb" role="navigation"> + <ol class="breadcrumb"> + <li class="breadcrumb-item"><a href="#">Home</a></li> + <li class="breadcrumb-item active" aria-current="page">Library</li> + </ol> +</nav> + +<nav aria-label="breadcrumb" role="navigation"> + <ol class="breadcrumb"> + <li class="breadcrumb-item"><a href="#">Home</a></li> + <li class="breadcrumb-item"><a href="#">Library</a></li> + <li class="breadcrumb-item active" aria-current="page">Data</li> + </ol> </nav> {% endexample %} + +## Accessibility + +Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page. + +For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb). diff --git a/docs/4.0/components/collapse.md b/docs/4.0/components/collapse.md index 9e889efb2..2797658e5 100644 --- a/docs/4.0/components/collapse.md +++ b/docs/4.0/components/collapse.md @@ -40,7 +40,7 @@ Multiple `<button>` or `<a>` can show and hide an element if they each referenc {% example html %} <p> <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a> - <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle second element</button> + <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button> </p> <div class="row"> diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index eb3deb415..80c5db547 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -684,7 +684,7 @@ Here's how form validation works with Bootstrap: - As a fallback, `.is-invalid` and `.is-valid` classes may be used instead of the pseudo-classes for [server side validation](#server-side). They do not require a `.was-validated` parent class. - Due to constraints in how CSS works, we cannot (at present) apply styles to a `<label>` that comes before a form control in the DOM without the help of custom JavaScript. - All modern browsers support the [constraint validation API](https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api), a series of JavaScript methods for validating form controls. -- Feedback messages may utilize the [browser defaults](#browser-default) (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS. +- Feedback messages may utilize the [browser defaults](#browser-defaults) (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS. - You may provide custom validity messages with `setCustomValidity` in JavaScript. With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults. diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md index 63a576c6f..6fa38a381 100644 --- a/docs/4.0/content/reboot.md +++ b/docs/4.0/content/reboot.md @@ -339,7 +339,7 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o {% callout warning %} #### jQuery incompatibility -`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements. +`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements. {% endcallout %} To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead. diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md index 20ec1f8c9..3723adbe5 100644 --- a/docs/4.0/layout/grid.md +++ b/docs/4.0/layout/grid.md @@ -727,4 +727,4 @@ $container-max-widths: ( ); {% endhighlight %} -When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will out a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. +When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md index bfb75a08b..b7568bbe5 100644 --- a/docs/4.0/migration.md +++ b/docs/4.0/migration.md @@ -114,7 +114,7 @@ New to Bootstrap 4 is the [Reboot]({{ site.baseurl }}/docs/{{ site.docs_version - Renamed `.btn-default` to `.btn-secondary`. - Dropped the `.btn-xs` class entirely as `.btn-sm` is proportionally much smaller than v3's. -- The [stateful button](https://getbootstrap.com/javascript/#buttons-methods) feature of the `button.js` jQuery plugin has been dropped. This includes the `$().button(string)` and `$().button('reset')` methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to. +- The [stateful button]({{ site.baseurl }}/docs/3.3/javascript/#buttons-stateful) feature of the `button.js` jQuery plugin has been dropped. This includes the `$().button(string)` and `$().button('reset')` methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to. - Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4. - Change buttons' `[disabled]` to `:disabled` as IE9+ supports `:disabled`. However `fieldset[disabled]` is still necessary because [native disabled fieldsets are still buggy in IE11](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility). |