@eunomia/elements 1.0.0-beta.6 → 1.0.0-beta.7

package/dist/components/form/input-phone/input-phone.d.ts

@@ -7,6 +7,7 @@ import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
 import { AnchorPositionMixinInterface } from "../../../mixins/anchor-position.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
+import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the phone input component.
  */
@@ -16,7 +17,7 @@ export declare const EunomiaInputPhoneTagName = "eun-input-phone";
  * interface element.
  * @internal
  */
-type EunomiaInputPhoneBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface;
+type EunomiaInputPhoneBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & FormLabelMixinInterface & FieldAppearanceMixinInterface & AnchorPositionMixinInterface & LocalizableMixinInterface;
 declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
 /**
  * A phone number field rendered in two adjacent parts: a compact country
@@ -55,6 +56,7 @@ declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether the field is required
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<Validators<string>>} validators - The list of validation rules applied to the field value
  * @prop {string} [placeholder] - The placeholder shown when the field is empty. Defaults to a generic formatted digit pattern, not a real per-country example, when unset
@@ -62,8 +64,8 @@ declare const EunomiaInputPhoneMixinBase: Constructor<EunomiaInputPhoneBase>;
  * @attr {string} [country-search-placeholder='Search a country…'] - The placeholder of the search field inside the country dropdown
  * @prop {string} [noResultsLabel='No results'] - Text displayed in the dropdown when no country matches the search
  * @attr {string} [no-results-label='No results'] - Text displayed in the dropdown when no country matches the search
- * @prop {string} [ariaLabelCountrySelector='Select a country'] - The accessible label of the leading country selector button
- * @attr {string} [aria-label-country-selector='Select a country'] - The accessible label of the leading country selector button
+ * @prop {string} [countrySelectorLabel] - The accessible label of the leading country selector button. Defaults to the localized string for the current locale (English: "Select a country")
+ * @attr {string} [country-selector-label] - The accessible label of the leading country selector button. Defaults to the localized string for the current locale (English: "Select a country")
  * @fires {ChangeEvent} eunchange - Fired on every value change
  * @cssprop [--field-background] - Sets the background color of the field
  * @cssprop [--field-border-color] - Sets the border color of the field
@@ -139,9 +141,9 @@ export declare class EunomiaInputPhone extends EunomiaInputPhoneMixinBase {
     noResultsLabel: string;
     /**
      * Accessible label of the leading country-selector button.
-     * @default Select a country
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelCountrySelector: string;
+    countrySelectorLabel?: string;
     /**
      * The raw national digits currently typed (no dial code, no separators) —
      * *including* a leading trunk "0" if the user typed one, kept exactly as
@@ -211,6 +213,15 @@ export declare class EunomiaInputPhone extends EunomiaInputPhoneMixinBase {
      * @internal
      */
     private triggerPointerDownAt?;
+    constructor();
+    /**
+     * Submits the owning form on Enter in the number field, as a native text
+     * input does, since the browser never does it from a shadow root.
+     * Listened to on the host so the country list's own Enter handling is
+     * never mistaken for it.
+     * @private
+     */
+    private readonly handleImplicitSubmission;
     connectedCallback(): void;
     /**
      * Lifecycle hook called when the element is disconnected from the DOM.
@@ -268,6 +279,12 @@ export declare class EunomiaInputPhone extends EunomiaInputPhoneMixinBase {
      * @param _changedProperties - Map of changed properties
      */
     protected updated(_changedProperties: PropertyValues): void;
+    /**
+     * The host is never a tab stop of its own : sequential navigation goes
+     * straight to the controls inside, in both directions, and
+     * {@link focus} covers a direct call on the host.
+     */
+    protected get hostTabStop(): boolean;
     /**
      * Returns the field element to focus/anchor on validation errors.
      *

package/dist/components/form/input-phone/input-phone.js

@@ -8,6 +8,7 @@ var EunomiaInputPhone_1;
 import { customElement, property, query, state } from "lit/decorators.js";
 import { html, LitElement, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { DisabledMixin, } from "../../../mixins/disabled.mixin.js";
 import { ReadonlyMixin, } from "../../../mixins/readonly.mixin.js";
 import { ValidatorsMixin, } from "../../../mixins/validators.mixin.js";
@@ -21,6 +22,8 @@ import { inputPhoneStyles } from "./input-phone.styles.js";
 import { isWebKit } from "../../../utils/browser.utils.js";
 import { COUNTRY_DIAL_CODES, formatNationalNumber, fromE164, getCountryName, getDialCode, getNationalLength, stripTrunkPrefix, getFlagEmoji, toE164, } from "./input-phone.type.js";
 import { resolveDurationMs, resolveEasing, } from "../../../utils/motion.utils.js";
+import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
+import { isImplicitSubmissionKey, submitImplicitly, } from "../../../utils/implicit-submission.utils.js";
 /**
  * Tag name of the phone input component.
  */
@@ -63,7 +66,7 @@ const TRIGGER_POINTER_DOWN_WINDOW_MS = 100;
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaInputPhoneMixinBase = AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base)))));
+const EunomiaInputPhoneMixinBase = LocalizableMixin(AnchorPositionMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(FormMixin(Base))))));
 /**
  * A phone number field rendered in two adjacent parts: a compact country
  * selector, showing only the flag, on the leading side, and the phone
@@ -101,6 +104,7 @@ const EunomiaInputPhoneMixinBase = AnchorPositionMixin(FieldAppearanceMixin(Form
  * @prop {boolean} [readonly=false] - Whether the field is read only
  * @prop {boolean} [required=false] - Whether the field is required
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @prop {Array<Validators<string>>} validators - The list of validation rules applied to the field value
  * @prop {string} [placeholder] - The placeholder shown when the field is empty. Defaults to a generic formatted digit pattern, not a real per-country example, when unset
@@ -108,8 +112,8 @@ const EunomiaInputPhoneMixinBase = AnchorPositionMixin(FieldAppearanceMixin(Form
  * @attr {string} [country-search-placeholder='Search a country…'] - The placeholder of the search field inside the country dropdown
  * @prop {string} [noResultsLabel='No results'] - Text displayed in the dropdown when no country matches the search
  * @attr {string} [no-results-label='No results'] - Text displayed in the dropdown when no country matches the search
- * @prop {string} [ariaLabelCountrySelector='Select a country'] - The accessible label of the leading country selector button
- * @attr {string} [aria-label-country-selector='Select a country'] - The accessible label of the leading country selector button
+ * @prop {string} [countrySelectorLabel] - The accessible label of the leading country selector button. Defaults to the localized string for the current locale (English: "Select a country")
+ * @attr {string} [country-selector-label] - The accessible label of the leading country selector button. Defaults to the localized string for the current locale (English: "Select a country")
  * @fires {ChangeEvent} eunchange - Fired on every value change
  * @cssprop [--field-background] - Sets the background color of the field
  * @cssprop [--field-border-color] - Sets the border color of the field
@@ -136,7 +140,7 @@ const EunomiaInputPhoneMixinBase = AnchorPositionMixin(FieldAppearanceMixin(Form
  */
 let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends EunomiaInputPhoneMixinBase {
     constructor() {
-        super(...arguments);
+        super();
         /**
          * Hides the leading country-selector part entirely. `country` can still
          * be set programmatically, with no picker UI to change it.
@@ -158,11 +162,6 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
          * @default No results
          */
         this.noResultsLabel = "No results";
-        /**
-         * Accessible label of the leading country-selector button.
-         * @default Select a country
-         */
-        this.ariaLabelCountrySelector = "Select a country";
         /**
          * The raw national digits currently typed (no dial code, no separators) —
          * *including* a leading trunk "0" if the user typed one, kept exactly as
@@ -189,6 +188,23 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
          * @internal
          */
         this.highlightedIndex = -1;
+        /**
+         * Submits the owning form on Enter in the number field, as a native text
+         * input does, since the browser never does it from a shadow root.
+         * Listened to on the host so the country list's own Enter handling is
+         * never mistaken for it.
+         * @private
+         */
+        this.handleImplicitSubmission = (event) => {
+            const form = this.internals.form;
+            if (!form ||
+                event.composedPath()[0] !== this.fieldEl ||
+                !isImplicitSubmissionKey(event)) {
+                return;
+            }
+            event.preventDefault();
+            submitImplicitly(form);
+        };
         /**
          * Closes the dropdown when the browser window itself loses focus (e.g.
          * Alt-Tab to another application). The Popover API's own light-dismiss
@@ -267,6 +283,7 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
             this.unanchorFloatingElement();
             this.unobserveAnchorVisibility();
         };
+        this.addEventListener("keydown", this.handleImplicitSubmission);
     }
     connectedCallback() {
         super.connectedCallback?.();
@@ -341,6 +358,14 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
                 ?.scrollIntoView({ block: "nearest" });
         }
     }
+    /**
+     * The host is never a tab stop of its own : sequential navigation goes
+     * straight to the controls inside, in both directions, and
+     * {@link focus} covers a direct call on the host.
+     */
+    get hostTabStop() {
+        return false;
+    }
     /**
      * Returns the field element to focus/anchor on validation errors.
      *
@@ -635,7 +660,8 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
         aria-haspopup="listbox"
         aria-expanded=${this.isOpen}
         aria-controls="listbox"
-        aria-label=${this.ariaLabelCountrySelector}
+        aria-label=${this.countrySelectorLabel ??
+            this.dictionary.inputPhone.selectCountry}
         ?disabled=${this.disabled || this.readonly}
         @pointerdown=${this.handleTriggerPointerDown}
         @click=${this.handleTriggerClick}
@@ -662,7 +688,8 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
       <ul
         id="listbox"
         role="listbox"
-        aria-label=${this.ariaLabelCountrySelector}
+        aria-label=${this.countrySelectorLabel ??
+            this.dictionary.inputPhone.selectCountry}
         popover="auto"
         @toggle=${this.handlePopoverToggle}
       >
@@ -739,6 +766,7 @@ let EunomiaInputPhone = EunomiaInputPhone_1 = class EunomiaInputPhone extends Eu
               placeholder=${this.effectivePlaceholder}
               ?disabled=${this.disabled}
               ?readonly=${this.readonly}
+              aria-label=${ifDefined(this.label)}
               aria-describedby=${hasDescription ? "description" : nothing}
               aria-invalid=${this.showError}
               @input=${this.handlePhoneInput}
@@ -793,8 +821,8 @@ __decorate([
     property({ attribute: "no-results-label" })
 ], EunomiaInputPhone.prototype, "noResultsLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-country-selector" })
-], EunomiaInputPhone.prototype, "ariaLabelCountrySelector", void 0);
+    property({ attribute: "country-selector-label" })
+], EunomiaInputPhone.prototype, "countrySelectorLabel", void 0);
 __decorate([
     state()
 ], EunomiaInputPhone.prototype, "nationalDigits", void 0);

package/dist/components/form/radio/radio-card.d.ts

@@ -23,6 +23,7 @@ export declare const EunomiaRadioCardTagName = "eun-radio-card";
  * @prop {boolean} [disabled=false] - Whether the card is disabled
  * @prop {boolean} [readonly=false] - Whether the card is read only
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @attr {boolean} [hide-error=false] - Whether the error message is hidden. The hint stays visible
  * @prop {boolean} [required=false] - Whether a selection is required

package/dist/components/form/radio/radio-card.js

@@ -34,6 +34,7 @@ export const EunomiaRadioCardTagName = "eun-radio-card";
  * @prop {boolean} [disabled=false] - Whether the card is disabled
  * @prop {boolean} [readonly=false] - Whether the card is read only
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @attr {boolean} [hide-error=false] - Whether the error message is hidden. The hint stays visible
  * @prop {boolean} [required=false] - Whether a selection is required

package/dist/components/form/radio/radio-list.d.ts

@@ -33,6 +33,7 @@ declare const EunomiaRadioList_base: import("../../../utils/constructor.type.js"
  * @prop {string} [defaultValue] - The value reselected when the list connects, and restored on form reset
  * @attr {string} [default-value] - The value reselected when the list connects, and restored on form reset
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @attr {boolean} [hide-error=false] - Whether the errors are hidden. The hint stays visible
  * @prop {Array<import('../../../types/form-validators.type.js').Validators<string | undefined>>} validators - A list of validation rules applied to the group's selected value
@@ -53,6 +54,11 @@ export declare class EunomiaRadioList extends EunomiaRadioList_base {
      * @readonly
      */
     static readonly styles: import("lit").CSSResult[];
+    /**
+     * Every change is a complete choice, so its error shows right away.
+     * @internal
+     */
+    errorOnChange: boolean;
     /**
      * Configuration options for the component Shadow DOM
      * @internal
@@ -110,8 +116,7 @@ export declare class EunomiaRadioList extends EunomiaRadioList_base {
      * Assigns `name`/`id` to every child, applies a `default-value` selection
      * once the slotted children actually exist (see `handleSlotChange` for
      * why this can't rely on `FormMixin`'s own `defaultValue` setter alone),
-     * restores `aria-activedescendant` for a child checked directly in
-     * markup, and sets up the initial roving `tabindex`.
+     * and sets up the initial roving `tabindex`.
      *
      * The roving `tabindex` is applied only once every child's own first
      * update has settled — each `eun-radio` is itself a `DisabledMixin` user,
@@ -130,6 +135,17 @@ export declare class EunomiaRadioList extends EunomiaRadioList_base {
      * Cleans up event listeners.
      */
     disconnectedCallback(): void;
+    /**
+     * Whether the group's own `disabled`/`readonly` changed in a way to pass
+     * on to every child : always once set, but not for the initial `false`,
+     * which would otherwise re-enable a child disabled on its own.
+     *
+     * @param changed - The changed properties of the update.
+     * @param name - The property to check.
+     * @returns true when the children should take the group's value.
+     * @private
+     */
+    private isGroupChange;
     /**
      * Lifecycle hook called whenever reactive properties change.
      * @param _changedProperties - Map of changed properties
@@ -155,8 +171,8 @@ export declare class EunomiaRadioList extends EunomiaRadioList_base {
      */
     private handleKeydown;
     /**
-     * Applies the roving `tabindex` : the checked child (or the first one, if
-     * none is checked yet) is the group's single tab stop, matching a native
+     * Applies the roving `tabindex` : the checked child (or the first enabled
+     * one, if none is checked yet) is the group's single tab stop, matching a native
      * `radiogroup`'s "one tab stop, arrows move focus" behavior.
      * @private
      */
@@ -170,7 +186,7 @@ export declare class EunomiaRadioList extends EunomiaRadioList_base {
     private readonly handleChangeEvent;
     /**
      * Checks the given child, unchecking every other one, updates the roving
-     * `tabindex`/`aria-activedescendant`, and re-validates the group.
+     * `tabindex`, and re-validates the group.
      *
      * @param item the child to activate
      * @param focus whether to also move DOM focus onto it (arrow-key navigation)
@@ -190,8 +206,8 @@ export declare class EunomiaRadioList extends EunomiaRadioList_base {
     private sendChangeEvent;
     /**
      * Handler called when slot content changes.
-     * Propagates the group `name` and assigns a stable `id` (needed for
-     * `aria-activedescendant`) to every child radio.
+     * Propagates the group `name` and assigns a stable `id` to every child
+     * radio.
      *
      * @private
      */

package/dist/components/form/radio/radio-list.js

@@ -5,8 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, property, query } from "lit/decorators.js";
-import { html, LitElement } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { FormLabelMixin } from "../../../mixins/form-label.mixin.js";
 import { FormMixin, hasErrorDisplayChange, } from "../../../mixins/form.mixin.js";
 import { DisabledMixin } from "../../../mixins/disabled.mixin.js";
@@ -81,6 +82,7 @@ const Base = DisabledMixin(ValidatorsMixin(LitElement));
  * @prop {string} [defaultValue] - The value reselected when the list connects, and restored on form reset
  * @attr {string} [default-value] - The value reselected when the list connects, and restored on form reset
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @attr {boolean} [hide-error=false] - Whether the errors are hidden. The hint stays visible
  * @prop {Array<import('../../../types/form-validators.type.js').Validators<string | undefined>>} validators - A list of validation rules applied to the group's selected value
@@ -95,6 +97,11 @@ const Base = DisabledMixin(ValidatorsMixin(LitElement));
 let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMixin(FormMixin(Base))) {
     constructor() {
         super(...arguments);
+        /**
+         * Every change is a complete choice, so its error shows right away.
+         * @internal
+         */
+        this.errorOnChange = true;
         /**
          * Indicates whether the elements into the list should be displayed inline.
          * @default false
@@ -169,8 +176,7 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
      * Assigns `name`/`id` to every child, applies a `default-value` selection
      * once the slotted children actually exist (see `handleSlotChange` for
      * why this can't rely on `FormMixin`'s own `defaultValue` setter alone),
-     * restores `aria-activedescendant` for a child checked directly in
-     * markup, and sets up the initial roving `tabindex`.
+     * and sets up the initial roving `tabindex`.
      *
      * The roving `tabindex` is applied only once every child's own first
      * update has settled — each `eun-radio` is itself a `DisabledMixin` user,
@@ -192,9 +198,6 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
             this.sendChangeEvent();
         }
         void Promise.all(this.fields.map((field) => field.updateComplete)).then(() => {
-            if (this.active && this.optionsList) {
-                this.optionsList.setAttribute("aria-activedescendant", this.active.id);
-            }
             this.setFocus();
             this.checkValidity(this.value);
         });
@@ -218,19 +221,32 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
         this.removeEventListener("keydown", this.handleKeydown);
         super.disconnectedCallback?.();
     }
+    /**
+     * Whether the group's own `disabled`/`readonly` changed in a way to pass
+     * on to every child : always once set, but not for the initial `false`,
+     * which would otherwise re-enable a child disabled on its own.
+     *
+     * @param changed - The changed properties of the update.
+     * @param name - The property to check.
+     * @returns true when the children should take the group's value.
+     * @private
+     */
+    isGroupChange(changed, name) {
+        return changed.has(name) && (this[name] || changed.get(name) !== undefined);
+    }
     /**
      * Lifecycle hook called whenever reactive properties change.
      * @param _changedProperties - Map of changed properties
      */
     updated(_changedProperties) {
         super.updated(_changedProperties);
-        if (_changedProperties.has("disabled")) {
+        if (this.isGroupChange(_changedProperties, "disabled")) {
             this.fields.forEach((field) => {
                 field.disabled = this.disabled;
             });
             this.setFocus();
         }
-        if (_changedProperties.has("readonly")) {
+        if (this.isGroupChange(_changedProperties, "readonly")) {
             this.fields.forEach((field) => {
                 field.readonly = this.readonly;
             });
@@ -243,9 +259,6 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
                 field.validationRequested = showError;
             });
         }
-        if (_changedProperties.has("label") && !this.hasAttribute("aria-label")) {
-            this.setAttribute("aria-label", `${this.label}. ${this.instructions ?? ""}`);
-        }
         if (_changedProperties.has("name")) {
             this.fields.forEach((field) => {
                 field.name = this.name;
@@ -313,8 +326,8 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
         this.setActive(enabled[activeIndex], true);
     }
     /**
-     * Applies the roving `tabindex` : the checked child (or the first one, if
-     * none is checked yet) is the group's single tab stop, matching a native
+     * Applies the roving `tabindex` : the checked child (or the first enabled
+     * one, if none is checked yet) is the group's single tab stop, matching a native
      * `radiogroup`'s "one tab stop, arrows move focus" behavior.
      * @private
      */
@@ -328,14 +341,15 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
         if (this.readonly || this.disabled) {
             return;
         }
-        const toFocus = this.active ?? this.fields[0];
+        const toFocus = this.active ??
+            this.fields.find((field) => !field.disabled && !field.readonly);
         if (toFocus && !toFocus.disabled && !toFocus.readonly) {
             toFocus.setAttribute("tabindex", "0");
         }
     }
     /**
      * Checks the given child, unchecking every other one, updates the roving
-     * `tabindex`/`aria-activedescendant`, and re-validates the group.
+     * `tabindex`, and re-validates the group.
      *
      * @param item the child to activate
      * @param focus whether to also move DOM focus onto it (arrow-key navigation)
@@ -345,7 +359,6 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
         if (this.disabled || this.readonly || !item || !this.optionsList) {
             return;
         }
-        this.optionsList.setAttribute("aria-activedescendant", item.id);
         if (focus) {
             item.focus();
         }
@@ -378,8 +391,8 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
     }
     /**
      * Handler called when slot content changes.
-     * Propagates the group `name` and assigns a stable `id` (needed for
-     * `aria-activedescendant`) to every child radio.
+     * Propagates the group `name` and assigns a stable `id` to every child
+     * radio.
      *
      * @private
      */
@@ -394,17 +407,29 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
      * @returns The rendered template
      */
     render() {
+        const description = this.renderDescription();
+        const describedBy = [
+            this.instructions ? "group-instructions" : "",
+            description === nothing ? "" : "description",
+        ]
+            .filter(Boolean)
+            .join(" ") || undefined;
         return html `
-      <fieldset id="fieldset">
+      <fieldset id="fieldset" role="presentation">
         <div id="legend">${this.renderFormLabels("options")}</div>
+        ${this.instructions
+            ? html `<span id="group-instructions" hidden
+              >${this.instructions}</span
+            >`
+            : nothing}
         <div
           id="options"
           part="options"
           role="radiogroup"
           class=${classMap({ inline: this.inline })}
           ?disabled=${this.disabled}
-          aria-labelledby="legend"
-          aria-describedby="messages"
+          aria-label=${ifDefined(this.label)}
+          aria-describedby=${ifDefined(describedBy)}
           aria-disabled=${this.disabled ? "true" : "false"}
           aria-readonly=${this.readonly ? "true" : "false"}
           aria-required=${this.required ? "true" : "false"}
@@ -412,7 +437,7 @@ let EunomiaRadioList = class EunomiaRadioList extends FormLabelMixin(ReadonlyMix
         >
           <slot @slotchange=${this.handleSlotChange}></slot>
         </div>
-        ${this.renderDescription()}
+        ${description}
       </fieldset>
     `;
     }

package/dist/components/form/radio/radio.d.ts

@@ -34,6 +34,7 @@ declare const EunomiaRadioMixinBase: Constructor<EunomiaRadioBase>;
  * @prop {boolean} [disabled=false] - Whether the radio is disabled
  * @prop {boolean} [readonly=false] - Whether the radio is read only
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @attr {boolean} [hide-error=false] - Whether the error message is hidden. The hint stays visible
  * @prop {boolean} [required=false] - Whether a selection is required

package/dist/components/form/radio/radio.js

@@ -37,6 +37,7 @@ const EunomiaRadioMixinBase = RadioMixin(ReadonlyMixin(FormMixin(DisabledMixin(V
  * @prop {boolean} [disabled=false] - Whether the radio is disabled
  * @prop {boolean} [readonly=false] - Whether the radio is read only
  * @prop {boolean} [hideError=false] - Whether the errors are hidden. The hint stays visible
+ * @prop {boolean} [invalid=false] - Shows the field as invalid without any message, for an error displayed elsewhere
  * @prop {string} [error] - An error computed outside the field, by the form or by the server. While set, the field is invalid and shows this message right away
  * @attr {boolean} [hide-error=false] - Whether the error message is hidden. The hint stays visible
  * @prop {boolean} [required=false] - Whether a selection is required