@optionfactory/fml 9.0.0-rc6 → 9.0.0-rc7

package/dist/ful.mjs

@@ -2859,6 +2859,14 @@ class Select extends Field {
             if (!this._interactive()) {
                 return;
             }
+            //a click on another control inside the select is that control's, not
+            //the select's: a tooltip marker slotted into `info`, a button a page
+            //put in an affix. Without this, reading the note beside a select
+            //also stole the focus and dropped the dropdown over the note
+            const elsewhere = e.target.closest('button, a[href], input, select, textarea');
+            if (elsewhere && elsewhere !== this.#input) {
+                return;
+            }
             if (this.#ddmenu.shown) {
                 this.#close();
                 return;
@@ -3994,8 +4002,13 @@ class Table extends ParsedElement {
         //started is stale, and neither renders nor updates the request a later
         //reload replays, whichever order the responses arrive in
         const claim = this.#loads.take();
-        this.#body.replaceChildren();
-        this.#loading.removeAttribute('hidden');
+        //the rows stay while the table revalidates. Emptying the body and raising
+        //the spinner row in its place collapsed the table to one tall row and
+        //expanded it again on every sort, page and reload: two layout jumps for
+        //what is the same table with newer rows in it. The spinner is for the load
+        //with nothing to show yet, the first one and the one after a failure; the
+        //rest announce themselves through aria-busy, which the stylesheet reads
+        this.#loading.toggleAttribute('hidden', this.#body.childElementCount > 0);
         this.#feedback.setAttribute('hidden', '');
         this.#noAutoload.setAttribute('hidden', '');
         this.setAttribute('aria-busy', 'true');
@@ -4013,6 +4026,10 @@ class Table extends ParsedElement {
                 return;
             }
             this.#loading.setAttribute('hidden', '');
+            //the rows the failed load was replacing go with it: what the table
+            //holds is no longer what the request asked for, and leaving them
+            //under the error would say the opposite
+            this.#body.replaceChildren();
             this.#feedback.removeAttribute('hidden');
             this.#feedback.querySelector('[data-ref=feedback-error]').textContent = Failure.problemsText(
                 error,
@@ -4159,6 +4176,20 @@ class ChoiceButton {
         //menu is where the localized words live
         this.#button.textContent = this.#display(choice);
         Attributes.set(this.#button, 'aria-label', this.#labelFor(choice));
+        this.#mark();
+    }
+    /**
+     * Marks the item the button currently holds, which is what a menu of one
+     * choice among several owes the reader: the glyph on the button says which
+     * one it is only to somebody who already knows the glyphs. The items are
+     * `menuitemradio`, so the state is `aria-checked` rather than the
+     * `aria-selected` a listbox would use, and the stylesheet draws it off that.
+     */
+    #mark() {
+        const current = this.value;
+        for (const item of this.#items()) {
+            item.setAttribute('aria-checked', String(item.getAttribute('value') === current));
+        }
     }
     /** The host's disabled claim, composed with the pin: lifting one cannot lift the other. */
     set claimed(claimed) {
@@ -4171,7 +4202,9 @@ class ChoiceButton {
                 const li = document.createElement('li');
                 li.setAttribute('role', 'none');
                 const a = document.createElement('a');
-                a.setAttribute('role', 'menuitem');
+                //one choice among several, which is what a radio item is: the
+                //state belongs on the item, not on the button alone
+                a.setAttribute('role', 'menuitemradio');
                 a.setAttribute('tabindex', '-1');
                 a.setAttribute('value', choice);
                 const word = this.#labelFor(choice);
@@ -4189,6 +4222,7 @@ class ChoiceButton {
                 return li;
             }),
         );
+        this.#mark();
     }
     #sync() {
         const pinned = this.pinned;