Merge pull request #79 from bigskysoftware/revert-75-aria-componentsdev-v2

Revert "Add aria-feed custom element"

1 files changed, 83 insertions, 114 deletions

diff --git a/src/js/feed.js b/src/js/feed.js
index 427f98e..50ebfcd 100644
--- a/src/js/feed.js
+++ b/src/js/feed.js
@@ -1,116 +1,85 @@
 /// <reference lib="es2022" />
 
-import { $, $$, on, off, halts, attr, next, prev, asHtml, hotkey } from "./19.js"
-
-
-export class ariaFeed extends HTMLElement {
-  /* Custom element implementation of the Feed Pattern as specified by the
-   * ARIA Authoring Practices Guide (APG).
-   *
-   * https://www.w3.org/WAI/ARIA/apg/patterns/feed/
-   *
-   */
-
-  static sScopedArticle = ":scope > :is(article, [role=article])"
-  static sArticle = "article, [role=article]"
-  static sFocusable = [
-    "[tabindex]:not([tabindex='-1'])",
-    ":is(a, area)[href]",
-    ":is(audio, video)[controls]",
-    ":is(img, object)[usemap]",
-    ":is(button, details, embed, iframe, label, select, textarea):not([disabled])",
-  ].join(", ")
-
-  focusPreviousArticle = () => asHtml(
-    prev(this, ariaFeed.sArticle, document.activeElement, {wrap: false})
-  )?.focus()
-
-  focusNextArticle = () => asHtml(
-    next(this, ariaFeed.sArticle, document.activeElement.closest(ariaFeed.sArticle), {wrap: false})
-  )?.focus()
-
-  focusOutsideNestedFeed = () => asHtml(
-    document.activeElement.parentElement.closest(ariaFeed.sArticle)
-  )?.focus()
-
-  focusInsideNestedFeed = () => asHtml(
-    $(document.activeElement.closest(ariaFeed.sArticle), ariaFeed.sArticle)
-  )?.focus()
-
-  focusBeforeFeed = () => asHtml(
-    prev(document.body, ariaFeed.sFocusable, this, {})
-  )?.focus()
-
-  focusAfterFeed = () => asHtml(
-    next(document.body, ariaFeed.sFocusable, this, {})
-  )?.focus()
-
-  setChildAttributes = () => {
-    $$(this, ariaFeed.sScopedArticle).forEach((article, idx, articles) => {
-      attr(article, { ariaPosInSet: idx + 1, ariaSetSize: articles.length, tabindex: 0 })
-      if (!(article.hasAttribute("aria-labelledby") || article.hasAttribute("aria-label")))
-        console.error("Article", this, "has no accessible name (aria-label or aria-labelledby)");
-    })
-    this._internals.ariaBusy = "false"
-  }
-
-  setAttributes = () => {
-    this._internals.ariaRole = "feed"
-    this._internals.ariaLive = "polite"
-    this.setChildAttributes()
-  }
-
-  setInteractions = () => {
-    this.keydownListener = on(this, "keydown", hotkey({
-      "PageUp": halts("default propagation", this.focusPreviousArticle),
-      "PageDown": halts("default propagation", this.focusNextArticle),
-      "Ctrl+Home": halts("default propagation", this.focusBeforeFeed),
-      "Ctrl+End": halts("default propagation", this.focusAfterFeed),
-      "Alt+PageUp": halts("default", this.focusOutsideNestedFeed),
-      "Alt+PageDown": halts("default", this.focusInsideNestedFeed),
-    }))
-  }
-
-  removeInteractions = () => {
-    if (this.keydownListener) {
-      off(this.keydownListener)
-      this.keydownListener = null
-    }
-  }
-
-  handleMutations = (mutationsList, observer) => {
-    for (const mutation of mutationsList) {
-      if (mutation.type === "childList") {
-        this.setChildAttributes()
-        this.setInteractions()
-      }
-    }
-  }
-
-  constructor() {
-    super()
-    this._internals = this.attachInternals()
-
-    this.observer = new MutationObserver(this.handleMutations)
-    this.observer.observe(this, {
-      childList: true,
-      attributes: false,
-      characterData: false,
-      subtree: true,
-    })
-  }
-
-  connectedCallback() {
-    this.setAttributes()
-    this.setInteractions()
-  }
-
-  disconnectedCallback() {
-    this.observer.disconnect()
-    this.removeInteractions()
-  }
-
-}
-
-
-customElements.define("aria-feed", ariaFeed)
+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);