Revert "Add aria-feed custom element"revert-75-aria-components

4 files changed, 170 insertions, 203 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);
diff --git a/www/demos/feed.html b/www/demos/feed.html
index 85e6fd9..fef16b7 100644
--- a/www/demos/feed.html
+++ b/www/demos/feed.html
@@ -4,80 +4,77 @@ name: Feed
 ---
 
 <main>
-  <h1>Feeds</h1>
+    <h1>Feeds</h1>
 
-  <script type="module" src="/dist/js/feed.js"></script>
+    <script type="module" src="/dist/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>
+    <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" aria-labelledby="f1-a1-label">
+         <h2 id="f1-a1-label">Article 1</h2>
+         <p>Some content for the article.</p>
+         <a href="#">A focusable link</a>
+      </article>
+      <article class="box" aria-labelledby="f1-a2-label">
+         <h2 id="f1-a2-label">Article 2</h2>
+         <p>Some content for the article.</p>
+         <a href="#">A focusable link</a>
+      </article>
+      <article class="box" aria-labelledby="f1-a3-label">
+         <h2 id="f1-a3-label">Article 3</h2>
+         <p>Some content for the article.</p>
+         <a href="#">A focusable link</a>
+      </article>
+    </div>
 
-  <a href="#">A focusable element before the feeds</a>
+    <a href="#">A focusable element betweeen feeds</a>
 
-  <aria-feed>
-    <article class="box" aria-labelledby="f1-a1-label">
-      <h2 id="f1-a1-label">Article 1</h2>
-      <p>Some content for the article.</p>
-      <a href="#">A focusable link</a>
-    </article>
-    <article class="box" aria-labelledby="f1-a2-label">
-      <h2 id="f1-a2-label">Article 2</h2>
-      <p>Some content for the article.</p>
-      <a href="#">A focusable link</a>
-    </article>
-    <article class="box" aria-labelledby="f1-a3-label">
-      <h2 id="f1-a3-label">Article 3</h2>
-      <p>Some content for the article.</p>
-      <a href="#">A focusable link</a>
-    </article>
-  </aria-feed>
-
-  <a href="#">A focusable element betweeen feeds</a>
-
-  <aria-feed>
-    <article class="box" aria-labelledby="f2-a1-label">
-      <h2 id="f2-a1-label">Article 1</h2>
-      <p>Some content for the article.</p>
-      <a href="#">A focusable link</a>
-      <aria-feed>
-        <article class="box ok" aria-labelledby="f2-a1-c1-label">
-          <h3 id="f2-a1-c1-label">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" aria-labelledby="f2-a1-c2-label">
-          <h3 id="f2-a1-c2-label">Comment #2</h3>
-          <p>Some content for the comment.</p>
-          <a href="#">Link 1</a> <a href="#">Link 2</a>
-        </article>
-      </aria-feed>
-    </article>
-    <article class="box" aria-labelledby="f2-a2-label">
-      <h2 id="f2-a2-label">Article 2</h2>
-      <p>Some content for the article.</p>
-      <a href="#">A focusable link</a>
-      <aria-feed>
-        <article class="box ok" aria-labelledby="f2-a2-c1-label">
-          <h3 id="f2-a2-c1-label">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" aria-labelledby="f2-a2-c2-label">
-          <h3 id="f2-a2-c2-label">Comment #2</h3>
-          <p>Some content for the comment.</p>
-          <a href="#">Link 1</a> <a href="#">Link 2</a>
-        </article>
-      </aria-feed>
-    </article>
-  </aria-feed>
-
-  <a href="#">A focusable element after the feeds</a>
+    <div role="feed">
+      <article class="box" aria-labelledby="f2-a1-label">
+         <h2 id="f2-a1-label">Article 1</h2>
+         <p>Some content for the article.</p>
+         <a href="#">A focusable link</a>
+         <div role="feed">
+          <article class="box ok" aria-labelledby="f2-a1-c1-label">
+            <h3 id="f2-a1-c1-label">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" aria-labelledby="f2-a1-c2-label">
+            <h3 id="f2-a1-c2-label">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" aria-labelledby="f2-a2-label">
+         <h2 id="f2-a2-label">Article 2</h2>
+         <p>Some content for the article.</p>
+         <a href="#">A focusable link</a>
+         <div role="feed">
+          <article class="box ok" aria-labelledby="f2-a2-c1-label">
+            <h3 id="f2-a2-c1-label">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" aria-labelledby="f2-a2-c2-label">
+            <h3 id="f2-a2-c2-label">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 34ea561..396837f 100644
--- a/www/docs/40-aria.md
+++ b/www/docs/40-aria.md
@@ -165,14 +165,14 @@ The fiex direction will be set based on `aria-orientation`.
 
 ## Feed
 
-Use the `<aria-feed>` custom element with `<article>` children  — see [WAI: Feed][]. Nested feeds are supported.
+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
-  <aria-feed>
+  <div role="feed">
     <article class="box" aria-labelledby="article-1-label">
       <h2 id="article-1-label">Article Title 1</h2>
       <p>Article content</p>
@@ -181,12 +181,12 @@ To get the actual behavior of an accessible feed, you can use [Missing.js &sect;
       <h2 id="article-2-label">Article Title 2</h2>
       <p>Article content</p>
     </article>
-  </aria-feed>
+  </div>
   ~~~
 
   <div>
   <script type="module" src="/dist/js/feed.js"></script>
-  <aria-feed>
+  <div role="feed">
     <article class="box" aria-labelledby="article-1-label">
       <h2 id="article-1-label">Article Title 1</h2>
       <p>Article content</p>
@@ -195,10 +195,9 @@ To get the actual behavior of an accessible feed, you can use [Missing.js &sect;
       <h2 id="article-2-label">Article Title 2</h2>
       <p>Article content</p>
     </article>
-  </aria-feed>
+  </div>
 
 </figure>
-
 [WAI: Feed]: https://www.w3.org/WAI/ARIA/apg/patterns/feed/
 
 
diff --git a/www/docs/B0-js.md b/www/docs/B0-js.md
index a7bbcf2..ffc81aa 100644
--- a/www/docs/B0-js.md
+++ b/www/docs/B0-js.md
@@ -98,21 +98,23 @@ _See [ARIA &sect; feed](/docs/aria/#feed)_
 
   ~~~ html
   <script type="module" src="https://unpkg.com/missing.css@{{ version }}/dist/js/feed.js">
-  <aria-feed>
-    <article class="box" aria-labelledby="article-1-label">
-      <h2 id="article-1-label">Article Title 1</h2>
-      <p>Article content</p>
-    </article>
-    <article class="box" aria-labelledby="article-2-label">
-      <h2 id="article-2-label">Article Title 2</h2>
-      <p>Article content</p>
-    </article>
-  </aria-feed>
   ~~~
 
 </figure>
 
-The `<aria-feed>` custom element utilizes `MutationObserver`, so dynamic content should "just work."
+or
+
+<figure>
+
+  ~~~js
+  import { feed } from "https://unpkg.com/missing.css@{{ version }}/dist/js/feed.js";
+  ~~~
+
+</figure>
+
+All notes above about initializing dynamic content apply here.
+
+
 
 
 ## Expand/collapse navbar