From 28785a3050b8ff196f5ab88fd23ba00015f488a0 Mon Sep 17 00:00:00 2001
From: Geoffrey Eisenbarth <geoffrey.eisenbarth@gmail.com>
Date: Fri, 30 Aug 2024 14:55:15 -0500
Subject: Fix URL errors and add aria labels to feed examples.

---
 www/demos/feed.html | 38 +++++++++++++++++++-------------------
 www/docs/40-aria.md | 20 ++++++++++----------
 www/docs/B0-js.md   |  4 ++--
 3 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/www/demos/feed.html b/www/demos/feed.html
index 18990a7..fef16b7 100644
--- a/www/demos/feed.html
+++ b/www/demos/feed.html
@@ -6,7 +6,7 @@ name: Feed
 <main>
     <h1>Feeds</h1>
 
-    <script type="module" src="/missing-js/feed.js"></script>
+    <script type="module" src="/dist/js/feed.js"></script>
 
     <p>
       Keyboard navigation:
@@ -21,18 +21,18 @@ name: Feed
     </p>
     <a href="#">A focusable element before the feeds</a>
     <div role="feed">
-      <article class="box">
-         <h2>Article 1</h2>
+      <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">
-         <h2>Article 2</h2>
+      <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">
-         <h2>Article 3</h2>
+      <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>
@@ -41,35 +41,35 @@ name: Feed
     <a href="#">A focusable element betweeen feeds</a>
 
     <div role="feed">
-      <article class="box">
-         <h2>Article 1</h2>
+      <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">
-            <h3>Comment #1</h3>
+          <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">
-            <h3>Comment #2</h3>
+          <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">
-         <h2>Article 2</h2>
+      <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">
-            <h3>Comment #1</h3>
+          <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">
-            <h3>Comment #2</h3>
+          <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>
diff --git a/www/docs/40-aria.md b/www/docs/40-aria.md
index 92da6f3..6c02abd 100644
--- a/www/docs/40-aria.md
+++ b/www/docs/40-aria.md
@@ -173,30 +173,30 @@ To get the actual behavior of an accessible feed, you can use [Missing.js &sect;
 
   ~~~ html
   <div role="feed">
-    <article class="box">
-      <h2>Article Title 1</h2>
+    <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">
-      <h2>Article Title 2</h2>
+    <article class="box" aria-labelledby="article-2-label">
+      <h2 id="article-2-label">Article Title 2</h2>
       <p>Article content</p>
     </article>
   </div>
   ~~~
 
   <div>
-  <script type="module" src="/missing-js/feed.js"></script>
+  <script type="module" src="/dist/js/feed.js"></script>
   <div role="feed">
-    <article class="box">
-      <h2>Article Title 1</h2>
+    <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">
-      <h2>Article Title 2</h2>
+    <article class="box" aria-labelledby="article-2-label">
+      <h2 id="article-2-label">Article Title 2</h2>
       <p>Article content</p>
     </article>
   </div>
 
 </figure>
 
-[WAI: Menu]: https://www.w3.org/WAI/ARIA/apg/patterns/feed/
+[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 910afaf..ffc81aa 100644
--- a/www/docs/B0-js.md
+++ b/www/docs/B0-js.md
@@ -97,7 +97,7 @@ _See [ARIA &sect; feed](/docs/aria/#feed)_
 <figure>
 
   ~~~ html
-  <script type="module" src="https://unpkg.com/missing.css@{{ version }}/js/feed.js">
+  <script type="module" src="https://unpkg.com/missing.css@{{ version }}/dist/js/feed.js">
   ~~~
 
 </figure>
@@ -107,7 +107,7 @@ or
 <figure>
 
   ~~~js
-  import { menu, menuButton } from "https://unpkg.com/missing.css@{{ version }}/js/feed.js";
+  import { feed } from "https://unpkg.com/missing.css@{{ version }}/dist/js/feed.js";
   ~~~
 
 </figure>
-- 
cgit v1.2.3