@optionfactory/fml 9.0.0-rc6 → 9.0.0-rc7

package/dist/fml.iife.js

@@ -9088,6 +9088,14 @@ var fml = (function (exports) {
                 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;
@@ -10223,8 +10231,13 @@ var fml = (function (exports) {
             //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');
@@ -10242,6 +10255,10 @@ var fml = (function (exports) {
                     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,
@@ -10388,6 +10405,20 @@ var fml = (function (exports) {
             //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) {
@@ -10400,7 +10431,9 @@ var fml = (function (exports) {
                     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);
@@ -10418,6 +10451,7 @@ var fml = (function (exports) {
                     return li;
                 }),
             );
+            this.#mark();
         }
         #sync() {
             const pinned = this.pinned;