]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
Fix (#38191)
authorLouis-Maxime Piton <louismaxime.piton@orange.com>
Fri, 10 Mar 2023 17:19:58 +0000 (18:19 +0100)
committerGitHub <noreply@github.com>
Fri, 10 Mar 2023 17:19:58 +0000 (11:19 -0600)
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
site/content/docs/5.3/components/scrollspy.md
site/layouts/_default/docs.html

index 4bb5978f3a8b23269fe3c88cf4128d353e471ffc..d1abf75e3e7d6ffe778dae9a03cb6b75cb1943a6 100644 (file)
@@ -12,7 +12,7 @@ Scrollspy toggles the `.active` class on anchor (`<a>`) elements when the elemen
 
 - To start, scrollspy requires two things: a navigation, list group, or a simple set of links, plus a scrollable container. The scrollable container can be the `<body>` or a custom element with a set `height` and `overflow-y: scroll`.
 
-- On the scrollable container, add `data-bs-spy="scroll"` and `data-bs-target="#navId"` where `navId` is the unique `id` of the associated navigation. Be sure to also include a `tabindex="0"` to ensure keyboard access.
+- On the scrollable container, add `data-bs-spy="scroll"` and `data-bs-target="#navId"` where `navId` is the unique `id` of the associated navigation. If there is no focusable element inside the element, be sure to also include a `tabindex="0"` to ensure keyboard access.
 
 - As you scroll the "spied" container, an `.active` class is added and removed from anchor links within the associated navigation. Links must have resolvable `id` targets, otherwise they're ignored. For example, a `<a href="#home">home</a>` must correspond to something in the DOM like `<div id="home"></div>`
 
index ed23045a6dff2c5687cf93cd6f91fc50b9d5e92e..cbf06a554f697bd4db1a942cc92932c739ab059a 100644 (file)
@@ -1,4 +1,4 @@
-{{ define "body_override" }}<body tabindex="0"{{ if (eq .Page.Params.toc true) }} data-bs-spy="scroll" data-bs-target="#TableOfContents"{{ end }}>{{ end }}
+{{ define "body_override" }}<body{{ if (eq .Page.Params.toc true) }} data-bs-spy="scroll" data-bs-target="#TableOfContents"{{ end }}>{{ end }}
 {{ define "main" }}
   <div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
     <aside class="bd-sidebar">