From 3d3dd557358a4556af08068594ee63ce463d9b93 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Julien=20D=C3=A9ramond?= Date: Mon, 12 Dec 2022 13:38:55 +0100 Subject: [PATCH] New Skip Navigation component --- .../docs/5.2/components/skip-navigation.md | 56 +++++++++++++++++++ .../docs/5.2/getting-started/accessibility.md | 2 +- .../docs/5.2/helpers/visually-hidden.md | 2 + site/data/sidebar.yml | 1 + 4 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 site/content/docs/5.2/components/skip-navigation.md diff --git a/site/content/docs/5.2/components/skip-navigation.md b/site/content/docs/5.2/components/skip-navigation.md new file mode 100644 index 0000000000..f308e65ae6 --- /dev/null +++ b/site/content/docs/5.2/components/skip-navigation.md @@ -0,0 +1,56 @@ +--- +layout: docs +title: Skip navigation +description: Use skip navigation for your keyboard users +group: components +toc: true +added: "5.3" +--- + +## Overview + +Skip navigation can be used for keyboard users in order to skip some items to access more rapidly to the main content of a page. +It tends to be used as the first component a user can encounter while navigating to a website after the page is loaded so that the menus can be skipped. + +It is possible thanks to our `.visually-hidden-focusable` and `.overflow-hidden` utilities. + +## Basic example + +{{< example >}} +
+
+ Skip to content 1 + Skip to content 2 +
+
+
+

Skip navigation

+
+

Click outside this example and then press Tab key multiple time. You'll see our Skip navigation component appears that will get focused and then that will allow you to skip this entire hero section to go either to the first or second content.

+
+ + +
+
+
+
+

Content 1

+
+

Content 1 description.

+
+ + +
+
+
+
+

Content 2

+
+

Content 2 description.

+
+ + +
+
+
+{{< /example >}} \ No newline at end of file diff --git a/site/content/docs/5.2/getting-started/accessibility.md b/site/content/docs/5.2/getting-started/accessibility.md index e9f1cb3165..f393d3c9a6 100644 --- a/site/content/docs/5.2/getting-started/accessibility.md +++ b/site/content/docs/5.2/getting-started/accessibility.md @@ -37,7 +37,7 @@ Content which should be visually hidden, but remain accessible to assistive tech

``` -For visually hidden interactive controls, such as traditional "skip" links, use the `.visually-hidden-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). **Watch out, compared to the equivalent `.sr-only` and `.sr-only-focusable` classes in past versions, Bootstrap 5's `.visually-hidden-focusable` is a standalone class, and must not be used in combination with the `.visually-hidden` class.** +For visually hidden interactive controls, such as traditional "skip" links like our [Skip navigation]({{< docsref "/components/skip-navigation" >}}), use the `.visually-hidden-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). **Watch out, compared to the equivalent `.sr-only` and `.sr-only-focusable` classes in past versions, Bootstrap 5's `.visually-hidden-focusable` is a standalone class, and must not be used in combination with the `.visually-hidden` class.** ```html Skip to main content diff --git a/site/content/docs/5.2/helpers/visually-hidden.md b/site/content/docs/5.2/helpers/visually-hidden.md index 1124065430..ccb8ceff7a 100644 --- a/site/content/docs/5.2/helpers/visually-hidden.md +++ b/site/content/docs/5.2/helpers/visually-hidden.md @@ -8,6 +8,8 @@ aliases: "/docs/5.2/helpers/screen-readers/" Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container–thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus. +See also our [Skip navigation]({{< docsref "/components/skip-navigation" >}}). + {{< example >}} Skip to main content diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 4199fa535e..b81d3b7b50 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -93,6 +93,7 @@ - title: Popovers - title: Progress - title: Scrollspy + - title: Skip navigation - title: Spinners - title: Toasts - title: Tooltips -- 2.39.5