@optionfactory/ful 1.0.12 → 1.0.14

package/dist/ful.iife.js

@@ -1387,7 +1387,9 @@ var ful = (function (exports, ftl) {
                 this.spinner(false);
             }
         }
-
+        reset(){
+            this.form.reset();
+        }
         spinner(spin) {
             this.querySelectorAll('ful-spinner').forEach(el => {
                 const hel = /** @type HTMLElement */ (el);
@@ -1413,16 +1415,16 @@ var ful = (function (exports, ftl) {
         static observed = ['value', 'readonly:presence'];
         static slots = true;
         static template = `
-        <label data-tpl-for="id" class="form-label">{{{{ slots.default }}}}</label>
+        <label class="form-label">{{{{ slots.default }}}}</label>
         <div class="input-group">
             <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
             {{{{ slots.before }}}}
-            <input data-tpl-if="type != 'textarea'" class="form-control" data-tpl-id="id" data-tpl-type="type" placeholder=" " data-tpl-aria-describedby="fieldErrorId" form="">
-            <textarea data-tpl-if="type == 'textarea'" class="form-control" data-tpl-id="id" placeholder=" " data-tpl-aria-describedby="fieldErrorId" form=""></textarea>
+            <input data-tpl-if="type != 'textarea'" class="form-control" data-tpl-type="type" placeholder=" " form="">
+            <textarea data-tpl-if="type == 'textarea'" class="form-control" placeholder=" " form=""></textarea>
             {{{{ slots.after }}}}
             <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
         </div>
-        <ful-field-error data-tpl-id="fieldErrorId"></ful-field-error>
+        <ful-field-error></ful-field-error>
     `;
         static formAssociated = true;
         #input;
@@ -1430,15 +1432,18 @@ var ful = (function (exports, ftl) {
         constructor() {
             super();
             this.internals = this.attachInternals();
-            this.internals.role = 'textbox';
+            this.internals.role = 'presentation';
         }
-        render({ slots }) {
-            const id = ftl.Attributes.uid('ful-input');
-            const fieldErrorId = `${id}-error`;
+        render({ slots, observed, disabled }) {
             const type = this.getAttribute("type") ?? 'text';
-            const fragment = this.template().withOverlay({ id, type, fieldErrorId, slots }).render();    
+            const fragment = this.template().withOverlay({ type, slots }).render();    
             this.#input = fragment.querySelector("input,textarea");
+
             ftl.Attributes.forward('input-', this, this.#input);
+            this.disabled = disabled;
+            this.readonly = observed.readonly;
+            this.value = observed.value;
+
             this.#input.addEventListener('change', (evt) => {
                 evt.stopPropagation();
                 this.dispatchEvent(new CustomEvent('change', {
@@ -1449,7 +1454,11 @@ var ful = (function (exports, ftl) {
                     }
                 }));
             });
+            const label = fragment.querySelector('label');
+            label.addEventListener('click', () => this.focus());
             this.#fieldError = fragment.querySelector('ful-field-error');
+            this.#input.ariaDescribedByElements = [this.#fieldError];
+            this.#input.ariaLabelledByElements = [label];
             this.replaceChildren(fragment);
         }
         get value() {
@@ -1464,6 +1473,12 @@ var ful = (function (exports, ftl) {
         set readonly(v) {
             this.#input.readOnly = v;
         }    
+        get disabled(){
+            return this.#input.hasAttribute('disabled');
+        }
+        set disabled(d){
+            ftl.Attributes.toggle(this.#input, 'disabled', d);
+        }
         focus(options) {
             this.#input.focus(options);
         }
@@ -1476,6 +1491,9 @@ var ful = (function (exports, ftl) {
             this.internals.setValidity({ customError: true }, " ");
             this.#fieldError.innerText = error;
         }
+        formResetCallback(){
+            this.value = this.getAttribute("value");
+        }
     }
 
     class CompleteSelectLoader {
@@ -1565,11 +1583,9 @@ var ful = (function (exports, ftl) {
             this.#data = data;
         }
         async exact(...keys) {
-            await timing.sleep(500);
             return this.#data.filter(([k, v]) => keys.includes(k));
         }
         async load(needle) {
-            await timing.sleep(500);
             return this.#data.filter(([k, v]) => v.includes(needle?.toLowerCase()));
         }
     }
@@ -1678,22 +1694,22 @@ var ful = (function (exports, ftl) {
     }
 
     class Select extends ftl.ParsedElement {
-        static observed = ['value:csvm']
+        static observed = ['value:csvm', 'readonly:presence']
         static slots = true
         static template = `
-        <label data-tpl-for="id" class="form-label">{{{{ slots.default }}}}</label>
+        <label class="form-label">{{{{ slots.default }}}}</label>
         <div class="input-group flex-nowrap" tabindex="-1">
             <span data-tpl-if="slots.ibefore" class="input-group-text">{{{{ slots.ibefore }}}}</span>
             {{{{ slots.before }}}}
             <div class="ful-select-input">
                 <badges></badges>
-                <input data-tpl-id="id" data-tpl-ariadesribed-by="fieldErrorId" type="text" form="">
+                <input type="text" form="">
             </div>
             {{{{ slots.after }}}}
             <span data-tpl-if="slots.iafter" class="input-group-text">{{{{ slots.iafter }}}}</span>
         </div>
         <ful-dropdown hidden></ful-dropdown>
-        <ful-field-error data-tpl-id="fieldErrorId"></ful-field-error>
+        <ful-field-error></ful-field-error>
     `;
         static mappers = {
             "csvm": (v, name, el) => {
@@ -1715,20 +1731,27 @@ var ful = (function (exports, ftl) {
         constructor() {
             super();
             this.internals = this.attachInternals();
-            this.internals.role = 'combobox';
+            this.internals.role = 'presentation';
         }
-        async render({ slots, observed }) {
+        async render({ slots, observed, disabled }) {
             const name = this.getAttribute("name");
-            const id = ftl.Attributes.uid('ful-select');
-            const fieldErrorId = id + "-error";
             this.#loader = Loaders.fromAttributes(this, 'loaders:select', { options: slots.options });
             await this.#loader.prefetch?.();
-            const fragment = this.template().withOverlay({ slots, name, id, fieldErrorId }).render();
+            const fragment = this.template().withOverlay({ slots, name }).render();
             this.#input = fragment.querySelector('input');
             this.#badges = fragment.querySelector('badges');
+
+            this.value = observed.value;
+            this.disabled = disabled;
+            this.readonly = observed.readonly;
+
             this.#ddmenu = fragment.querySelector('ful-dropdown');
             this.#multiple = this.hasAttribute("multiple");
+            const label = fragment.querySelector('label');
+            label.addEventListener('click', () => this.focus());
             this.#fieldError = fragment.querySelector('ful-field-error');
+            this.#input.ariaDescribedByElements = [this.#fieldError];
+            this.#input.ariaLabelledByElements = [label];
 
             const self = this;
             const [dload, abortdload] = timing.debounce(400, () => self.#ddmenu.show(() => self.#loader.load(self.#input.value)));
@@ -1822,6 +1845,11 @@ var ful = (function (exports, ftl) {
             this.#badges.append(...badges);
         }
         set value(value) {
+            if(value === null){
+                this.#values = new Map();
+                this.#syncBadges();
+                return;            
+            }
             (async () => {
                 const entries = await (this.#multiple ? this.#loader.exact(...value) : this.#loader.exact(value));
                 this.#values = new Map(entries);
@@ -1849,10 +1877,10 @@ var ful = (function (exports, ftl) {
     }
 
     class RadioGroup extends ftl.ParsedElement {
-        static observed = ['value'];
+        static observed = ['value', 'readonly:presence'];
         static slots = true;
         static template = `
-        <fieldset data-tpl-aria-describedby="fieldErrorId">
+        <fieldset>
             <legend class="form-label">
                 {{{{ slots.default }}}}
             </legend>
@@ -1867,13 +1895,14 @@ var ful = (function (exports, ftl) {
                     </label>
                 </div>
             </section>
-            <ful-field-error data-tpl-id="fieldErrorId"></ful-field-error>
+            <ful-field-error></ful-field-error>
             <footer data-tpl-if="slots.footer">
                 {{{{ slots.footer }}}}
             </footer>
         </fieldset>
     `;
         static formAssociated = true;
+        #fieldset;
         #fieldError;
         #firstRadio;
         #booleanType;
@@ -1882,7 +1911,7 @@ var ful = (function (exports, ftl) {
             this.internals = this.attachInternals();
             this.internals.role = 'radiogroup';
         }
-        render({ slots }) {
+        render({ slots, observed, disabled }) {
             const name = this.getAttribute('name') ?? ftl.Attributes.uid('ful-radiogroup');
             const radioEls = Array.from(slots.default.querySelectorAll('ful-radio'));
             const inputsAndLabels = radioEls.map(el => {
@@ -1908,9 +1937,13 @@ var ful = (function (exports, ftl) {
             });
 
             radioEls.forEach(el => el.remove());
-            const fieldErrorId = ftl.Attributes.uid("ful-error");
-            this.template().withOverlay({ name, fieldErrorId, slots, inputsAndLabels }).renderTo(this);
+            this.template().withOverlay({ name, slots, inputsAndLabels }).renderTo(this);
+            this.#fieldset = this.firstElementChild;
+            this.disabled = disabled;
+            this.readonly = observed.readonly;
+            this.value = observed.value;
             this.#fieldError = this.querySelector('ful-field-error');
+            this.ariaDescribedByElements = [this.#fieldError];
             this.#firstRadio = this.querySelector('input[type=radio]');
             this.#booleanType = this.getAttribute('type') === 'boolean';
         }
@@ -1931,7 +1964,19 @@ var ful = (function (exports, ftl) {
             if (el) {
                 el.checked = true;
             }
+        }     
+        get readonly(){
+            return this.#fieldset.inert;
+        }
+        set readonly(v) {
+            this.#fieldset.inert = v;
+        }        
+        get disabled(){
+            return this.#fieldset.hasAttribute('disabled');
         }
+        set disabled(d){
+            ftl.Attributes.toggle(this.#fieldset, 'disabled', d);
+        }    
         focus(options) {
             this.#firstRadio.focus(options);
         }
@@ -1947,34 +1992,35 @@ var ful = (function (exports, ftl) {
     }
 
     class Checkbox extends ftl.ParsedElement {
-        static observed = ['value:bool'];
+        static observed = ['value:bool', 'readonly:presence'];
         static slots = true;
         static template = `
         <div data-tpl-class="klass">
             <div class="input-container">
-                <input data-tpl-id="id" class="form-check-input" type="checkbox" role="switch" form="" placeholder=" " data-tpl-aria-describedby="fieldErrorId">
+                <input class="form-check-input" type="checkbox" role="switch" form="" placeholder=" ">
             </div>
-            <label data-tpl-for="id" class="form-check-label">{{{{ slots.default }}}}</label>
+            <label class="form-check-label">{{{{ slots.default }}}}</label>
         </div>
-        <ful-field-error data-tpl-if="fieldErrorId"></ful-field-error>
+        <ful-field-error></ful-field-error>
     `;
+        #container;
         #input;
         #fieldError;
         static formAssociated = true;
         constructor() {
             super();
             this.internals = this.attachInternals();
-            this.internals.role = 'checkbox';
+            this.internals.role = 'presentation';
         }
-        render({ slots }) {
-            const id = ftl.Attributes.uid("ful-checkbox");
-            const fieldErrorId = id + "-error";
+        render({ slots, observed, disabled }) {
             const klass = this.getAttribute('type') == 'switch' ? "form-check form-switch" : "form-check";
-            this.internals.role = this.getAttribute('type') == 'switch' ? 'switch' : 'checkbox';
-            const fragment = this.template().withOverlay({ slots, klass, id, fieldErrorId }).render();
+            const fragment = this.template().withOverlay({ slots, klass }).render();
+            this.#container = fragment.firstElementChild;
             this.#input = fragment.querySelector("input");
             ftl.Attributes.forward('input-', this, this.#input);
-            this.#fieldError = fragment.querySelector('ful-field-error');
+            this.disabled = disabled;
+            this.readonly = observed.readonly;
+            this.value = observed.value;
             this.#input.addEventListener('change', (evt) => {
                 evt.stopPropagation();
                 this.dispatchEvent(new CustomEvent('change', {
@@ -1984,7 +2030,18 @@ var ful = (function (exports, ftl) {
                         value: this.value
                     }
                 }));
-            });        
+            });
+            const label = fragment.querySelector('label');
+            label.addEventListener('click', () => {
+                this.focus();
+                if (this.disabled || this.readonly) {
+                    return;
+                }
+                this.value = !this.value;
+            });
+            this.#fieldError = fragment.querySelector('ful-field-error');
+            this.#input.ariaDescribedByElements = [this.#fieldError];
+            this.#input.ariaLabelledByElements = [label];
             this.replaceChildren(fragment);
         }
         get value() {
@@ -1993,6 +2050,18 @@ var ful = (function (exports, ftl) {
         set value(value) {
             this.#input.checked = value;
         }
+        get readonly(){
+            return this.#container.inert;
+        }
+        set readonly(v) {
+            this.#container.inert = v;
+        }     
+        get disabled() {
+            return this.#input.hasAttribute('disabled');
+        }
+        set disabled(d) {
+            ftl.Attributes.toggle(this.#input, 'disabled', d);
+        }
         focus(options) {
             this.#input.focus(options);
         }
@@ -2216,48 +2285,50 @@ var ful = (function (exports, ftl) {
         <ful-form data-tpl-if="slots.filters">
             {{{{ slots.filters }}}}
         </ful-form>
-        <table class="table">
-            <caption data-tpl-if="slots.caption">{{{{ slots.caption }}}}</caption>
-            <thead>
-                <tr>
-                    <th data-tpl-each="schema" scope="col" data-tpl-class="title.classes">
-                        {{{{ title.fragment }}}}
-                        <ful-sorter data-tpl-if="sorter || order" data-tpl-sorter="sorter" data-tpl-order="order"></ful-sorter>
-                    </th>
-                </tr>
-            </thead>
-            <tbody></tbody>
-            <tbody data-ref="no-autoload">
-                <tr>
-                    <td data-tpl-colspan="schema.length" class="text-center align-middle p-4">
-                        <i class="bi bi-search" style="font-size: 40px; color: #BDC3CA"></i>
-                        <p class="mt-3 mb-0" style="color: #BDC3CA">
-                            Avvia la ricerca per visualizzare i risultati...
-                        </p>
-                    </td>
-                </tr>
-            </tbody>
-            <tbody data-ref="loading" hidden>
-                <tr>
-                    <td data-tpl-colspan="schema.length" class="text-center align-middle p-4">
-                        <ful-spinner class="big"></ful-spinner>
-                    </td>
-                </tr>
-            </tbody>
-            <tbody data-ref="feedback" hidden>
-                <tr>
-                    <td data-tpl-colspan="schema.length" class="text-center align-middle p-4">
-                        <div class="alert alert-danger">
-                            <p>Errore nel caricamento della tabella:</p>
-                            <p class="mb-0" data-ref="feedback-error"></p>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-            <tfoot data-tpl-if="slots.footer">
-                {{{{ slots.footer }}}}
-            </tfoot>
-        </table>
+        <div class="table-wrapper">
+            <table class="table">
+                <caption data-tpl-if="slots.caption">{{{{ slots.caption }}}}</caption>
+                <thead>
+                    <tr>
+                        <th data-tpl-each="schema" scope="col" data-tpl-class="title.classes">
+                            {{{{ title.fragment }}}}
+                            <ful-sorter data-tpl-if="sorter || order" data-tpl-sorter="sorter" data-tpl-order="order"></ful-sorter>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody></tbody>
+                <tbody data-ref="no-autoload">
+                    <tr>
+                        <td data-tpl-colspan="schema.length" class="text-center align-middle p-4">
+                            <i class="bi bi-search" style="font-size: 40px; color: #BDC3CA"></i>
+                            <p class="mt-3 mb-0" style="color: #BDC3CA">
+                                Avvia la ricerca per visualizzare i risultati...
+                            </p>
+                        </td>
+                    </tr>
+                </tbody>
+                <tbody data-ref="loading" hidden>
+                    <tr>
+                        <td data-tpl-colspan="schema.length" class="text-center align-middle p-4">
+                            <ful-spinner class="big"></ful-spinner>
+                        </td>
+                    </tr>
+                </tbody>
+                <tbody data-ref="feedback" hidden>
+                    <tr>
+                        <td data-tpl-colspan="schema.length" class="text-center align-middle p-4">
+                            <div class="alert alert-danger">
+                                <p>Errore nel caricamento della tabella:</p>
+                                <p class="mb-0" data-ref="feedback-error"></p>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+                <tfoot data-tpl-if="slots.footer">
+                    {{{{ slots.footer }}}}
+                </tfoot>
+            </table>
+        </div>
         <ful-pagination current="0" total="1"></ful-pagination>
     `;
         static templates = {
@@ -2286,7 +2357,8 @@ var ful = (function (exports, ftl) {
             const template = this.template();
             const schema = TableSchemaParser.parse(slots.default, template);
             const fragment = template.withOverlay({ slots, schema }).render();
-            const table = /** @type HTMLTableElement */ (ftl.Nodes.queryChildren(fragment, 'table'));
+            const tableWrapper = /** @type HTMLTableElement */ (ftl.Nodes.queryChildren(fragment, '.table-wrapper'));
+            const table = /** @type HTMLTableElement */ (tableWrapper.querySelector("table"));
             ftl.Attributes.forward('table-', this, table);
             this.#schema = schema;
             this.#body = table.querySelector(':scope > tbody');
@@ -2379,7 +2451,7 @@ var ful = (function (exports, ftl) {
         static observed = ["value:json"];
         static slots = true;
         static template = `
-        <label data-tpl-for="id" class="form-label" data-tpl-if="label">{{{{ label }}}}</label>
+        <label class="form-label" data-tpl-if="label">{{{{ label }}}}</label>
         <div class="input-group">
             <button data-ref="operator" class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" value="LTE" form="">&PrecedesSlantEqual;</button>
             <ul class="dropdown-menu">
@@ -2391,7 +2463,7 @@ var ful = (function (exports, ftl) {
                 <li><a class="dropdown-item" role="button" value="GTE">&SucceedsSlantEqual;</a></li>
                 <li><a class="dropdown-item" role="button" value="BETWEEN">&LeftRightArrow;</a></li>
             </ul>
-            <input data-tpl-id="id" data-ref="value1" type="datetime-local" class="form-control" form="">
+            <input data-ref="value1" type="datetime-local" class="form-control" form="">
             <input data-ref="value2" type="datetime-local" class="form-control" form="" hidden>
             <span class="input-group-text"><i class="bi bi-search"></i></span>
         </div>
@@ -2407,15 +2479,18 @@ var ful = (function (exports, ftl) {
             this.internals = this.attachInternals();
         }
         render({ slots }) {
-            const id = ftl.Attributes.uid('instant-filter');
             const label = ftl.Fragments.toHtml(slots.default.cloneNode(true)).trim().length === 0 ? null : slots.default;
             const name = this.getAttribute("name");
-            const fragment = this.template().withOverlay({ id, label, name }).render(this);
+            const fragment = this.template().withOverlay({ label, name }).render(this);
             this.#operator = fragment.querySelector('[data-ref=operator]');
             this.#value1 = fragment.querySelector('[data-ref=value1]');
             this.#value2 = fragment.querySelector('[data-ref=value2]');
+            this.#fieldError = fragment.querySelector('ful-field-error');
+            const labelEl = fragment.querySelector('label');
+            labelEl?.addEventListener('click', () => this.focus());
+            this.#value1.ariaDescribedByElements = [this.#fieldError];
+            this.#value1.ariaLabelledByElements = labelEl ? [labelEl] : [];
             this.replaceChildren(fragment);
-            this.#fieldError = this.querySelector('ful-field-error');
             this.addEventListener('click', (evt) => {
                 const target = /** @type HTMLElement */ (evt.target);
                 if (!target.matches('ul > li > a')) {
@@ -2478,7 +2553,7 @@ var ful = (function (exports, ftl) {
         static observed = ["value:json"];
         static slots = true;
         static template = `
-        <label data-tpl-for="id" class="form-label" data-tpl-if="label">{{{{ label }}}}</label>
+        <label class="form-label" data-tpl-if="label">{{{{ label }}}}</label>
         <div class="input-group">
             <button data-ref="operator" class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" value="EQ" form="">=</button>
             <ul class="dropdown-menu">
@@ -2490,10 +2565,9 @@ var ful = (function (exports, ftl) {
                 <li><a class="dropdown-item" role="button" value="GTE">&SucceedsSlantEqual;</a></li>
                 <li><a class="dropdown-item" role="button" value="BETWEEN">&LeftRightArrow;</a></li>
             </ul>
-            <input data-tpl-id="id" data-ref="value1" type="date" class="form-control" form="">
+            <input data-ref="value1" type="date" class="form-control" form="">
             <input data-ref="value2" type="date" class="form-control" form="" hidden>
             <span class="input-group-text"><i class="bi bi-search"></i></span>
-
         </div>
         <ful-field-error></ful-field-error>
     `;
@@ -2507,15 +2581,18 @@ var ful = (function (exports, ftl) {
             this.internals = this.attachInternals();
         }
         render({ slots }) {
-            const id = ftl.Attributes.uid('instant-filter');
             const label = ftl.Fragments.toHtml(slots.default.cloneNode(true)).trim().length === 0 ? null : slots.default;
             const name = this.getAttribute("name");
-            const fragment = this.template().withOverlay({ id, label, name }).render(this);
+            const fragment = this.template().withOverlay({ label, name }).render(this);
             this.#operator = fragment.querySelector('[data-ref=operator]');
             this.#value1 = fragment.querySelector('[data-ref=value1]');
             this.#value2 = fragment.querySelector('[data-ref=value2]');
+            this.#fieldError = fragment.querySelector('ful-field-error');
+            const labelEl = fragment.querySelector('label');
+            labelEl?.addEventListener('click', () => this.focus());
+            this.#value1.ariaDescribedByElements = [this.#fieldError];
+            this.#value1.ariaLabelledByElements = labelEl ? [labelEl] : [];
             this.replaceChildren(fragment);
-            this.#fieldError = this.querySelector('ful-field-error');
             this.addEventListener('click', (evt) => {
                 const target = /** @type HTMLElement */(evt.target);
                 if (!target.matches('ul > li > a')) {
@@ -2568,7 +2645,7 @@ var ful = (function (exports, ftl) {
         static observed = ["value:json"];
         static slots = true;
         static template = `
-        <label data-tpl-for="id" class="form-label" data-tpl-if="label">{{{{ label }}}}</label>
+        <label class="form-label" data-tpl-if="label">{{{{ label }}}}</label>
         <div class="input-group">
             <button data-ref="operator" class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" value="CONTAINS" form="">&mldr;a&mldr;</button>
             <ul class="dropdown-menu">
@@ -2577,7 +2654,7 @@ var ful = (function (exports, ftl) {
                 <li><a class="dropdown-item" role="button" value="ENDS_WITH">&mldr;a</a></li>
                 <li><a class="dropdown-item" role="button" value="EQ">=</a></li>
             </ul>
-            <input data-tpl-id="id" data-ref="value" type="text" class="form-control" form="">
+            <input data-ref="value" type="text" class="form-control" form="">
             <span class="input-group-text"><i class="bi bi-search"></i></span>
         </div>
         <ful-field-error></ful-field-error>
@@ -2591,14 +2668,17 @@ var ful = (function (exports, ftl) {
             this.internals = this.attachInternals();
         }
         render({ slots }) {
-            const id = ftl.Attributes.uid('string-filter');
             const label = ftl.Fragments.toHtml(slots.default.cloneNode(true)).trim().length === 0 ? null : slots.default;
             const name = this.getAttribute("name");
-            const fragment = this.template().withOverlay({ id, label, name }).render(this);
+            const fragment = this.template().withOverlay({ label, name }).render(this);
             this.#operator = fragment.querySelector('[data-ref=operator]');
             this.#value = fragment.querySelector('[data-ref=value]');
+            this.#fieldError = fragment.querySelector('ful-field-error');
+            const labelEl = fragment.querySelector('label');
+            labelEl?.addEventListener('click', () => this.focus());
+            this.#value.ariaDescribedByElements = [this.#fieldError];
+            this.#value.ariaLabelledByElements = labelEl ? [labelEl] : [];        
             this.replaceChildren(fragment);
-            this.#fieldError = this.querySelector('ful-field-error');
             this.addEventListener('click', (evt) => {
                 const target = /** @type HTMLElement */(evt.target);
                 if (!target.matches('ul > li > a')) {