Merge pull request #51 from geoffrey-eisenbarth/dev

Add ARIA Feed role

4 files changed, 233 insertions, 0 deletions

diff --git a/src/js/feed.js b/src/js/feed.js
new file mode 100644
index 0000000..50ebfcd
--- /dev/null
+++ b/src/js/feed.js
@@ -0,0 +1,85 @@
+/// <reference lib="es2022" />
+
+import { $, $$, on, dispatch, halts, attr, next, prev, asHtml, hotkey, behavior, makelogger } from "./19.js"
+
+const ilog = makelogger("feed");
+const sFeed = "[role=feed]";
+const sScopedArticle = ":scope > article, :scope > [role=article]";
+const sArticle = "article, [role=article]";
+const sFocusable = ":is(a, area)[href], :is(button, details, embed, iframe, label, select, textarea):not([disabled]), :is(audio, video)[controls], :is(img, object)[usemap], [tabindex]:not([tabindex='-1'])"
+
+/**
+ * @param {HTMLElement} feed
+ * @returns {HTMLElement[]}
+ */
+const articles = feed => $$(feed, sScopedArticle);
+
+
+/**
+ * @param {HTMLElement} feed
+ * @param {HTMLElement} activeElement
+ * @returns {null}
+ */
+const focusPreviousArticle = (feed, activeElement) => asHtml(prev(feed, sArticle, activeElement, {wrap: false}))?.focus();
+
+
+/**
+ * @param {HTMLElement} feed
+ * @param {HTMLElement} activeElement
+ * @returns {null}
+ */
+const focusNextArticle = (feed, activeElement) => asHtml(next(feed, sArticle, activeElement.closest(sArticle), {wrap: false}))?.focus();
+
+
+/**
+ * @param {HTMLElement} article
+ * @returns {null}
+ */
+const focusOutsideFeed = article => asHtml(article.parentElement.closest(sArticle))?.focus();
+
+
+/**
+ * @param {HTMLElement} activeElement
+ * @returns {null}
+ */
+const focusInsideFeed = activeElement => asHtml($(activeElement.closest(sArticle), sArticle))?.focus();
+
+
+/**
+ * @param {HTMLElement} feed
+ * @returns {null}
+ */
+const focusBeforeFeed = feed => asHtml(prev(document.body, sFocusable, feed, {}))?.focus();
+
+
+/**
+ * @param {HTMLElement} feed
+ * @returns {null}
+ */
+const focusAfterFeed = feed => asHtml(next(document.body, sFocusable, feed, {}))?.focus();
+
+
+export const feed = behavior(sFeed, (feed, { root }) => {
+
+    if (!(feed instanceof HTMLElement)) return;
+
+    feed.setAttribute("aria-busy", "false");
+    articles(feed).forEach((article, idx, articles) => {
+        article.setAttribute("tabindex", "0");
+        article.setAttribute("aria-posinset", idx + 1);
+        article.setAttribute("aria-setsize", articles.length);
+        if (!(article.hasAttribute("aria-labelledby") || article.hasAttribute("aria-label")))
+            console.error("Article", article, "has no accessible name (aria-label or aria-labelledby)");
+    });
+
+    on(feed, "keydown", hotkey({
+        "PageUp": halts("default propagation", _ => focusPreviousArticle(feed, root.activeElement)),
+        "PageDown": halts("default propagation", _ => focusNextArticle(feed, root.activeElement)),
+        "Alt+PageUp": halts("default", _ => focusOutsideFeed(root.activeElement)),
+        "Alt+PageDown": halts("default", _ => focusInsideFeed(root.activeElement)),
+        "Ctrl+Home": halts("default propagation", _ => focusBeforeFeed(feed)),
+        "Ctrl+End": halts("default propagation", _ => focusAfterFeed(feed)),
+    }));
+});
+
+feed(document);
diff --git a/www/demos/feed.html b/www/demos/feed.html
new file mode 100644
index 0000000..18990a7
--- /dev/null
+++ b/www/demos/feed.html
@@ -0,0 +1,80 @@
+---
+layout: layout.vto
+name: Feed
+---
+
+<main>
+    <h1>Feeds</h1>
+
+    <script type="module" src="/missing-js/feed.js"></script>
+
+    <p>
+      Keyboard navigation:
+      <ul>
+        <li><kbd><kbd>PageUp</kbd></kbd> Previous article</li>
+        <li><kbd><kbd>PageDown</kbd></kbd> Next article</li>
+        <li><kbd><kbd>Ctrl</kbd></kbd>+<kbd><kbd>Home</kbd></kbd> First focusable before feed</li>
+        <li><kbd><kbd>Ctrl</kbd></kbd>+<kbd><kbd>End</kbd></kbd> First focusable after feed</li>
+        <li><kbd><kbd>Alt</kbd></kbd>+<kbd><kbd>PageUp</kbd></kbd> Previous article in parent feed</li>
+        <li><kbd><kbd>Alt</kbd></kbd>+<kbd><kbd>PageDown</kbd></kbd> First focusable in nested feed</li>
+      </ul>
+    </p>
+    <a href="#">A focusable element before the feeds</a>
+    <div role="feed">
+      <article class="box">
+         <h2>Article 1</h2>
+         <p>Some content for the article.</p>
+         <a href="#">A focusable link</a>
+      </article>
+      <article class="box">
+         <h2>Article 2</h2>
+         <p>Some content for the article.</p>
+         <a href="#">A focusable link</a>
+      </article>
+      <article class="box">
+         <h2>Article 3</h2>
+         <p>Some content for the article.</p>
+         <a href="#">A focusable link</a>
+      </article>
+    </div>
+
+    <a href="#">A focusable element betweeen feeds</a>
+
+    <div role="feed">
+      <article class="box">
+         <h2>Article 1</h2>
+         <p>Some content for the article.</p>
+         <a href="#">A focusable link</a>
+         <div role="feed">
+          <article class="box ok">
+            <h3>Comment #1</h3>
+            <p>Some content for the comment.</p>
+            <a href="#">Link 1</a> <a href="#">Link 2</a>
+          </article>
+          <article class="box ok">
+            <h3>Comment #2</h3>
+            <p>Some content for the comment.</p>
+            <a href="#">Link 1</a> <a href="#">Link 2</a>
+          </article>
+         </div>
+      </article>
+      <article class="box">
+         <h2>Article 2</h2>
+         <p>Some content for the article.</p>
+         <a href="#">A focusable link</a>
+         <div role="feed">
+          <article class="box ok">
+            <h3>Comment #1</h3>
+            <p>Some content for the comment.</p>
+            <a href="#">Link 1</a> <a href="#">Link 2</a>
+          </article>
+          <article class="box ok">
+            <h3>Comment #2</h3>
+            <p>Some content for the comment.</p>
+            <a href="#">Link 1</a> <a href="#">Link 2</a>
+          </article>
+         </div>
+      </article>
+    </div>
+    <a href="#">A focusable element after the feeds</a>
+</main>
diff --git a/www/docs/40-aria.md b/www/docs/40-aria.md
index 0ab9e52..84aa4b5 100644
--- a/www/docs/40-aria.md
+++ b/www/docs/40-aria.md
@@ -18,6 +18,7 @@ appropriately — see [WAI: Tabs][].
 
 To get the actual behavior of an accessible tabset, you can use [Missing.js &sect; Tabs](/docs/js#tabs).
 
+<figure>
   ~~~ html
   <div role="tablist" aria-label="Tabs example">
     <button role="tab" aria-controls="servers" aria-selected="true"
@@ -32,6 +33,7 @@ To get the actual behavior of an accessible tabset, you can use [Missing.js &sec
   <div id="channels" role="tabpanel">...</div>
   <div id="users"    role="tabpanel">...</div>
   ~~~
+</figure>
 
 <script type="module" src="/dist/js/tabs.js"></script>
 
@@ -157,3 +159,42 @@ The fiex direction will be set based on `aria-orientation`.
   </p>
 
 </figure>
+
+
+## Feed
+
+Use `feed` role with `<article/>` children  — see [WAI: Feed][]. Nested feeds are supported.
+
+To get the actual behavior of an accessible feed, you can use [Missing.js &sect; Feed](/docs/js#feed).
+
+<figure>
+
+  ~~~ html
+  <div role="feed">
+    <article class="box">
+      <h2>Article Title 1</h2>
+      <p>Article content</p>
+    </article>
+    <article class="box">
+      <h2>Article Title 2</h2>
+      <p>Article content</p>
+    </article>
+  </div>
+  ~~~
+
+  <div>
+  <script type="module" src="/missing-js/feed.js"></script>
+  <div role="feed">
+    <article class="box">
+      <h2>Article Title 1</h2>
+      <p>Article content</p>
+    </article>
+    <article class="box">
+      <h2>Article Title 2</h2>
+      <p>Article content</p>
+    </article>
+  </div>
+
+</figure>
+
+[WAI: Menu]: https://www.w3.org/WAI/ARIA/apg/patterns/feed/
diff --git a/www/docs/B0-js.md b/www/docs/B0-js.md
index 1642902..910afaf 100644
--- a/www/docs/B0-js.md
+++ b/www/docs/B0-js.md
@@ -90,6 +90,33 @@ or
 All notes above about initializing dynamic content apply here.
 
 
+## Feed
+
+_See [ARIA &sect; feed](/docs/aria/#feed)_
+
+<figure>
+
+  ~~~ html
+  <script type="module" src="https://unpkg.com/missing.css@{{ version }}/js/feed.js">
+  ~~~
+
+</figure>
+
+or
+
+<figure>
+
+  ~~~js
+  import { menu, menuButton } from "https://unpkg.com/missing.css@{{ version }}/js/feed.js";
+  ~~~
+
+</figure>
+
+All notes above about initializing dynamic content apply here.
+
+
+
+
 ## Expand/collapse navbar
 
 _See [Components &sect; Navbar](/docs/components/#navbar)_