diff options
Diffstat (limited to 'www')
| -rw-r--r-- | www/demos/feed.html | 141 | ||||
| -rw-r--r-- | www/docs/40-aria.md | 11 | ||||
| -rw-r--r-- | www/docs/B0-js.md | 24 |
3 files changed, 87 insertions, 89 deletions
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 § 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 § <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 § <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 § 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 |