Skip to content

Docs: Add accessibility note about dismissible alerts and focus #31358

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

Merged
patrickhlauke merged 3 commits into from
Jul 31, 2020
Merged

Docs: Add accessibility note about dismissible alerts and focus #31358

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c1ff1b2
Add accessibility note about dismissible alerts and focus
patrickhlauke Jul 24, 2020
c51f6b7
Merge branch 'main' into v5-alerts-dismissable-accessibility-note
patrickhlauke Jul 31, 2020
067a6e6
Merge branch 'main' into v5-alerts-dismissable-accessibility-note
patrickhlauke Jul 31, 2020
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
9 changes: 7 additions & 2 deletions site/content/docs/5.0/components/alerts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ Alerts can also contain additional HTML elements like headings, paragraphs and d
</div>
{{< /example >}}


### Dismissing

Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how:
Expand All @@ -73,6 +72,10 @@ You can see this in action with a live demo:
</div>
{{< /example >}}

{{< callout warning >}}
When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element.
{{< /callout >}}

## JavaScript behavior

### Triggers
Expand Down Expand Up @@ -178,6 +181,8 @@ Bootstrap's alert plugin exposes a few events for hooking into alert functionali
{{< highlight js >}}
var myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', function () {
// do something…
// do something … for instance, explicitly move focus to the most appropriate element,
// so it doesn't get lost/reset to the start of the page
// document.getElementById('…').focus()
})
{{< /highlight >}}