flexdesk 0.2.0 → 0.3.0

package/src/ui/components/action_dropdown.js

@@ -174,13 +174,27 @@ export class ActionDropdown {
         // Position against trigger
         ActionDropdown.position(this.trigger, this.menuEl);
 
-        // Animate in
+        // Animate in.
+        //
+        // OPTIONAL CHAINING, AND IT IS LOAD-BEARING. This callback runs a frame
+        // after `open()` returned, and `destroy()` sets `this.menuEl = null`
+        // (see below) — so a dropdown that is opened and then destroyed inside
+        // one frame threw an uncaught `TypeError: Cannot read properties of
+        // null` out of an animation-frame callback, where no caller has a stack
+        // to catch it. That is not a hypothetical: it is what a user does every
+        // time they open a picker and then click something that unmounts the
+        // pane around it, and it was reproduced eighteen times in one run of a
+        // consumer's settings suite. Nothing is lost by skipping the class — the
+        // element it would have been added to no longer exists.
         requestAnimationFrame(() => {
-            this.menuEl.classList.add('visible');
+            this.menuEl?.classList.add('visible');
         });
 
         // Update trigger state
         this.trigger?.classList.add('twm-is-open');
+        if (this.trigger?.hasAttribute('aria-expanded')) {
+            this.trigger.setAttribute('aria-expanded', 'true');
+        }
 
         // Add document listeners
         document.addEventListener('click', this._boundHandleDocumentClick, true);
@@ -204,8 +218,16 @@ export class ActionDropdown {
             this.menuEl.hidden = true;
         }
 
-        // Update trigger state
+        // Update trigger state. `aria-expanded` belongs on the TRIGGER and has
+        // to be written on every close, not only on the ones a click caused —
+        // an embedder that synced it from its own click handler was announcing
+        // an expanded menu to a screen reader every time Escape or an outside
+        // click dismissed one. The component knows when it closed; nothing else
+        // reliably does.
         this.trigger?.classList.remove('twm-is-open');
+        if (this.trigger?.hasAttribute('aria-expanded')) {
+            this.trigger.setAttribute('aria-expanded', 'false');
+        }
 
         // Remove document listeners
         document.removeEventListener('click', this._boundHandleDocumentClick, true);
@@ -235,6 +257,15 @@ export class ActionDropdown {
      */
     _handleKeydown(e) {
         if (e.key === 'Escape') {
+            // AND NOBODY ELSE GETS IT. An open dropdown is the innermost thing
+            // on screen, so Escape means "close this" and nothing further —
+            // but the event was left to bubble, and inside a `ManagedWindow`
+            // (which binds its own Escape to dismiss) that meant one keystroke
+            // closed the dropdown AND the dialog around it. The user loses a
+            // form they were filling in because they changed their mind about
+            // one field.
+            e.preventDefault();
+            e.stopPropagation();
             this.close();
             this.trigger?.focus();
             return;

package/src/ui/components/autocomplete_field.js

@@ -80,6 +80,10 @@ export class AutocompleteField {
         this._activeIndex = -1;
         this._isOpen = false;
         this._disposers = [];
+        // Every call to the provider is numbered. See `#updateSuggestions`: a
+        // provider that answers over the network answers out of order, and the
+        // reply to "No" must not be allowed to overwrite the reply to "North".
+        this._suggestSeq = 0;
     }
 
     getValue() {
@@ -431,24 +435,68 @@ export class AutocompleteField {
     #updateSuggestions() {
         // Pass the fragment (variable part) for filtering, not the full composed value
         const fragment = this.#getInputFragment();
+
+        // A PROVIDER MAY ANSWER LATER THAN IT WAS ASKED.
+        //
+        // This used to require the answer synchronously — `provider(...) || []`
+        // straight into `Array.isArray`, so a provider that returned a promise
+        // produced an empty list and a dropdown that closed on every keystroke.
+        // That ruled out the entire class of completion source that lives on a
+        // server, which is most of them outside a single-page simulation: a
+        // table's rows, a query's result set, an index's matches.
+        //
+        // A provider that answers synchronously still takes the synchronous
+        // path, unchanged and untouched, so nothing that works today changes.
+        // A provider that hands back a thenable is awaited, and the reply is
+        // used only if it is the reply to the most recent question — typing
+        // "North" fires five requests and the network is free to answer them in
+        // any order, so without the sequence number the list can settle on the
+        // matches for "Nor".
+        const request = ++this._suggestSeq;
+        let produced;
         try {
-            const items = this.provider({ 
-                value: fragment, 
-                scope: this.scope, 
-                namespace: this.selectedNamespace 
-            }) || [];
-            this._items = Array.isArray(items) ? items : [];
-            this._activeIndex = items.length > 0 ? 0 : -1;
-            this.#renderDropdown();
-            if (items.length > 0) {
-                this.#open();
-            } else {
-                this.#close();
-            }
+            produced = this.provider({
+                value: fragment,
+                scope: this.scope,
+                namespace: this.selectedNamespace
+            });
         } catch (err) {
             this.logger?.warn?.('autocomplete', 'Provider error', { err });
             this._items = [];
             this.#close();
+            return;
+        }
+
+        if (produced && typeof produced.then === 'function') {
+            produced.then(
+                (items) => {
+                    if (request !== this._suggestSeq) return;
+                    this.#applySuggestions(items);
+                },
+                (err) => {
+                    this.logger?.warn?.('autocomplete', 'Provider error', { err });
+                    if (request !== this._suggestSeq) return;
+                    this._items = [];
+                    this.#close();
+                }
+            );
+            return;
+        }
+
+        this.#applySuggestions(produced);
+    }
+
+    /** Draw whatever the provider produced. Split out of `#updateSuggestions`
+     *  so the synchronous and the awaited paths cannot drift apart. */
+    #applySuggestions(produced) {
+        const items = Array.isArray(produced) ? produced : [];
+        this._items = items;
+        this._activeIndex = items.length > 0 ? 0 : -1;
+        this.#renderDropdown();
+        if (items.length > 0) {
+            this.#open();
+        } else {
+            this.#close();
         }
     }
 
@@ -714,6 +762,10 @@ export class AutocompleteField {
     }
 
     dispose() {
+        // Retire the outstanding question first. An awaited provider can answer
+        // after the field is gone, and `#applySuggestions` would then paint into
+        // a dropdown that has been removed and nulled.
+        this._suggestSeq += 1;
         // Close dropdown before cleanup
         this.#close();
         this._disposers.forEach((fn) => {

package/src/ui/components/context_menu.js

@@ -10,28 +10,65 @@
  *   ], (action) => { ... });
  *
  * The menu auto-closes on outside click / scroll / Escape.
+ *
+ * ── It is operable by keyboard ────────────────────────────────────────
+ * Items were bare `<div>`s with a click listener: no role, no tab stop, no
+ * arrow-key movement, and `showContextMenu` never moved focus into the menu.
+ * A consumer that opened this from Shift+F10 — the rail in Tables does — put a
+ * menu on screen that the keyboard could only dismiss. Every command in it was
+ * unreachable without a pointer, and nothing said so.
+ *
+ * So an item is a `<button role="menuitem">`, the first enabled one takes focus
+ * when the menu opens, Up/Down/Home/End move between them and wrap, Enter and
+ * Space activate, Escape closes, and focus returns to whatever had it before.
+ * Disabled items are skipped by the arrows rather than focusable-but-inert.
+ * `<button>` rather than a div with `tabindex`: the browser then gives Enter and
+ * Space for free and screen readers announce it without further help.
  */
 
+import { modalHost } from './modal.js';
+
 let _activeMenu = null;
+let _returnFocusTo = null;
 
 export function showContextMenu(x, y, items, onAction) {
     hideContextMenu();
 
+    // Whatever had focus when the menu opened gets it back when the menu
+    // closes. Without this a keyboard user who presses Escape is returned to
+    // `document.body` and has to tab back to where they were.
+    _returnFocusTo = document.activeElement;
+
     const menu = document.createElement('div');
     menu.className = 'twm-context-menu ea-context-menu';
+    menu.setAttribute('role', 'menu');
 
     for (const it of items) {
         if (it.separator) {
             const sep = document.createElement('div');
             sep.className = 'twm-context-menu__separator';
+            sep.setAttribute('role', 'separator');
             menu.appendChild(sep);
             continue;
         }
-        const row = document.createElement('div');
+        const row = document.createElement('button');
+        row.type = 'button';
+        row.setAttribute('role', 'menuitem');
         let cls = 'twm-context-menu-item';
         if (it.danger) cls += ' twm-delete-node';
         if (it.disabled) cls += ' disabled';
         row.className = cls;
+        if (it.disabled) {
+            row.disabled = true;
+            row.setAttribute('aria-disabled', 'true');
+        }
+        // A DISABLED ROW WITH NO EXPLANATION IS A DEAD CONTROL. `title` was
+        // accepted by callers and rendered by nothing — the item was built with
+        // one, the row silently dropped it, and the user got a greyed line with
+        // no way to learn why. It is the same shape as the classes this
+        // repository keeps finding: no error, no throw, and invisible to every
+        // test that checks the row is disabled.
+        if (it.title) row.title = it.title;
         row.innerHTML = `
             <span class="material-symbols-outlined">${it.icon || ''}</span>
             <span>${escapeHtml(it.label)}</span>
@@ -46,7 +83,12 @@ export function showContextMenu(x, y, items, onAction) {
         menu.appendChild(row);
     }
 
-    document.body.appendChild(menu);
+    // C25. THE SAME QUESTION A MODAL ASKS: which window is the user in? A
+    // consumer spanning two browser windows sets the host when its focus moves;
+    // null — every consumer today — is `document.body`, exactly as before. A
+    // menu in the wrong window is worse than a modal in the wrong window,
+    // because it is positioned at coordinates from the OTHER one.
+    (modalHost() || document.body).appendChild(menu);
     menu.style.display = 'block';
     _activeMenu = menu;
 
@@ -61,23 +103,52 @@ export function showContextMenu(x, y, items, onAction) {
     setTimeout(() => {
         document.addEventListener('mousedown', _outsideHandler, { once: true, capture: true });
     }, 0);
-    document.addEventListener('keydown', _escHandler);
+    document.addEventListener('keydown', _keyHandler);
     window.addEventListener('scroll', hideContextMenu, { once: true, capture: true });
+
+    // Focus the first item the keyboard can actually use. `preventScroll` so a
+    // menu opened near the bottom of a long page does not jump it.
+    _enabledItems(menu)[0]?.focus({ preventScroll: true });
 }
 
 export function hideContextMenu() {
     if (!_activeMenu) return;
+    const returnTo = _returnFocusTo;
+    const held = _activeMenu.contains(document.activeElement);
     _activeMenu.remove();
     _activeMenu = null;
-    document.removeEventListener('keydown', _escHandler);
+    _returnFocusTo = null;
+    document.removeEventListener('keydown', _keyHandler);
+    // Only take focus back if the menu still had it. A click elsewhere has
+    // already moved focus deliberately and must not be undone.
+    if (held && returnTo?.isConnected) returnTo.focus?.({ preventScroll: true });
 }
 
-function _outsideHandler(e) {
-    if (_activeMenu && !_activeMenu.contains(e.target)) hideContextMenu();
+function _enabledItems(menu) {
+    return [...menu.querySelectorAll('.twm-context-menu-item:not(.disabled)')];
+}
+
+/** Up/Down/Home/End move; the list WRAPS, which is what a menu of four items
+ *  wants and what every desktop menu does. Enter and Space are the button's
+ *  own, so they are not bound here. */
+function _keyHandler(e) {
+    if (!_activeMenu) return;
+    if (e.key === 'Escape') { e.preventDefault(); hideContextMenu(); return; }
+    const items = _enabledItems(_activeMenu);
+    if (items.length === 0) return;
+    const at = items.indexOf(document.activeElement);
+    let next = null;
+    if (e.key === 'ArrowDown')      next = items[(at + 1 + items.length) % items.length];
+    else if (e.key === 'ArrowUp')   next = items[(at - 1 + items.length) % items.length];
+    else if (e.key === 'Home')      next = items[0];
+    else if (e.key === 'End')       next = items[items.length - 1];
+    if (!next) return;
+    e.preventDefault();
+    next.focus({ preventScroll: true });
 }
 
-function _escHandler(e) {
-    if (e.key === 'Escape') hideContextMenu();
+function _outsideHandler(e) {
+    if (_activeMenu && !_activeMenu.contains(e.target)) hideContextMenu();
 }
 
 function escapeHtml(s) {