diff options
Diffstat (limited to 'www/docs')
| -rw-r--r-- | www/docs/40-aria.md | 11 | ||||
| -rw-r--r-- | www/docs/B0-js.md | 24 |
2 files changed, 17 insertions, 18 deletions
diff --git a/www/docs/40-aria.md b/www/docs/40-aria.md index 396837f..34ea561 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 `feed` role with `<article>` children — see [WAI: Feed][]. Nested feeds are supported. +Use the `<aria-feed>` custom element 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 - <div role="feed"> + <aria-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> - </div> + </aria-feed> ~~~ <div> <script type="module" src="/dist/js/feed.js"></script> - <div role="feed"> + <aria-feed> <article class="box" aria-labelledby="article-1-label"> <h2 id="article-1-label">Article Title 1</h2> <p>Article content</p> @@ -195,9 +195,10 @@ 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> - </div> + </aria-feed> </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 ffc81aa..a7bbcf2 100644 --- a/www/docs/B0-js.md +++ b/www/docs/B0-js.md @@ -98,23 +98,21 @@ _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> -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. - - +The `<aria-feed>` custom element utilizes `MutationObserver`, so dynamic content should "just work." ## Expand/collapse navbar |