📘 DOC: improve a11y (#806)

* Add `tabindex="0"` to `<pre>` so that they are navigable by keyboard users if they overflow.

* Landmark elements should have unique names https://dequeuniversity.com/rules/axe/4.3/landmark-unique

* Page must have one main landmark https://dequeuniversity.com/rules/axe/4.3/landmark-one-main

- Main landmark must not be contained by another landmark https://dequeuniversity.com/rules/axe/4.3/landmark-main-is-top-level

* Heading level cannot increase by more than one

* Ensure that links with the same accessible name serve a similar purpose

https://dequeuniversity.com/rules/axe/4.3/identical-links-same-purpose

* Just update the accessible name and require context for the visible link name

* Fix CSS from the removal of the second <main>

* Revert heading level change

2 files changed, 10 insertions, 7 deletions

diff --git a/docs/public/index.css b/docs/public/index.css
index e60e0bec4..f33c7c2eb 100644
--- a/docs/public/index.css
+++ b/docs/public/index.css
@@ -35,11 +35,11 @@ nav ul {
   padding: 0;
 }
 
-.content main > * + * {
+.content > section > * + * {
   margin-top: 1rem;
 }
 
-.content main > :first-child {
+.content > section > :first-child {
   margin-top: 0;
 }
 
@@ -110,24 +110,24 @@ a {
   gap: 0.5rem;
 }
 
-article main :is(ul, ol) > * + * {
+article > section :is(ul, ol) > * + * {
   margin-top: 0.75rem;
 }
 
-article main li > :is(p, pre, blockquote):not(:first-child) {
+article > section li > :is(p, pre, blockquote):not(:first-child) {
   margin-top: 1rem;
 }
 
-article main :is(ul, ol) {
+article > section :is(ul, ol) {
   padding-left: 1em;
 }
 
-article main ::marker {
+article > section ::marker {
   font-weight: bold;
   color: var(--theme-text-light);
 }
 
-article main iframe {
+article > section iframe {
   width: 100%;
   height: auto;
   aspect-ratio: 16 / 9;
diff --git a/docs/public/make-scrollable-code-focusable.js b/docs/public/make-scrollable-code-focusable.js
new file mode 100644
index 000000000..6fbf1eebe
--- /dev/null
+++ b/docs/public/make-scrollable-code-focusable.js
@@ -0,0 +1,3 @@
+Array.from(document.getElementsByTagName("pre")).forEach((element) => {
+  element.setAttribute("tabindex", "0");
+});