diff options
author | Geoffrey B. Eisenbarth <geoffrey-eisenbarth@users.noreply.github.com> | 2024-10-30 09:49:12 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2024-10-30 09:49:12 -0500 |
commit | 6037e793e312a40b0e2d8f450bd02981f2873983 (patch) | |
tree | bdda8691bd421f163c1f6d68bda529aeae17fbd2 | |
parent | 91d35121e1a4459fdd3a1e51219756e96fefe2c6 (diff) | |
parent | 97451eaafcd147a5e9d74ac6ff30969bc299c7fd (diff) | |
download | missing-6037e793e312a40b0e2d8f450bd02981f2873983.tar.gz missing-6037e793e312a40b0e2d8f450bd02981f2873983.zip |
Merge branch 'dev' into toggle
-rw-r--r-- | www/demos/feed.html | 38 | ||||
-rw-r--r-- | www/docs/40-aria.md | 23 | ||||
-rw-r--r-- | www/docs/B0-js.md | 4 |
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 § ~~~ 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 § 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> |