New Skip Navigation component

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 (file)
index 0000000..f308e65
--- /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 >}}
+<div class="visually-hidden-focusable overflow-hidden">
+  <div class="container-xl">
+    <a class="d-inline-flex p-2 m-1" href="#content1">Skip to content 1</a>
+    <a class="d-none d-md-inline-flex p-2 m-1" href="#content2">Skip to content 2</a>
+  </div>
+</div>
+<div class="py-2 mb-5 text-center">
+  <h1 class="display-5 fw-bold">Skip navigation</h1>
+  <div class="col-10 mx-auto">
+    <p class="lead mb-4">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.</p>
+    <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
+      <button type="button" class="btn btn-primary btn-lg px-4 gap-3">Primary button</button>
+      <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
+    </div>
+  </div>
+</div>
+<div id="content1" class="py-2 mb-5 text-center">
+  <h1 class="display-5 fw-bold">Content 1</h1>
+  <div class="col-10 mx-auto">
+    <p class="lead mb-4">Content 1 description.</p>
+    <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
+      <button type="button" class="btn btn-primary btn-lg px-4 gap-3">Primary button</button>
+      <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
+    </div>
+  </div>
+</div>
+<div id="content2" class="py-2 mb-5 text-center">
+  <h1 class="display-5 fw-bold">Content 2</h1>
+  <div class="col-10 mx-auto">
+    <p class="lead mb-4">Content 2 description.</p>
+    <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
+      <button type="button" class="btn btn-primary btn-lg px-4 gap-3">Primary button</button>
+      <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
+    </div>
+  </div>
+</div>
+{{< /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 e9f1cb31652d04b50c76b13be9e50d23d502fd89..f393d3c9a61b999862016502bd2d8637f3cbd701 100644 (file)
--- 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
 </p>
 ```
 
-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
 <a class="visually-hidden-focusable" href="#content">Skip to main content</a>

diff --git a/site/content/docs/5.2/helpers/visually-hidden.md b/site/content/docs/5.2/helpers/visually-hidden.md
index 1124065430c3785381864f8f1e9cd5df0f62753a..ccb8ceff7a026893b6d7f1c34097df52bae22575 100644 (file)
--- 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 >}}
 <h2 class="visually-hidden">Title for screen readers</h2>
 <a class="visually-hidden-focusable" href="#content">Skip to main content</a>

diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index 4199fa535e0a5ecf1e86b22da68d9c8082701349..b81d3b7b50542ff5e3a49787ec45ac07d1efa3b8 100644 (file)
--- 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