aboutsummaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
authorGeoffrey B. Eisenbarth <geoffrey-eisenbarth@users.noreply.github.com>2024-10-30 09:49:12 -0500
committerGitHub <noreply@github.com>2024-10-30 09:49:12 -0500
commit6037e793e312a40b0e2d8f450bd02981f2873983 (patch)
treebdda8691bd421f163c1f6d68bda529aeae17fbd2
parent91d35121e1a4459fdd3a1e51219756e96fefe2c6 (diff)
parent97451eaafcd147a5e9d74ac6ff30969bc299c7fd (diff)
downloadmissing-6037e793e312a40b0e2d8f450bd02981f2873983.tar.gz
missing-6037e793e312a40b0e2d8f450bd02981f2873983.zip
Merge branch 'dev' into toggle
-rw-r--r--www/demos/feed.html38
-rw-r--r--www/docs/40-aria.md23
-rw-r--r--www/docs/B0-js.md4
3 files changed, 32 insertions, 33 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 1748783..3a21af4 100644
--- a/www/docs/40-aria.md
+++ b/www/docs/40-aria.md
@@ -173,33 +173,32 @@ 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/
## Toggle Switch
@@ -387,4 +386,4 @@ Using `<input>` degrades nicely in the absense of JavaScript and also allows for
<li>RTL
<li>Indeterminate state
</ul>
-</figure>
+</figure> \ No newline at end of file
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>