aboutsummaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/js/feed.js85
-rw-r--r--src/missing-js/menu.js99
-rw-r--r--src/variables.css27
-rw-r--r--www/demos/feed.html80
-rw-r--r--www/docs/10-main.md3
-rw-r--r--www/docs/40-aria.md41
-rw-r--r--www/docs/80-utils.md13
-rw-r--r--www/docs/B0-js.md27
-rw-r--r--www/pages/playground.html2
9 files changed, 274 insertions, 103 deletions
diff --git a/src/js/feed.js b/src/js/feed.js
new file mode 100644
index 0000000..50ebfcd
--- /dev/null
+++ b/src/js/feed.js
@@ -0,0 +1,85 @@
+/// <reference lib="es2022" />
+
+import { $, $$, on, dispatch, halts, attr, next, prev, asHtml, hotkey, behavior, makelogger } from "./19.js"
+
+const ilog = makelogger("feed");
+const sFeed = "[role=feed]";
+const sScopedArticle = ":scope > article, :scope > [role=article]";
+const sArticle = "article, [role=article]";
+const sFocusable = ":is(a, area)[href], :is(button, details, embed, iframe, label, select, textarea):not([disabled]), :is(audio, video)[controls], :is(img, object)[usemap], [tabindex]:not([tabindex='-1'])"
+
+/**
+ * @param {HTMLElement} feed
+ * @returns {HTMLElement[]}
+ */
+const articles = feed => $$(feed, sScopedArticle);
+
+
+/**
+ * @param {HTMLElement} feed
+ * @param {HTMLElement} activeElement
+ * @returns {null}
+ */
+const focusPreviousArticle = (feed, activeElement) => asHtml(prev(feed, sArticle, activeElement, {wrap: false}))?.focus();
+
+
+/**
+ * @param {HTMLElement} feed
+ * @param {HTMLElement} activeElement
+ * @returns {null}
+ */
+const focusNextArticle = (feed, activeElement) => asHtml(next(feed, sArticle, activeElement.closest(sArticle), {wrap: false}))?.focus();
+
+
+/**
+ * @param {HTMLElement} article
+ * @returns {null}
+ */
+const focusOutsideFeed = article => asHtml(article.parentElement.closest(sArticle))?.focus();
+
+
+/**
+ * @param {HTMLElement} activeElement
+ * @returns {null}
+ */
+const focusInsideFeed = activeElement => asHtml($(activeElement.closest(sArticle), sArticle))?.focus();
+
+
+/**
+ * @param {HTMLElement} feed
+ * @returns {null}
+ */
+const focusBeforeFeed = feed => asHtml(prev(document.body, sFocusable, feed, {}))?.focus();
+
+
+/**
+ * @param {HTMLElement} feed
+ * @returns {null}
+ */
+const focusAfterFeed = feed => asHtml(next(document.body, sFocusable, feed, {}))?.focus();
+
+
+export const feed = behavior(sFeed, (feed, { root }) => {
+
+ if (!(feed instanceof HTMLElement)) return;
+
+ feed.setAttribute("aria-busy", "false");
+ articles(feed).forEach((article, idx, articles) => {
+ article.setAttribute("tabindex", "0");
+ article.setAttribute("aria-posinset", idx + 1);
+ article.setAttribute("aria-setsize", articles.length);
+ if (!(article.hasAttribute("aria-labelledby") || article.hasAttribute("aria-label")))
+ console.error("Article", article, "has no accessible name (aria-label or aria-labelledby)");
+ });
+
+ on(feed, "keydown", hotkey({
+ "PageUp": halts("default propagation", _ => focusPreviousArticle(feed, root.activeElement)),
+ "PageDown": halts("default propagation", _ => focusNextArticle(feed, root.activeElement)),
+ "Alt+PageUp": halts("default", _ => focusOutsideFeed(root.activeElement)),
+ "Alt+PageDown": halts("default", _ => focusInsideFeed(root.activeElement)),
+ "Ctrl+Home": halts("default propagation", _ => focusBeforeFeed(feed)),
+ "Ctrl+End": halts("default propagation", _ => focusAfterFeed(feed)),
+ }));
+});
+
+feed(document);
diff --git a/src/missing-js/menu.js b/src/missing-js/menu.js
deleted file mode 100644
index 8178be3..0000000
--- a/src/missing-js/menu.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/// <reference lib="es2022" />
-
-import { $, $$, on, dispatch, halts, attr, next, prev, asHtml, hotkey, behavior, makelogger } from "./19.js"
-
-const ilog = makelogger("menu");
-const sMenu = "[role=menu]";
-const sMenuitem = "[role=menuitem]";
-
-/**
- * @param {HTMLElement} menu
- * @returns {HTMLElement[]}
- */
-const menuItems = menu => $$(menu, sMenuitem);
-
-/**
- * @param {Element} button
- * @param {object} options
- * @param {import("./19.js").Root} options.root
- * @returns {HTMLElement | null}
- */
-const menuOf = (button, { root }) => {
- const id = attr(button, "aria-controls");
- if (id === null) return null;
- return root.getElementById(id);
-}
-
-/**
- * @param {HTMLElement} menu
- * @returns {HTMLElement | null}
- */
-const firstItem = menu => $(menu, sMenuitem)
-
-/**
- * @param {HTMLElement} menu
- * @returns {HTMLElement | null}
- */
-const lastItem = menu => menuItems(menu).at(-1) ?? null;
-
-
-/**
- * @param {HTMLElement} menu
- * @returns {boolean}
- */
-const isOpen = menu => !menu.hidden;
-
-export const menu = behavior(sMenu, (menu, { root }) => {
- if (!(menu instanceof HTMLElement)) return;
-
- let opener;
-
- menuItems(menu).forEach(item => item.setAttribute("tabindex", "-1"));
-
- on(menu, "menu:open", e => {
- opener = e.detail?.opener;
- if (!opener) ilog("Warning: Menu", menu, "opened without passing an `opener` element");
- menu.hidden = false;
- firstItem(menu)?.focus();
- });
-
- on(menu, "menu:close", _ => {
- ilog("menu:close", menu.hidden = true);
- opener?.focus();
- });
-
- on(menu, "focusout", e => {
- if (!isOpen(menu)) return;
- if (menu.contains(/** @type {Node} */(e.relatedTarget))) return;
- if (opener === e.relatedTarget) return;
- dispatch(menu, "menu:close");
- });
-
- on(menu, "keydown", halts("default", hotkey({
- "ArrowUp": _ => asHtml(prev(menu, sMenuitem, root.activeElement, {}))?.focus(),
- "ArrowDown": _ => asHtml(next(menu, sMenuitem, root.activeElement, {}))?.focus(),
- "Space": _ => asHtml(root.activeElement?.closest(sMenuitem))?.click(),
- "Home": _ => firstItem(menu)?.focus(),
- "End": _ => lastItem(menu)?.focus(),
- "Escape": _ => dispatch(menu, "menu:close"),
- })));
-
- on(window, "click", e => {
- if (!isOpen(menu)) return;
- if (opener === e.target) return;
- dispatch(menu, "menu:close");
- }, { addedBy: menu });
-});
-
-export const menuButton = behavior("[aria-haspopup=menu]", (button, { root }) => {
- const menu = menuOf(button, { root });
-
- if (menu === null) return ilog("Error: Menu button", button, "has no menu.");
-
- on(menu, "menu:close", _ => attr(button, "aria-expanded", "false"), { addedBy: button })
- on(menu, "menu:open", _ => attr(button, "aria-expanded", "true"), { addedBy: button })
- on(button, "click", () => dispatch(menu, isOpen(menu) ? "menu:close" : "menu:open", { opener: button }));
-});
-
-menu(document);
-menuButton(document);
diff --git a/src/variables.css b/src/variables.css
index 1c24d2e..d059bb5 100644
--- a/src/variables.css
+++ b/src/variables.css
@@ -66,6 +66,33 @@
) / 2); /* Divide by 2: there are two page margins */
}
+/* Enable dark theme independently of os preferences*/
+:root.-dark-theme {
+ --fg: var(--gray-0);
+ --muted-fg: var(--gray-2);
+ --faded-fg: var(--gray-7);
+ --plain-bg: var(--gray-11);
+ --info-bg: var(--blue-12);
+ --ok-bg: var(--green-12);
+ --bad-bg: var(--red-12);
+ --warn-bg: var(--yellow-12);
+ --plain-faded-fg: var(--blue-6);
+ --info-faded-fg: var(--blue-6);
+ --ok-faded-fg: var(--green-6);
+ --bad-faded-fg: var(--red-6);
+ --warn-faded-fg: var(--yellow-6);
+ --bg: var(--gray-12);
+ --box-bg: var(--gray-10);
+ --interactive-bg: var(--gray-8);
+ --plain-fg: (--blue-2);
+ --info-fg: var(--blue-2);
+ --ok-fg: var(--green-2);
+ --bad-fg: var(--red-2);
+ --warn-fg: var(--yellow-2);
+ --accent: var(--blue-2);
+ --muted-accent: var(--blue-5)
+}
+
@media (prefers-color-scheme: dark) {
:root:not(.-no-dark-theme) {
--fg: var(--gray-0);
diff --git a/www/demos/feed.html b/www/demos/feed.html
new file mode 100644
index 0000000..18990a7
--- /dev/null
+++ b/www/demos/feed.html
@@ -0,0 +1,80 @@
+---
+layout: layout.vto
+name: Feed
+---
+
+<main>
+ <h1>Feeds</h1>
+
+ <script type="module" src="/missing-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>
+ <a href="#">A focusable element before the feeds</a>
+ <div role="feed">
+ <article class="box">
+ <h2>Article 1</h2>
+ <p>Some content for the article.</p>
+ <a href="#">A focusable link</a>
+ </article>
+ <article class="box">
+ <h2>Article 2</h2>
+ <p>Some content for the article.</p>
+ <a href="#">A focusable link</a>
+ </article>
+ <article class="box">
+ <h2>Article 3</h2>
+ <p>Some content for the article.</p>
+ <a href="#">A focusable link</a>
+ </article>
+ </div>
+
+ <a href="#">A focusable element betweeen feeds</a>
+
+ <div role="feed">
+ <article class="box">
+ <h2>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>
+ <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>
+ <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>
+ <p>Some content for the article.</p>
+ <a href="#">A focusable link</a>
+ <div role="feed">
+ <article class="box ok">
+ <h3>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>
+ <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/10-main.md b/www/docs/10-main.md
index 5f6807f..2035c13 100644
--- a/www/docs/10-main.md
+++ b/www/docs/10-main.md
@@ -37,3 +37,6 @@ This will make your page look a bit like the one you are reading right now,
without applying any classes.
Then, see how you can go beyond classless CSS with its features.
+
+P.S. you can click any class, variable or custom element name in these docs to
+jump to its definition. Try it: `.tool-bar`
diff --git a/www/docs/40-aria.md b/www/docs/40-aria.md
index 0ab9e52..84aa4b5 100644
--- a/www/docs/40-aria.md
+++ b/www/docs/40-aria.md
@@ -18,6 +18,7 @@ appropriately — see [WAI: Tabs][].
To get the actual behavior of an accessible tabset, you can use [Missing.js &sect; Tabs](/docs/js#tabs).
+<figure>
~~~ html
<div role="tablist" aria-label="Tabs example">
<button role="tab" aria-controls="servers" aria-selected="true"
@@ -32,6 +33,7 @@ To get the actual behavior of an accessible tabset, you can use [Missing.js &sec
<div id="channels" role="tabpanel">...</div>
<div id="users" role="tabpanel">...</div>
~~~
+</figure>
<script type="module" src="/dist/js/tabs.js"></script>
@@ -157,3 +159,42 @@ The fiex direction will be set based on `aria-orientation`.
</p>
</figure>
+
+
+## Feed
+
+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 &sect; Feed](/docs/js#feed).
+
+<figure>
+
+ ~~~ html
+ <div role="feed">
+ <article class="box">
+ <h2>Article Title 1</h2>
+ <p>Article content</p>
+ </article>
+ <article class="box">
+ <h2>Article Title 2</h2>
+ <p>Article content</p>
+ </article>
+ </div>
+ ~~~
+
+ <div>
+ <script type="module" src="/missing-js/feed.js"></script>
+ <div role="feed">
+ <article class="box">
+ <h2>Article Title 1</h2>
+ <p>Article content</p>
+ </article>
+ <article class="box">
+ <h2>Article Title 2</h2>
+ <p>Article content</p>
+ </article>
+ </div>
+
+</figure>
+
+[WAI: Menu]: https://www.w3.org/WAI/ARIA/apg/patterns/feed/
diff --git a/www/docs/80-utils.md b/www/docs/80-utils.md
index 5512439..e06e469 100644
--- a/www/docs/80-utils.md
+++ b/www/docs/80-utils.md
@@ -131,12 +131,19 @@ The following classes can be used to make one element look like another:
</figure>
+## Theme selection
-## No dark theme
+Missing.css, by default applies a light or dark theme based on `prefers-color-scheme`.
+To customize the theme independently of the `prefers-color-scheme` you can use
+the following classes:
-Missing.css applies a dark theme based on `prefers-color-scheme`.
-To opt out of this, add the <dfn>`.-no-dark-theme`</dfn> class to your root element.
+### Dark theme
+Add the <dfn>`.-dark-theme`</dfn> class to your root element to use the dark theme.
+
+### No dark theme
+
+Add the <dfn>`.-no-dark-theme`</dfn> class to your root element to use the light theme.
## Reset
diff --git a/www/docs/B0-js.md b/www/docs/B0-js.md
index 1642902..910afaf 100644
--- a/www/docs/B0-js.md
+++ b/www/docs/B0-js.md
@@ -90,6 +90,33 @@ or
All notes above about initializing dynamic content apply here.
+## Feed
+
+_See [ARIA &sect; feed](/docs/aria/#feed)_
+
+<figure>
+
+ ~~~ html
+ <script type="module" src="https://unpkg.com/missing.css@{{ version }}/js/feed.js">
+ ~~~
+
+</figure>
+
+or
+
+<figure>
+
+ ~~~js
+ import { menu, menuButton } from "https://unpkg.com/missing.css@{{ version }}/js/feed.js";
+ ~~~
+
+</figure>
+
+All notes above about initializing dynamic content apply here.
+
+
+
+
## Expand/collapse navbar
_See [Components &sect; Navbar](/docs/components/#navbar)_
diff --git a/www/pages/playground.html b/www/pages/playground.html
index 6d67b32..255a35d 100644
--- a/www/pages/playground.html
+++ b/www/pages/playground.html
@@ -26,7 +26,7 @@ url: /playground/
append "<head>"
append "<meta charset=UTF-8>"
append "<meta name=viewport content=width=device-width>"
- append "<link rel=stylesheet href=/missing.css>"
+ append "<link rel=stylesheet href=/dist/missing.css>"
append "</head>"
append "<body>"
append #code's value
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-30 03:13:30 +0000