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

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

@@ -7,6 +7,7 @@ import { FormLabelMixinInterface } from "../../../mixins/form-label.mixin.js";
 import { EditableMixinInterface } from "../../../mixins/editable.mixin.js";
 import { FieldAppearanceMixinInterface } from "../../../mixins/field-appearance.mixin.js";
 import { Constructor } from "../../../utils/constructor.type.js";
+import { LocalizableMixinInterface } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the textarea component.
  */
@@ -15,7 +16,7 @@ export declare const EunomiaTextareaTagName = "eun-textarea";
  * Type of the textarea base used to declare every necessary Mixin interface elements.
  * @internal
  */
-type EunomiaTextareaBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface;
+type EunomiaTextareaBase = LitElement & DisabledMixinInterface & ReadonlyMixinInterface & ValidatorsMixinInterface<string> & FormMixinInterface<string> & EditableMixinInterface & FormLabelMixinInterface & FieldAppearanceMixinInterface & LocalizableMixinInterface;
 declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
 /**
  * A multi-line text field, sharing its label, hint, and error chrome and
@@ -44,13 +45,15 @@ declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
  * @prop {boolean} [disabled=false] - Whether the field is disabled
  * @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
+ * @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<import('../../../types/form-validators.type.js').Validators<string>>} validators - The list of validation rules applied to the field value
  * @prop {number} rows - The fixed number of visible rows. When omitted, the field automatically grows and shrinks its height to fit its content
  * @prop {boolean} [readonlyAvailable=false] - Whether the field can switch between a static display and an editable one
  * @attr {boolean} [readonly-available=false] - Whether the field can switch between a static display and an editable one
  * @prop {boolean} [formatting=false] - Switches the field to a rich text surface with a formatting toolbar above it, and, combined with readonlyAvailable, renders the static display as formatted rich text instead of raw source
- * @prop {string} [formatToolbarLabel='Text formatting'] - The accessible label of the bold, italic, and underline toggle group
+ * @prop {string} [formatToolbarLabel='Text formatting'] - The accessible label of the formatting toolbar
  * @prop {string} [formatBoldLabel='Bold'] - The accessible label of the bold toggle
  * @prop {string} [formatItalicLabel='Italic'] - The accessible label of the italic toggle
  * @prop {string} [formatUnderlineLabel='Underline'] - The accessible label of the underline toggle
@@ -65,9 +68,9 @@ declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
  * @prop {string} [autocomplete='off'] - The native autocomplete attribute forwarded to the field
  * @prop {number} minlength - The native minimum length constraint forwarded to the field
  * @prop {number} maxlength - The field's maximum length. Forwarded natively when not formatting, and enforced manually otherwise. Either way, a live character counter is shown under the field
- * @prop {string} [emptyValueLabel='No value set'] - Text displayed in place of the value when readonly and empty
- * @prop {string} [confirmLabel='Save'] - The label of the confirm button in edit mode
- * @prop {string} [cancelLabel='Cancel'] - The label of the cancel button in edit mode
+ * @prop {string} [emptyValueLabel] - Text displayed in place of the value when readonly and empty. Defaults to the localized string for the current locale (English: "No value set")
+ * @prop {string} [confirmLabel] - The label of the confirm button in edit mode. Defaults to the localized string for the current locale (English: "Save")
+ * @prop {string} [cancelLabel] - The label of the cancel button in edit mode. Defaults to the localized string for the current locale (English: "Cancel")
  * @fires {ChangeEvent} eunchange - Fired on every value change, including one applied through the formatting toolbar
  * @fires {CommitEvent} euncommit - Fired when an edit is confirmed in readonlyAvailable mode
  * @cssprop [--field-background] - Sets the background color of the field
@@ -76,6 +79,8 @@ declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
  * @cssprop [--field-border-color-focus] - Sets the border color on focus
  * @cssprop [--field-border-radius] - Sets the corner radius of the field
  * @cssprop [--field-padding] - Sets the padding of the field
+ * @cssprop [--field-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --field-padding is set
+ * @cssprop [--field-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --field-padding is set
  * @cssprop [--field-text-color] - Sets the text color of the field
  * @cssprop [--field-placeholder-color] - Sets the color of the placeholder
  * @cssprop [--field-error-color] - Sets the color of the error message
@@ -84,6 +89,9 @@ declare const EunomiaTextareaMixinBase: Constructor<EunomiaTextareaBase>;
  * @cssprop [--field-edit-confirm-color] - Sets the color of the confirm button in readonly-available edit mode
  * @cssprop [--field-edit-cancel-color] - Sets the color of the cancel button in readonly-available edit mode
  * @cssprop [--field-shadow] - Sets a box shadow on the field, none by default
+ * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-label-font-size] - Sets the font size of the label
+ * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-textarea
  */
 export declare class EunomiaTextarea extends EunomiaTextareaMixinBase {
@@ -124,7 +132,7 @@ export declare class EunomiaTextarea extends EunomiaTextareaMixinBase {
      */
     formatting: boolean;
     /**
-     * Accessible label of the Bold/Italic/Underline toggle group.
+     * Accessible label of the formatting toolbar.
      * @default Text formatting
      */
     formatToolbarLabel: string;
@@ -207,19 +215,19 @@ export declare class EunomiaTextarea extends EunomiaTextareaMixinBase {
     maxlength?: number;
     /**
      * Text displayed in place of the value when readonly and empty.
-     * @default No value set
+     * Falls back to the localized string for the current locale when unset.
      */
-    emptyValueLabel: string;
+    emptyValueLabel?: string;
     /**
      * Label of the confirm button in edit mode.
-     * @default Save
+     * Falls back to the localized string for the current locale when unset.
      */
-    confirmLabel: string;
+    confirmLabel?: string;
     /**
      * Label of the cancel button in edit mode.
-     * @default Cancel
+     * Falls back to the localized string for the current locale when unset.
      */
-    cancelLabel: string;
+    cancelLabel?: string;
     /**
      * Which color picker (text-color or highlight) is currently open, if any.
      * @private
@@ -290,19 +298,18 @@ export declare class EunomiaTextarea extends EunomiaTextareaMixinBase {
      * @readonly
      */
     private readonly toolbarEl?;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     /**
-     * Redirects focus to the native field whenever the host itself receives
-     * it. The host stays in the tab order (`DisabledMixin`) rather than
-     * being excluded via `tabindex="-1"` — for this form-associated
-     * component, that turned out to break Tab from reaching the field
-     * entirely, instead of just skipping the host. Redirecting keeps a
-     * single, real tab stop from the user's perspective without touching
-     * that tab order.
-     * @private
+     * Index, among {@link toolbarControls}, of the control holding the
+     * toolbar's single Tab stop.
+     * @internal
      */
-    private handleHostFocus;
+    private toolbarFocusIndex;
+    /**
+     * Pending {@link applyToolbarRoving} call.
+     * @internal
+     */
+    private toolbarRovingTimer?;
+    disconnectedCallback(): void;
     /**
      * Lifecycle hook called after the first render : populates the
      * contenteditable surface (when `formatting`) and fits the field height
@@ -337,6 +344,12 @@ export declare class EunomiaTextarea extends EunomiaTextareaMixinBase {
      * @private
      */
     private checkEditableValidators;
+    /**
+     * 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.
      *
@@ -503,6 +516,23 @@ export declare class EunomiaTextarea extends EunomiaTextareaMixinBase {
      * @private
      */
     private toggleColorPicker;
+    /**
+     * The swatches of the open color picker, in display order.
+     *
+     * @returns the swatch buttons, empty while no picker is open.
+     * @private
+     */
+    private colorSwatches;
+    /**
+     * Keyboard support of the open color picker, following the menu pattern
+     * : arrows move between swatches (wrapping), Home/End jump to the first
+     * and last, Escape closes it, and Tab closes it before leaving it. Both
+     * return the focus to the picker's trigger.
+     *
+     * @param event the keyboard event.
+     * @private
+     */
+    private handleColorPickerKeydown;
     /**
      * Closes whichever color picker is open, if any.
      * @private
@@ -526,6 +556,48 @@ export declare class EunomiaTextarea extends EunomiaTextareaMixinBase {
      * @private
      */
     private selectColor;
+    /**
+     * The toolbar's controls, in visual order : every format and alignment
+     * toggle, then both color picker triggers.
+     *
+     * @returns the controls, empty while the toolbar isn't rendered.
+     * @private
+     */
+    private toolbarControls;
+    /**
+     * Applies the toolbar's roving `tabindex` once the toggle groups have
+     * applied their own (which they do after their items' updates), so the
+     * whole toolbar stays a single Tab stop.
+     * @private
+     */
+    private scheduleToolbarRoving;
+    /**
+     * Makes the control at {@link toolbarFocusIndex} the toolbar's only Tab
+     * stop. Left alone while the toolbar is disabled, every control then
+     * being out of the Tab order already.
+     * @private
+     */
+    private applyToolbarRoving;
+    /**
+     * Remembers the toolbar control receiving the focus, so Tab comes back
+     * to it.
+     *
+     * @param event the focus event.
+     * @private
+     */
+    private handleToolbarFocusIn;
+    /**
+     * Keyboard support of the toolbar, following the toolbar pattern :
+     * Left/Right move between its controls (wrapping), Home/End jump to the
+     * first and last, and Enter/Space pick an alignment. Listened to in the
+     * capture phase, ahead of the alignment group's own arrow handling.
+     * Up/Down are left to the alignment group, which selects the next
+     * alignment.
+     *
+     * @param event the keyboard event.
+     * @private
+     */
+    private readonly handleToolbarKeydown;
     /**
      * Renders the formatting toolbar, shown above the field itself (never
      * above the readonly display) when `formatting` is set.

package/dist/components/form/textarea/textarea.js

@@ -21,6 +21,7 @@ import { findRichTextColor, formatRichText, getPlainTextLength, populateEditable
 import { formLabelsStyles } from "../shared-styles/form-labels.styles.js";
 import { textareaStyles } from "./textarea.styles.js";
 import { pickValidity } from "../../../utils/validity.utils.js";
+import { LocalizableMixin, } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the textarea component.
  */
@@ -467,7 +468,7 @@ function getActiveColorName(root, kind) {
  * @internal
  */
 const Base = DisabledMixin(ValidatorsMixin(LitElement));
-const EunomiaTextareaMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base)))));
+const EunomiaTextareaMixinBase = LocalizableMixin(FieldAppearanceMixin(FormLabelMixin(ReadonlyMixin(EditableMixin(FormMixin(Base))))));
 /**
  * A multi-line text field, sharing its label, hint, and error chrome and
  * theming with the input component. It grows and shrinks to fit its
@@ -495,13 +496,15 @@ const EunomiaTextareaMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMix
  * @prop {boolean} [disabled=false] - Whether the field is disabled
  * @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
+ * @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<import('../../../types/form-validators.type.js').Validators<string>>} validators - The list of validation rules applied to the field value
  * @prop {number} rows - The fixed number of visible rows. When omitted, the field automatically grows and shrinks its height to fit its content
  * @prop {boolean} [readonlyAvailable=false] - Whether the field can switch between a static display and an editable one
  * @attr {boolean} [readonly-available=false] - Whether the field can switch between a static display and an editable one
  * @prop {boolean} [formatting=false] - Switches the field to a rich text surface with a formatting toolbar above it, and, combined with readonlyAvailable, renders the static display as formatted rich text instead of raw source
- * @prop {string} [formatToolbarLabel='Text formatting'] - The accessible label of the bold, italic, and underline toggle group
+ * @prop {string} [formatToolbarLabel='Text formatting'] - The accessible label of the formatting toolbar
  * @prop {string} [formatBoldLabel='Bold'] - The accessible label of the bold toggle
  * @prop {string} [formatItalicLabel='Italic'] - The accessible label of the italic toggle
  * @prop {string} [formatUnderlineLabel='Underline'] - The accessible label of the underline toggle
@@ -516,9 +519,9 @@ const EunomiaTextareaMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMix
  * @prop {string} [autocomplete='off'] - The native autocomplete attribute forwarded to the field
  * @prop {number} minlength - The native minimum length constraint forwarded to the field
  * @prop {number} maxlength - The field's maximum length. Forwarded natively when not formatting, and enforced manually otherwise. Either way, a live character counter is shown under the field
- * @prop {string} [emptyValueLabel='No value set'] - Text displayed in place of the value when readonly and empty
- * @prop {string} [confirmLabel='Save'] - The label of the confirm button in edit mode
- * @prop {string} [cancelLabel='Cancel'] - The label of the cancel button in edit mode
+ * @prop {string} [emptyValueLabel] - Text displayed in place of the value when readonly and empty. Defaults to the localized string for the current locale (English: "No value set")
+ * @prop {string} [confirmLabel] - The label of the confirm button in edit mode. Defaults to the localized string for the current locale (English: "Save")
+ * @prop {string} [cancelLabel] - The label of the cancel button in edit mode. Defaults to the localized string for the current locale (English: "Cancel")
  * @fires {ChangeEvent} eunchange - Fired on every value change, including one applied through the formatting toolbar
  * @fires {CommitEvent} euncommit - Fired when an edit is confirmed in readonlyAvailable mode
  * @cssprop [--field-background] - Sets the background color of the field
@@ -527,6 +530,8 @@ const EunomiaTextareaMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMix
  * @cssprop [--field-border-color-focus] - Sets the border color on focus
  * @cssprop [--field-border-radius] - Sets the corner radius of the field
  * @cssprop [--field-padding] - Sets the padding of the field
+ * @cssprop [--field-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --field-padding is set
+ * @cssprop [--field-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --field-padding is set
  * @cssprop [--field-text-color] - Sets the text color of the field
  * @cssprop [--field-placeholder-color] - Sets the color of the placeholder
  * @cssprop [--field-error-color] - Sets the color of the error message
@@ -535,6 +540,9 @@ const EunomiaTextareaMixinBase = FieldAppearanceMixin(FormLabelMixin(ReadonlyMix
  * @cssprop [--field-edit-confirm-color] - Sets the color of the confirm button in readonly-available edit mode
  * @cssprop [--field-edit-cancel-color] - Sets the color of the cancel button in readonly-available edit mode
  * @cssprop [--field-shadow] - Sets a box shadow on the field, none by default
+ * @cssprop [--field-font-size] - Sets the font size of the field's value and placeholder
+ * @cssprop [--field-label-font-size] - Sets the font size of the label
+ * @cssprop [--field-message-font-size] - Sets the font size of the hint, error messages and instructions
  * @element eun-textarea
  */
 let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
@@ -549,7 +557,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
          */
         this.formatting = false;
         /**
-         * Accessible label of the Bold/Italic/Underline toggle group.
+         * Accessible label of the formatting toolbar.
          * @default Text formatting
          */
         this.formatToolbarLabel = "Text formatting";
@@ -619,21 +627,6 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
          * @default off
          */
         this.autocomplete = "off";
-        /**
-         * Text displayed in place of the value when readonly and empty.
-         * @default No value set
-         */
-        this.emptyValueLabel = "No value set";
-        /**
-         * Label of the confirm button in edit mode.
-         * @default Save
-         */
-        this.confirmLabel = "Save";
-        /**
-         * Label of the cancel button in edit mode.
-         * @default Cancel
-         */
-        this.cancelLabel = "Cancel";
         /**
          * Which color picker (text-color or highlight) is currently open, if any.
          * @private
@@ -686,18 +679,11 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
          */
         this.pendingCaretNode = null;
         /**
-         * Redirects focus to the native field whenever the host itself receives
-         * it. The host stays in the tab order (`DisabledMixin`) rather than
-         * being excluded via `tabindex="-1"` — for this form-associated
-         * component, that turned out to break Tab from reaching the field
-         * entirely, instead of just skipping the host. Redirecting keeps a
-         * single, real tab stop from the user's perspective without touching
-         * that tab order.
-         * @private
+         * Index, among {@link toolbarControls}, of the control holding the
+         * toolbar's single Tab stop.
+         * @internal
          */
-        this.handleHostFocus = () => {
-            this.fieldEl?.focus();
-        };
+        this.toolbarFocusIndex = 0;
         /**
          * Reads native HTML constraint validation from the underlying field
          * element (`required`, `minlength`, `maxlength`) when not `formatting` ;
@@ -908,6 +894,55 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
                 this.closeColorPicker();
             }
         };
+        /**
+         * Keyboard support of the toolbar, following the toolbar pattern :
+         * Left/Right move between its controls (wrapping), Home/End jump to the
+         * first and last, and Enter/Space pick an alignment. Listened to in the
+         * capture phase, ahead of the alignment group's own arrow handling.
+         * Up/Down are left to the alignment group, which selects the next
+         * alignment.
+         *
+         * @param event the keyboard event.
+         * @private
+         */
+        this.handleToolbarKeydown = {
+            handleEvent: (event) => {
+                const controls = this.toolbarControls().filter((control) => !control.hasAttribute("disabled"));
+                const current = controls.indexOf(event.target);
+                if (current === -1) {
+                    return;
+                }
+                const control = controls[current];
+                if ((event.key === "Enter" || event.key === " ") &&
+                    control.closest("#align-toolbar")) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    control.click();
+                    return;
+                }
+                let next;
+                switch (event.key) {
+                    case "ArrowRight":
+                        next = (current + 1) % controls.length;
+                        break;
+                    case "ArrowLeft":
+                        next = (current - 1 + controls.length) % controls.length;
+                        break;
+                    case "Home":
+                        next = 0;
+                        break;
+                    case "End":
+                        next = controls.length - 1;
+                        break;
+                    default:
+                        return;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                controls[next].focus();
+            },
+            capture: true,
+        };
     }
     /**
      * The default value applied on connection and form reset. Overrides the
@@ -926,15 +961,11 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         // @ts-expect-error — see comment above ; FormMixin's real setter exists.
         super.defaultValue = value;
     }
-    connectedCallback() {
-        super.connectedCallback?.();
-        this.addEventListener("focus", this.handleHostFocus);
-    }
     disconnectedCallback() {
-        this.removeEventListener("focus", this.handleHostFocus);
         document.removeEventListener("click", this.handleOutsideClick, {
             capture: true,
         });
+        clearTimeout(this.toolbarRovingTimer);
         super.disconnectedCallback?.();
     }
     /**
@@ -974,6 +1005,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
             }
             return;
         }
+        this.scheduleToolbarRoving();
         const shouldSync = ((changedProperties.has("editing") && this.editing) ||
             (changedProperties.has("formatting") && this.formatting) ||
             (changedProperties.has("value") &&
@@ -996,17 +1028,25 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         if (this.minlength !== undefined && length > 0 && length < this.minlength) {
             return {
                 validity: { tooShort: true },
-                message: `Please lengthen this text to ${this.minlength} characters or more (you are currently using ${length} characters).`,
+                message: this.validationDictionary.validation.tooShort(this.minlength, length),
             };
         }
         if (this.maxlength !== undefined && length > this.maxlength) {
             return {
                 validity: { tooLong: true },
-                message: `Please shorten this text to ${this.maxlength} characters or less (you are currently using ${length} characters).`,
+                message: this.validationDictionary.validation.tooLong(this.maxlength, length),
             };
         }
         return { validity: {} };
     }
+    /**
+     * 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.
      *
@@ -1204,7 +1244,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
                 return;
             }
             this.handleEditableInput();
-            this.updateComplete.then(() => {
+            void this.updateComplete.then(() => {
                 root.focus();
                 this.syncToolbarToSelection();
             });
@@ -1260,7 +1300,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         const [align] = event.target.value;
         root.style.textAlign = align === "start" ? "" : align;
         this.handleEditableInput();
-        this.updateComplete.then(() => root.focus());
+        void this.updateComplete.then(() => root.focus());
     }
     /**
      * Opens or closes a color picker popover, wiring up (or tearing down) the
@@ -1278,6 +1318,63 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         document.addEventListener("click", this.handleOutsideClick, {
             capture: true,
         });
+        void this.updateComplete.then(() => {
+            const swatches = this.colorSwatches();
+            (swatches.find((swatch) => swatch.ariaChecked === "true") ?? swatches[0])?.focus();
+        });
+    }
+    /**
+     * The swatches of the open color picker, in display order.
+     *
+     * @returns the swatch buttons, empty while no picker is open.
+     * @private
+     */
+    colorSwatches() {
+        return Array.from(this.shadowRoot?.querySelectorAll(".color-picker-panel .color-swatch") ?? []);
+    }
+    /**
+     * Keyboard support of the open color picker, following the menu pattern
+     * : arrows move between swatches (wrapping), Home/End jump to the first
+     * and last, Escape closes it, and Tab closes it before leaving it. Both
+     * return the focus to the picker's trigger.
+     *
+     * @param event the keyboard event.
+     * @private
+     */
+    handleColorPickerKeydown(event) {
+        const panel = event.currentTarget;
+        const trigger = panel.previousElementSibling;
+        if (event.key === "Escape" || event.key === "Tab") {
+            if (event.key === "Escape") {
+                event.preventDefault();
+            }
+            this.closeColorPicker();
+            trigger?.focus();
+            return;
+        }
+        const swatches = this.colorSwatches();
+        const current = swatches.indexOf(this.shadowRoot?.activeElement);
+        let next;
+        switch (event.key) {
+            case "ArrowRight":
+            case "ArrowDown":
+                next = (current + 1) % swatches.length;
+                break;
+            case "ArrowLeft":
+            case "ArrowUp":
+                next = (current - 1 + swatches.length) % swatches.length;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = swatches.length - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        swatches[next]?.focus();
     }
     /**
      * Closes whichever color picker is open, if any.
@@ -1321,7 +1418,57 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
             }
         }
         this.closeColorPicker();
-        this.updateComplete.then(() => this.fieldEl?.focus());
+        void this.updateComplete.then(() => this.fieldEl?.focus());
+    }
+    /**
+     * The toolbar's controls, in visual order : every format and alignment
+     * toggle, then both color picker triggers.
+     *
+     * @returns the controls, empty while the toolbar isn't rendered.
+     * @private
+     */
+    toolbarControls() {
+        return Array.from(this.shadowRoot?.querySelectorAll("#toolbar-groups eun-toggle-item, #toolbar-groups .color-picker-trigger") ?? []);
+    }
+    /**
+     * Applies the toolbar's roving `tabindex` once the toggle groups have
+     * applied their own (which they do after their items' updates), so the
+     * whole toolbar stays a single Tab stop.
+     * @private
+     */
+    scheduleToolbarRoving() {
+        clearTimeout(this.toolbarRovingTimer);
+        this.toolbarRovingTimer = setTimeout(() => this.applyToolbarRoving());
+    }
+    /**
+     * Makes the control at {@link toolbarFocusIndex} the toolbar's only Tab
+     * stop. Left alone while the toolbar is disabled, every control then
+     * being out of the Tab order already.
+     * @private
+     */
+    applyToolbarRoving() {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        const controls = this.toolbarControls();
+        const active = Math.min(this.toolbarFocusIndex, controls.length - 1);
+        controls.forEach((control, index) => {
+            control.setAttribute("tabindex", index === active ? "0" : "-1");
+        });
+    }
+    /**
+     * Remembers the toolbar control receiving the focus, so Tab comes back
+     * to it.
+     *
+     * @param event the focus event.
+     * @private
+     */
+    handleToolbarFocusIn(event) {
+        const index = this.toolbarControls().indexOf(event.target);
+        if (index !== -1 && index !== this.toolbarFocusIndex) {
+            this.toolbarFocusIndex = index;
+            this.applyToolbarRoving();
+        }
     }
     /**
      * Renders the formatting toolbar, shown above the field itself (never
@@ -1336,11 +1483,14 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         return html `
       <div
         id="toolbar-groups"
+        role="toolbar"
+        aria-label=${this.formatToolbarLabel}
         @mousedown=${(event) => event.preventDefault()}
+        @focusin=${this.handleToolbarFocusIn}
+        @keydown=${this.handleToolbarKeydown}
       >
         <eun-toggle-group
           id="toolbar"
-          aria-label=${this.formatToolbarLabel}
           ?disabled=${toolbarDisabled}
           @eunchange=${this.handleToolbarChange}
         >
@@ -1416,7 +1566,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         <button
           type="button"
           class="color-picker-trigger"
-          aria-haspopup="true"
+          aria-haspopup="menu"
           aria-expanded=${isOpen ? "true" : "false"}
           aria-label=${label}
           ?disabled=${toolbarDisabled}
@@ -1433,12 +1583,13 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
                 class="color-picker-panel"
                 role="menu"
                 aria-label=${label}
-                @keydown=${(event) => event.key === "Escape" && this.closeColorPicker()}
+                @keydown=${this.handleColorPickerKeydown}
               >
                 <button
                   type="button"
                   class="color-swatch clear"
                   role="menuitemradio"
+                  tabindex="-1"
                   aria-checked=${activeName === null ? "true" : "false"}
                   aria-label=${this.formatColorClearLabel}
                   @click=${() => this.selectColor(kind, null)}
@@ -1448,6 +1599,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
                       type="button"
                       class="color-swatch"
                       role="menuitemradio"
+                      tabindex="-1"
                       aria-checked=${activeName === color.name
                 ? "true"
                 : "false"}
@@ -1514,7 +1666,10 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
             ? formatRichText(this.value)
             : html `<span
               class=${classMap({ "plain-value": true, empty: !hasValue })}
-              >${hasValue ? this.value : this.emptyValueLabel}</span
+              >${hasValue
+                ? this.value
+                : (this.emptyValueLabel ??
+                    this.dictionary.common.noValue)}</span
             >`}
       </div>
     `;
@@ -1539,7 +1694,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         ?required=${this.required}
         minlength=${ifDefined(this.minlength)}
         maxlength=${ifDefined(this.maxlength)}
-        aria-invalid=${!this.hideError && !this.disabled && !this.valid}
+        aria-invalid=${this.showError}
         aria-label=${ifDefined(this.label)}
         aria-describedby=${describedBy || nothing}
         @input=${this.handleInput}
@@ -1570,7 +1725,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
         role="textbox"
         aria-multiline="true"
         aria-required=${this.required ? "true" : nothing}
-        aria-invalid=${!this.hideError && !this.disabled && !this.valid}
+        aria-invalid=${this.showError}
         aria-label=${ifDefined(this.label)}
         aria-describedby=${describedBy || nothing}
         @beforeinput=${this.handleEditableBeforeInput}
@@ -1620,7 +1775,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
               rounded
               type="button"
               @click=${this.confirmEdit}
-              >${this.confirmLabel}</eun-button
+              >${this.confirmLabel ?? this.dictionary.common.save}</eun-button
             >
             <eun-button
               class="cancel"
@@ -1630,7 +1785,7 @@ let EunomiaTextarea = class EunomiaTextarea extends EunomiaTextareaMixinBase {
               rounded
               type="button"
               @click=${this.cancelEdit}
-              >${this.cancelLabel}</eun-button
+              >${this.cancelLabel ?? this.dictionary.common.cancel}</eun-button
             >
           </div>
         `)}