flexdesk 0.18.0 → 0.18.2

package/src/ui/components/workspace_picker.js

@@ -39,16 +39,27 @@
  *
  * ══ THE KEYBOARD ═══════════════════════════════════════════════════════════
  *
- * The caret stays in the input, so typing always types. The arrows walk a
- * highlight over every stop, wrapping: the rows a person can choose (a disabled
- * one is stepped over), Load more, the action rows, the card's buttons, the
- * footer's. Until they move, the highlight is the first row or action row of
- * what is shown, and Enter takes it, or, while the answer to what was typed is
- * on its way, takes the first one when it lands. Shift+Delete removes the
- * highlighted row. Esc closes and gives focus back to where it was, as does a
- * pick or a verb, before it runs, so a dialog it opens opens over nothing. A
- * press outside closes and leaves focus where it was pressed. Tab leaves the
- * input for the panel's buttons, and out of the panel closes it.
+ * Focus is real: what the keyboard is on is `document.activeElement`, so a screen
+ * reader says each stop, a button in the card or the footer included, and Tab and
+ * the arrows agree about where the reader is.
+ *
+ * Opening puts the caret in the input. The arrows walk focus over every stop,
+ * wrapping: the input, the rows a person can choose (a disabled one is stepped
+ * over), Load more, the action rows, the card's buttons, the footer's; after
+ * `open({ select })` they start from the row it chose. Tab is shorter: the rows are
+ * ONE tab stop (the row last focused, else the current one, else the first), and so
+ * are the action rows. An answer or a redraw leaves focus where it is, on a row that
+ * moved too; Load more stays focusable while it loads.
+ *
+ * Typing always types: a character pressed anywhere in the panel goes to the input.
+ * In the input, the first row or action row of what is shown wears the highlight,
+ * and Enter takes it, or, while the answer to what was typed is on its way, takes
+ * the first one when it lands. Enter or Space on a row takes that row. Shift+Delete
+ * removes the highlighted row, and focus goes on to the next. Backspace away from
+ * the input stops at the panel. Esc closes and gives focus back to where it was, as
+ * does a pick or a verb, before it runs, so a dialog it opens opens over nothing. A
+ * press outside closes and leaves focus where it was pressed. Tab out of the panel
+ * closes it.
  *
  * ══ NOTHING IS REBUILT UNDER A POINTER ═════════════════════════════════════
  *
@@ -58,8 +69,9 @@
  * Which node holds what lives in maps here, never in DOM attributes.
  *
  * Nor is a list moved under one. The list scrolls to the highlight only when the
- * keyboard moved the highlight, `open({ select })` asked for a row, or the row
- * the arrows chose went away; typing and a new query's answer go back to the top.
+ * keyboard moved it, `open({ select })` asked for a row, or the row the arrows chose
+ * went away (focus then goes to the input); typing and a new query's answer go back
+ * to the top.
  * A redraw, Load more by the mouse and a removal leave the scroll where it is.
  *
  * ══ AN ASYNC REMOVE MAY ASK ════════════════════════════════════════════════
@@ -123,7 +135,9 @@ function button(className) {
  * Keep `container`'s children one per key: `build()` makes `{ node, ... }` for
  * a new key, `update(entry, item)` brings any entry up to date, a key that went
  * loses its node, and a node already in its place is not moved (moving one
- * under a pressed pointer is half of rebuilding it).
+ * under a pressed pointer is half of rebuilding it). The node holding focus is
+ * never moved, wherever it belongs now: the others go round it, because moving it
+ * would drop the keyboard on the body.
  * @returns {(items: object[], keyOf: (item: object) => unknown) => Map<string, object>}
  */
 function keyedChildren(container, build, update) {
@@ -141,8 +155,11 @@ function keyedChildren(container, build, update) {
             if (!next.has(key)) entry.node.remove();
         }
         drawn = next;
+        const focused = document.activeElement;
         nodes.forEach((node, index) => {
-            if (container.children[index] !== node) {
+            if (node.contains(focused)) {
+                while (container.children[index] !== node) container.append(container.children[index]);
+            } else if (container.children[index] !== node) {
                 container.insertBefore(node, container.children[index] || null);
             }
         });
@@ -402,6 +419,8 @@ export function createPickerSwitcher({
     let activeNode = null;
     /** The arrows chose the highlight; an answer does not move it. */
     let moved = false;
+    /** The row last focused, per list of rows. */
+    const rovingKeys = {};
     let nextEntryId = 0;
     const kept = new Map();
 
@@ -482,6 +501,7 @@ export function createPickerSwitcher({
         const node = part('div', 'twm-wspicker__row');
         node.id = `${uid}-row-${++nextEntryId}`;
         node.setAttribute('role', 'option');
+        node.tabIndex = -1;
         const icon = glyph('', 'twm-wspicker__row-icon');
         const text = part('span', 'twm-wspicker__row-text');
         const name = part('span', 'twm-wspicker__row-name');
@@ -523,6 +543,7 @@ export function createPickerSwitcher({
         const disabled = !!model.disabled;
         paintRow(entry, { ...model, disabled, isCurrentRow: isCurrent(item) });
         entry.run = disabled ? null : () => pick(item);
+        if (disabled) entry.node.tabIndex = -1;
         const removable = !!onRemove && model.removable !== false;
         entry.remove = removable ? () => removeItem(item) : null;
         show(entry.bin, removable);
@@ -646,6 +667,18 @@ export function createPickerSwitcher({
         }
         for (const [key, entry] of drawnFoot) next.push({ key: `foot:${key}`, node: entry.node, run: entry.run });
         stops = next;
+        syncTabStops();
+    }
+
+    /** One tab stop per list of rows: the row last focused, else the current one, else the first. */
+    function syncTabStops() {
+        const currentKey = current == null ? null : `row:${idOf(current)}`;
+        for (const prefix of ['row:', 'action:']) {
+            const rows = stops.filter((s) => s.key.startsWith(prefix));
+            const chosen = rows.find((s) => s.key === rovingKeys[prefix])
+                ?? rows.find((s) => s.key === currentKey) ?? rows[0];
+            for (const stop of rows) stop.node.tabIndex = stop === chosen ? 0 : -1;
+        }
     }
 
     function paintActive() {
@@ -671,6 +704,11 @@ export function createPickerSwitcher({
         }
         if (!moved || !stops.some((s) => s.key === activeKey)) {
             reveal = moved;
+            // The stop that held focus went, with its node or by being hidden: the
+            // keyboard must not be left on the body, where none of this panel's keys
+            // are heard, or on what no longer is a stop.
+            const at = document.activeElement;
+            if (moved && isOpen && (at === document.body || (panel.contains(at) && at !== input))) input.focus();
             moved = false;
             activeKey = stops.find((s) => s.primary)?.key ?? null;
         }
@@ -678,13 +716,25 @@ export function createPickerSwitcher({
         if (reveal) revealActive();
     }
 
-    function move(step) {
-        if (!stops.length) return;
-        const at = stops.findIndex((s) => s.key === activeKey);
-        const next = at === -1 ? (step > 0 ? 0 : stops.length - 1) : (at + step + stops.length) % stops.length;
-        activeKey = stops[next].key;
+    /** Focus on `stop`, without the browser's own scroll: `revealActive` is the one that may. */
+    function focusStop(stop) {
+        activeKey = stop.key;
         moved = true;
+        stop.node.focus({ preventScroll: true });
         paintActive();
+    }
+
+    function move(step) {
+        const walk = [input, ...stops.map((s) => s.node)];
+        // `open({ select })` chose a row and left the caret in the input: the arrows
+        // go on from that row.
+        const from = document.activeElement === input && moved ? activeNode : document.activeElement;
+        const next = walk[(walk.indexOf(from) + step + walk.length) % walk.length];
+        if (next === input) {
+            input.focus();
+            return;
+        }
+        focusStop(stops.find((s) => s.node === next));
         revealActive();
     }
 
@@ -713,7 +763,8 @@ export function createPickerSwitcher({
         if (remaining > 0) {
             setText(moreLabel, labels.loadMore({ next: Math.min(pageSize, remaining), shown: items.length, total }));
         }
-        more.disabled = loading || loadingMore;
+        // Not `disabled`: that would drop focus on the body. `loadMore` refuses for itself.
+        more.setAttribute('aria-disabled', String(loading || loadingMore));
 
         collectStops(rowEntries, actionEntries, shown);
         settleActive();
@@ -806,8 +857,8 @@ export function createPickerSwitcher({
             failure = labels.failedMore(err);
         }
         loadingMore = false;
-        // The highlight stays on Load more while there is more, else goes to
-        // the first row it brought that can be chosen.
+        // Focus stays on Load more while there is more, else goes to the first
+        // row it brought that can be chosen. Only the keyboard scrolls to it.
         const stayed = activeKey === 'more';
         if (stayed && items.length >= total) {
             const first = added.find((item) => !modelOf(item).disabled);
@@ -817,7 +868,11 @@ export function createPickerSwitcher({
             }
         }
         renderEverything();
-        if (byKey && stayed) revealActive();
+        if (stayed) {
+            const stop = stops.find((s) => s.key === activeKey);
+            if (stop) focusStop(stop);
+            if (byKey) revealActive();
+        }
     }
 
     more.addEventListener('click', () => loadMore());
@@ -834,6 +889,7 @@ export function createPickerSwitcher({
         const at = stops.findIndex((s) => s.key === removedKey);
         const following = stops.slice(at + 1).find((s) => s.key.startsWith('row:'))
             ?? stops.slice(0, Math.max(at, 0)).reverse().find((s) => s.key.startsWith('row:'));
+        const fromRow = stops[at]?.node === document.activeElement;
         // Before the call: a dialog it opens takes focus before it returns.
         setBusy(true);
         let outcome;
@@ -858,6 +914,11 @@ export function createPickerSwitcher({
                 moved = true;
             }
             ask(remote ? answered : '');
+            if (fromRow && following) {
+                focusStop(following);
+                revealActive();
+                return;
+            }
         }
         input.focus();
     }
@@ -935,6 +996,8 @@ export function createPickerSwitcher({
         pickFirst = false;
         moved = false;
         activeKey = null;
+        delete rovingKeys['row:'];
+        delete rovingKeys['action:'];
         const last = kept.get(cacheKey());
         items = last ? [...last.items] : [];
         total = last ? last.total : null;
@@ -994,11 +1057,34 @@ export function createPickerSwitcher({
         close({ restoreFocus: true });
     }
 
-    // The caret stays in the input whatever is pressed in the panel.
+    // A press in the panel leaves focus where it is: on a row or a button it is
+    // about to act and close; anywhere else it would drop the keyboard on nothing.
     panel.addEventListener('mousedown', (event) => {
         if (event.target !== input) event.preventDefault();
     });
 
+    // Focus gets here by the arrows, Tab or a script, and the highlight goes with it.
+    panel.addEventListener('focusin', ({ target, relatedTarget }) => {
+        if (target === input) {
+            // Back from a stop, not in from outside: `open({ select })` chose first.
+            if (panel.contains(relatedTarget)) {
+                moved = false;
+                settleActive();
+            }
+            return;
+        }
+        const stop = stops.find((s) => s.node === target);
+        if (!stop) return;
+        activeKey = stop.key;
+        moved = true;
+        // The reader has gone on: an answer still to land does not pull the highlight back.
+        selectId = null;
+        const prefix = ['row:', 'action:'].find((p) => stop.key.startsWith(p));
+        if (prefix) rovingKeys[prefix] = stop.key;
+        syncTabStops();
+        paintActive();
+    });
+
     input.addEventListener('input', () => {
         moved = false;
         scroller.scrollTop = 0;
@@ -1020,23 +1106,35 @@ export function createPickerSwitcher({
             event.preventDefault();
             event.stopPropagation();
         };
+        const stop = stops.find((s) => s.node === target);
         if (key === 'Escape') {
             handled();
             close({ restoreFocus: true });
         } else if (key === 'ArrowDown' || key === 'ArrowUp') {
             handled();
-            if (document.activeElement !== input) input.focus();
             move(key === 'ArrowDown' ? 1 : -1);
         } else if (key === 'Enter' && target === input) {
             handled();
             enter();
-        } else if (key === 'Delete' && shiftKey && target === input) {
+        } else if ((key === 'Enter' || key === ' ') && stop) {
+            // A row is no button, because it holds one; and Load more scrolls for
+            // a key and not for a click.
+            handled();
+            stop.run();
+        } else if (key === 'Delete' && shiftKey) {
             handled();
             stops.find((s) => s.key === activeKey)?.remove?.();
         } else if (key === 'Backspace' && target !== input) {
             // A window manager's keymap reads Backspace on anything that is not
-            // a field as "up one level"; a button of this panel is not a field.
+            // a field as "up one level"; a row or a button here is not a field.
             handled();
+        } else if (target !== input && key.length === 1 && key !== ' '
+                   && !event.ctrlKey && !event.metaKey && !event.altKey) {
+            // Moved before the press lands, so the character lands in the input;
+            // and no further, because a keymap would read it as a shortcut: the
+            // press began on something that is not a field.
+            event.stopPropagation();
+            input.focus();
         }
     });
 

package/src/ui/utils/tooltip_service.js

@@ -13,6 +13,10 @@ let currentTarget = null;
 let listenersAttached = false;
 let mouseCheckInterval = null;
 let lastMousePosition = { x: 0, y: 0 };
+/** The target keyboard focus is showing a tooltip for: no pointer holds it up. */
+let focusTarget = null;
+/** The last press was a key. Focus that follows a pointer's, or a script's after one, shows nothing. */
+let byKeyboard = false;
 
 /**
  * Create or get the tooltip DOM element.
@@ -140,14 +144,15 @@ function showTooltip(target) {
     const hasPlain = target.classList && target.classList.contains('twm-has-tooltip');
 
     if (!hasLatex && !hasPlain) return;
+    if (!target.getAttribute(hasLatex ? 'data-latex-tooltip' : 'data-tooltip')) return;
 
+    stopMouseCheck();
     currentTarget = target;
     const tooltip = createTooltipElement();
 
     if (hasLatex) {
         // Render LaTeX using KaTeX
         const latex = target.getAttribute('data-latex-tooltip');
-        if (!latex) return;
 
         try {
             if (typeof katex !== 'undefined') {
@@ -166,7 +171,6 @@ function showTooltip(target) {
     } else if (hasPlain) {
         // Plain text tooltip with line breaks preserved
         const text = target.getAttribute('data-tooltip');
-        if (!text) return;
 
         // Replace 
 with actual line breaks, preserve formatting
         const formattedText = text.replace(/
/g, '\n');
@@ -197,11 +201,13 @@ function showTooltip(target) {
 
     // Position and show
     requestAnimationFrame(() => {
+        // Gone in the frame's wait: focus passing through, or the pointer leaving.
+        if (currentTarget !== target) return;
         positionTooltip(target, tooltip);
         tooltip.classList.add('visible');
 
-        // Start mouse position check for auto-hide
-        startMouseCheck();
+        // Start mouse position check for auto-hide, unless focus is what holds it.
+        if (focusTarget !== target) startMouseCheck();
     });
 }
 
@@ -213,23 +219,51 @@ function hideTooltip() {
         tooltipElement.classList.remove('visible');
     }
     currentTarget = null;
+    focusTarget = null;
+    stopMouseCheck();
+}
 
-    // Clear mouse check interval
+function stopMouseCheck() {
     if (mouseCheckInterval) {
         clearInterval(mouseCheckInterval);
         mouseCheckInterval = null;
     }
 }
 
+/**
+ * The pointer has gone from what it showed, or a scroll took that away. What focus
+ * holds is not the pointer's to hide: it stays, or comes back from under the
+ * pointer's, as long as its target is in sight.
+ */
+function pointerGone() {
+    const held = focusTarget;
+    if (held && held === currentTarget) return;
+    hideTooltip();
+    if (!held) return;
+    focusTarget = held;
+    showTooltip(held);
+    requestAnimationFrame(() => {
+        if (held === focusTarget && held === currentTarget) followFocus();
+    });
+}
+
+/**
+ * A scroll while focus holds the tooltip, the one the focus itself caused included:
+ * the tooltip goes with its target, and waits while the target is out of sight.
+ */
+function followFocus() {
+    const { left, top, width, height } = focusTarget.getBoundingClientRect();
+    const inSight = focusTarget.contains(document.elementFromPoint(left + width / 2, top + height / 2));
+    tooltipElement.classList.toggle('visible', inSight);
+    if (inSight) positionTooltip(focusTarget, tooltipElement);
+}
+
 /**
  * Start the mouse position check interval.
  * Hides tooltip if mouse is no longer over the target element.
  */
 function startMouseCheck() {
-    // Clear any existing interval
-    if (mouseCheckInterval) {
-        clearInterval(mouseCheckInterval);
-    }
+    stopMouseCheck();
 
     // Check every 3 seconds if mouse is still on the target element
     mouseCheckInterval = setInterval(() => {
@@ -249,11 +283,11 @@ function startMouseCheck() {
                                      elementUnderMouse.closest('.twm-has-tooltip, .has-latex-tooltip') === currentTarget;
 
             if (!isStillOnTarget) {
-                hideTooltip();
+                pointerGone();
             }
         } else {
             // Mouse is outside the document
-            hideTooltip();
+            pointerGone();
         }
     }, 3000);
 }
@@ -289,11 +323,44 @@ function attachListeners() {
         if (!(target instanceof Element)) return;
         const tooltipTarget = target.closest('.has-latex-tooltip, .twm-has-tooltip');
         if (!tooltipTarget) return;
-        hideTooltip();
+        pointerGone();
+    }, true);
+
+    // On the window, ahead of a chord handler that stops the event. A chord is not
+    // a person walking the page by keyboard: it says nothing either way.
+    window.addEventListener('keydown', (event) => {
+        if (!event.ctrlKey && !event.metaKey && !event.altKey) byKeyboard = true;
+    }, true);
+    window.addEventListener('pointerdown', () => {
+        byKeyboard = false;
     }, true);
 
-    // Hide on scroll
-    document.addEventListener('scroll', hideTooltip, true);
+    // Keyboard focus shows what hovering shows. The focus a click leaves, or that
+    // its handler moves into a field, would keep a tooltip standing after the pointer
+    // has gone. `:focus-visible` cannot tell: it is true for any text field.
+    document.addEventListener('focusin', (event) => {
+        const target = event.target;
+        if (!(target instanceof Element) || !byKeyboard) return;
+        const tooltipTarget = target.closest('.has-latex-tooltip, .twm-has-tooltip');
+        if (!tooltipTarget) return;
+        focusTarget = tooltipTarget;
+        showTooltip(tooltipTarget);
+    }, true);
+
+    document.addEventListener('focusout', (event) => {
+        if (!focusTarget) return;
+        const next = event.relatedTarget;
+        if (next instanceof Node && focusTarget.contains(next)) return;
+        // A pointer's tooltip on another target is the pointer's to take down.
+        if (focusTarget === currentTarget) hideTooltip();
+        else focusTarget = null;
+    }, true);
+
+    // Hide on scroll, unless focus is what holds it.
+    document.addEventListener('scroll', () => {
+        if (focusTarget && focusTarget === currentTarget) followFocus();
+        else pointerGone();
+    }, true);
 
     // ESC key hides all tooltips application-wide (does not stop propagation)
     document.addEventListener('keydown', (event) => {