fix: a11y improvements

hlxsites · Oct 19, 2023 · bdd4297 · bdd4297
1 parent 8e06690
commit bdd4297
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 5 deletions.
diff --git a/blocks/article/article.css b/blocks/article/article.css
@@ -363,20 +363,20 @@ article [data-docs-heading] span {
   letter-spacing: var(--letter-spacing-neg--s);
 }
 
-.book-content h1 {
+.book-content h1, .book-content .h1 {
   font-size: 28px;
   line-height: 28px;
 }
-.book-content h2 {
+.book-content h2, .book-content .h2 {
   font-size: 24px;
   line-height: 24px;
 }
-.book-content h3 {
+.book-content h3, .book-content .h3 {
   font-size: 20px;
   line-height: 20px;
 }
-.book-content h4,
-.book-content h5 {
+.book-content h4, .book-content .h4,
+.book-content h5, .book-content .h5 {
   font-size: 18px;
   line-height: 18px;
 }
@@ -426,6 +426,10 @@ article [data-docs-heading] span {
   word-break: break-word;
 }
 
+.pan-article .book-content a.inline-link {
+  text-decoration: underline;
+}
+
 .pan-article .book-content pre {
   display: block;
   margin: var(--spacing--6) 0;

diff --git a/blocks/article/article.js b/blocks/article/article.js
@@ -6,6 +6,7 @@ import {
   getPlaceholders,
   isMobile,
   loadBook,
+  makeHeadersSequential,
   parseFragment,
   render,
   renderSidenav,
@@ -236,6 +237,22 @@ async function redirectToFirstChapter() {
   window.location.href = redirect;
 }
 
+/**
+ * @param {HTMLElement} block
+ */
+function decorateInlineLinks(block) {
+  block.querySelectorAll('p:not(.button-container) > a').forEach((a) => {
+    const isInline = [
+      a.previousSibling ? a.previousSibling.nodeType : -1,
+      a.nextSibling ? a.nextSibling.nodeType : -1,
+    ].includes(Node.TEXT_NODE);
+
+    if (isInline) {
+      a.classList.add('inline-link');
+    }
+  });
+}
+
 const decorateCodeBlocks = (block) => {
   // Add copy code button
   for (const pre of block.querySelectorAll('pre')) {
@@ -531,6 +548,8 @@ async function renderContent(block, res, rerender = false) {
     const bookContent = block.querySelector('.book-content div[slot="content"]');
     if (bookContent) {
       await decorateMain(bookContent);
+      makeHeadersSequential(bookContent);
+      decorateInlineLinks(bookContent);
       await loadBlocks(bookContent);
       updateSectionsStatus(bookContent);
 

diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -259,6 +259,8 @@ const store = new (class {
 
     window.addEventListener('popstate', (ev) => {
       const { state } = ev;
+      if (!state) return;
+
       index = state.index;
       this.emit('spa:navigate:article', state);
       ev.preventDefault();
@@ -654,6 +656,32 @@ export function renderSidenav(contentBlock) {
   });
 }
 
+function swapHeadingLevel(heading, newLvl) {
+  const cls = heading.tagName.toLowerCase();
+  const newHeading = document.createElement(typeof newLvl === 'string' ? newLvl : `h${newLvl}`);
+  newHeading.textContent = heading.textContent;
+  newHeading.id = heading.id;
+  newHeading.classList.add(cls);
+  heading.replaceWith(newHeading);
+}
+
+/**
+ * @param {HTMLElement} main
+ */
+export function makeHeadersSequential(main) {
+  let curLevel = 1;
+  let prevTag;
+  main.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach((heading) => {
+    if (heading.tagName[1] !== curLevel) {
+      swapHeadingLevel(heading, curLevel);
+    }
+    if (prevTag !== heading.tagName) {
+      curLevel += 1;
+    }
+    prevTag = heading.tagName;
+  });
+}
+
 /**
  * Load article as HTML string
  * @param {string} href