@lion/ui 0.7.3 → 0.7.4

package/components/combobox/src/LionCombobox.js

@@ -456,10 +456,14 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
      */
     this.__listboxContentChanged = false;
 
+    /** @type {EventListener}
+     * @protected
+     */
+    this._onKeyUp = this._onKeyUp.bind(this);
     /** @type {EventListener}
      * @private
      */
-    this.__requestShowOverlay = this.__requestShowOverlay.bind(this);
+    this._textboxOnClick = this._textboxOnClick.bind(this);
     /** @type {EventListener}
      * @protected
      */
@@ -500,9 +504,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
         }
       }
     }
-    if (name === 'focused' && this.focused) {
-      this.__requestShowOverlay();
-    }
   }
 
   /**
@@ -614,11 +615,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    * that wraps the listbox with options
    *
    * @example
-   * _showOverlayCondition(options) {
-   *   return this.focused || super._showOverlayCondition(options);
-   * }
-   *
-   * @example
    * _showOverlayCondition({ lastKey }) {
    *   return lastKey === 'ArrowDown';
    * }
@@ -635,19 +631,20 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
   // TODO: batch all pending condition triggers in __pendingShowTriggers, reducing race conditions
   // eslint-disable-next-line class-methods-use-this
   _showOverlayCondition({ lastKey }) {
-    const hideOn = ['Tab', 'Escape', 'Enter'];
-    if (lastKey && hideOn.includes(lastKey)) {
+    const alwaysHideOn = ['Tab', 'Escape'];
+    const notMultipleChoiceHideOn = ['Enter'];
+    if (
+      lastKey &&
+      (alwaysHideOn.includes(lastKey) ||
+        (!this.multipleChoice && notMultipleChoiceHideOn.includes(lastKey)))
+    ) {
       return false;
     }
-
-    if (this.showAllOnEmpty && this.focused) {
+    if (this.filled || this.showAllOnEmpty) {
       return true;
     }
     // when no keyboard action involved (on focused change), return current opened state
-    if (!lastKey) {
-      return /** @type {boolean} */ (this.opened);
-    }
-    return true;
+    return /** @type {boolean} */ (this.opened);
   }
 
   /**
@@ -678,9 +675,14 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
     this.__listboxContentChanged = true;
   }
 
+  /**
+   * @param {Event} ev
+   * @protected
+   */
   // eslint-disable-next-line no-unused-vars
-  _textboxOnInput() {
+  _textboxOnInput(ev) {
     this.__shouldAutocompleteNextUpdate = true;
+    this.opened = true;
   }
 
   /**
@@ -1068,7 +1070,8 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    */
   _setupOpenCloseListeners() {
     super._setupOpenCloseListeners();
-    this._inputNode.addEventListener('keyup', this.__requestShowOverlay);
+    this._inputNode.addEventListener('keyup', this._onKeyUp);
+    this._inputNode.addEventListener('click', this._textboxOnClick);
   }
 
   /**
@@ -1077,7 +1080,8 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    */
   _teardownOpenCloseListeners() {
     super._teardownOpenCloseListeners();
-    this._inputNode.removeEventListener('keyup', this.__requestShowOverlay);
+    this._inputNode.removeEventListener('keyup', this._onKeyUp);
+    this._inputNode.removeEventListener('click', this._textboxOnClick);
   }
 
   /**
@@ -1225,9 +1229,9 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
 
   /**
    * @param {KeyboardEvent} [ev]
-   * @private
+   * @protected
    */
-  __requestShowOverlay(ev) {
+  _onKeyUp(ev) {
     const lastKey = ev && ev.key;
     this.opened = this._showOverlayCondition({
       lastKey,
@@ -1235,6 +1239,15 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
     });
   }
 
+  /**
+   * @param {FocusEvent} [ev]
+   * @protected
+   */
+  // eslint-disable-next-line no-unused-vars
+  _textboxOnClick(ev) {
+    this.opened = this._showOverlayCondition({});
+  }
+
   clear() {
     this.value = '';
     super.clear();

package/components/combobox/test/lion-combobox.test.js

@@ -93,11 +93,9 @@ describe('lion-combobox', () => {
         `)
       );
 
-      const { _comboboxNode, _listboxNode } = getComboboxMembers(el);
+      const { _listboxNode } = getComboboxMembers(el);
 
       async function open() {
-        // activate opened listbox
-        _comboboxNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
         mimicUserTyping(el, 'ch');
         return el.updateComplete;
       }
@@ -150,7 +148,7 @@ describe('lion-combobox', () => {
         await performChecks();
       });
 
-      it('shows overlay on focusin', async () => {
+      it('shows overlay on click', async () => {
         const el = /** @type {LionCombobox} */ (
           await fixture(html`
             <lion-combobox name="foo" .showAllOnEmpty="${true}">
@@ -161,15 +159,15 @@ describe('lion-combobox', () => {
             </lion-combobox>
           `)
         );
-        const { _comboboxNode } = getComboboxMembers(el);
+        const { _inputNode } = getComboboxMembers(el);
 
         expect(el.opened).to.be.false;
-        _comboboxNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
+        _inputNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
         await el.updateComplete;
         expect(el.opened).to.be.true;
       });
 
-      it('hides overlay on focusin after [Escape]', async () => {
+      it('hides overlay on [Escape] after being opened', async () => {
         const el = /** @type {LionCombobox} */ (
           await fixture(html`
             <lion-combobox name="foo" .showAllOnEmpty="${true}">
@@ -183,7 +181,7 @@ describe('lion-combobox', () => {
         const { _comboboxNode, _inputNode } = getComboboxMembers(el);
 
         expect(el.opened).to.be.false;
-        _comboboxNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
+        _comboboxNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
         await el.updateComplete;
         expect(el.opened).to.be.true;
         _inputNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape' }));
@@ -203,11 +201,9 @@ describe('lion-combobox', () => {
           `)
         );
 
-        const { _comboboxNode, _listboxNode, _inputNode } = getComboboxMembers(el);
+        const { _listboxNode, _inputNode } = getComboboxMembers(el);
 
         async function open() {
-          // activate opened listbox
-          _comboboxNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
           mimicUserTyping(el, 'ch');
           return el.updateComplete;
         }
@@ -870,10 +866,10 @@ describe('lion-combobox', () => {
   });
 
   describe('Overlay visibility', () => {
-    it('does not show overlay on focusin', async () => {
+    it('does not show overlay on click', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
-          <lion-combobox name="foo" multiple-choice>
+          <lion-combobox name="foo">
             <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
             <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
             <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
@@ -884,7 +880,26 @@ describe('lion-combobox', () => {
       const { _comboboxNode } = getComboboxMembers(el);
 
       expect(el.opened).to.equal(false);
-      _comboboxNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
+      _comboboxNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
+      await el.updateComplete;
+      expect(el.opened).to.equal(false);
+    });
+
+    it('shows overlay on click when filled', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo">
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+      const { _comboboxNode } = getComboboxMembers(el);
+      el.modelValue = 'Art';
+      expect(el.opened).to.equal(false);
+      _comboboxNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
       await el.updateComplete;
       expect(el.opened).to.equal(false);
     });
@@ -914,7 +929,7 @@ describe('lion-combobox', () => {
       expect(el.opened).to.equal(false);
 
       // step [1]
-      _inputNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
+      _inputNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
       await el.updateComplete;
       expect(el.opened).to.equal(false);
 
@@ -948,10 +963,7 @@ describe('lion-combobox', () => {
         `)
       );
 
-      const { _comboboxNode, _inputNode } = getComboboxMembers(el);
-
-      // open
-      _comboboxNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
+      const { _inputNode } = getComboboxMembers(el);
 
       mimicUserTyping(el, 'art');
       await el.updateComplete;
@@ -963,7 +975,7 @@ describe('lion-combobox', () => {
       expect(_inputNode.value).to.equal('');
     });
 
-    it('hides overlay on [Tab]', async () => {
+    it('hides overlay on [Enter]', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
           <lion-combobox name="foo">
@@ -975,10 +987,33 @@ describe('lion-combobox', () => {
         `)
       );
 
-      const { _comboboxNode, _inputNode } = getComboboxMembers(el);
+      const { _inputNode } = getComboboxMembers(el);
 
-      // open
-      _comboboxNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
+      mimicUserTyping(el, 'art');
+      await el.updateComplete;
+      expect(el.opened).to.equal(true);
+      expect(_inputNode.value).to.equal('Artichoke');
+
+      // N.B. we do only trigger keydown here (and not mimicKeypress (both keyup and down)),
+      // because this closely mimics what happens in the browser
+      _inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+      expect(el.opened).to.equal(false);
+      expect(_inputNode.value).to.equal('Artichoke');
+    });
+
+    it('hides overlay on [Tab]', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo">
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      const { _inputNode } = getComboboxMembers(el);
 
       mimicUserTyping(el, 'art');
       await el.updateComplete;
@@ -992,7 +1027,7 @@ describe('lion-combobox', () => {
       expect(_inputNode.value).to.equal('Artichoke');
     });
 
-    it('clears checkedIndex on empty text', async () => {
+    it('keeps overlay open on [Shift]', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
           <lion-combobox name="foo">
@@ -1004,10 +1039,33 @@ describe('lion-combobox', () => {
         `)
       );
 
-      const { _comboboxNode, _inputNode } = getComboboxMembers(el);
+      const { _inputNode } = getComboboxMembers(el);
+
+      mimicUserTyping(el, 'art');
+      await el.updateComplete;
+      expect(el.opened).to.equal(true);
+      expect(_inputNode.value).to.equal('Artichoke');
+
+      // N.B. we do only trigger keydown here (and not mimicKeypress (both keyup and down)),
+      // because this closely mimics what happens in the browser
+      _inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Shift' }));
+      expect(el.opened).to.equal(true);
+      expect(_inputNode.value).to.equal('Artichoke');
+    });
+
+    it('clears checkedIndex on empty text', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo">
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
 
-      // open
-      _comboboxNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
+      const { _inputNode } = getComboboxMembers(el);
 
       mimicUserTyping(el, 'art');
       await el.updateComplete;
@@ -1043,34 +1101,6 @@ describe('lion-combobox', () => {
 
     // NB: If this becomes a suite, move to separate file
     describe('Subclassers', () => {
-      it('allows to control overlay visibility via "_showOverlayCondition"', async () => {
-        class ShowOverlayConditionCombobox extends LionCombobox {
-          /** @param {{ currentValue: string, lastKey:string }} options */
-          _showOverlayCondition(options) {
-            return this.focused || super._showOverlayCondition(options);
-          }
-        }
-        const tagName = defineCE(ShowOverlayConditionCombobox);
-        const tag = unsafeStatic(tagName);
-
-        const el = /** @type {LionCombobox} */ (
-          await fixture(html`
-          <${tag} name="foo" multiple-choice>
-            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
-            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
-            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
-            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
-          </${tag}>
-        `)
-        );
-        const { _comboboxNode } = getComboboxMembers(el);
-
-        expect(el.opened).to.equal(false);
-        _comboboxNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
-        await el.updateComplete;
-        expect(el.opened).to.equal(true);
-      });
-
       it('allows to control overlay visibility via "_showOverlayCondition": should not display overlay if currentValue length condition is not fulfilled', async () => {
         class ShowOverlayConditionCombobox extends LionCombobox {
           /** @param {{ currentValue: string, lastKey:string }} options */
@@ -1164,11 +1194,8 @@ describe('lion-combobox', () => {
           `)
         );
         const options = el.formElements;
-        const { _comboboxNode } = getComboboxMembers(el);
         expect(el.opened).to.equal(false);
 
-        _comboboxNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
-
         mimicUserTyping(el, 'art');
         await el.updateComplete;
         expect(el.opened).to.equal(true);
@@ -1208,11 +1235,8 @@ describe('lion-combobox', () => {
           `)
         );
         const options = el.formElements;
-        const { _comboboxNode } = getComboboxMembers(el);
         expect(el.opened).to.equal(false);
 
-        _comboboxNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
-
         mimicUserTyping(el, 'art');
         expect(el.opened).to.equal(true);
         await el.updateComplete;
@@ -2948,7 +2972,7 @@ describe('lion-combobox', () => {
 
   describe('Multiple Choice', () => {
     // TODO: possibly later share test with select-rich if it officially supports multipleChoice
-    it('does not close listbox on click/enter', async () => {
+    it('does not close listbox on click', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
           <lion-combobox name="foo" multiple-choice>
@@ -2960,10 +2984,7 @@ describe('lion-combobox', () => {
         `)
       );
 
-      const { _comboboxNode } = getComboboxMembers(el);
-
       // activate opened listbox
-      _comboboxNode.dispatchEvent(new Event('focusin', { bubbles: true, composed: true }));
       mimicUserTyping(el, 'ch');
       await el.updateComplete;
 
@@ -2971,7 +2992,29 @@ describe('lion-combobox', () => {
       const visibleOptions = el.formElements.filter(o => o.style.display !== 'none');
       visibleOptions[0].click();
       expect(el.opened).to.equal(true);
-      mimicKeyPress(visibleOptions[1], 'Enter');
+    });
+
+    it('does not close listbox on [Enter]', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" multiple-choice>
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      const { _inputNode } = getComboboxMembers(el);
+
+      mimicUserTyping(el, 'art');
+      await el.updateComplete;
+      expect(el.opened).to.equal(true);
+
+      // N.B. we do only trigger keydown here (and not mimicKeypress (both keyup and down)),
+      // because this closely mimics what happens in the browser
+      _inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
       expect(el.opened).to.equal(true);
     });
 

package/components/form-core/src/FormControlMixin.js

@@ -34,7 +34,6 @@ const FormControlMixinImplementation = superclass =>
     /** @type {any} */
     static get properties() {
       return {
-        name: { type: String, reflect: true },
         readOnly: { type: Boolean, attribute: 'readonly', reflect: true },
         label: String, // FIXME: { attribute: false } breaks a bunch of tests, but shouldn't...
         labelSrOnly: { type: Boolean, attribute: 'label-sr-only', reflect: true },
@@ -156,14 +155,6 @@ const FormControlMixinImplementation = superclass =>
     constructor() {
       super();
 
-      /**
-       * The name the element will be registered with to the .formElements collection
-       * of the parent. Also, it serves as the key of key/value pairs in
-       *  modelValue/serializedValue objects
-       * @type {string}
-       */
-      this.name = '';
-
       /**
        * A Boolean attribute which, if present, indicates that the user should not be able to edit
        * the value of the input. The difference between disabled and readonly is that read-only

package/components/form-core/src/localizeNamespaceLoader.js

@@ -0,0 +1,75 @@
+/* eslint-disable import/no-extraneous-dependencies */
+export const localizeNamespaceLoader = /** @param {string} locale */ locale => {
+  switch (locale) {
+    case 'bg-BG':
+      return import('@lion/ui/form-core-translations/bg-BG.js');
+    case 'bg':
+      return import('@lion/ui/form-core-translations/bg.js');
+    case 'cs-CZ':
+      return import('@lion/ui/form-core-translations/cs-CZ.js');
+    case 'cs':
+      return import('@lion/ui/form-core-translations/cs.js');
+    case 'de-DE':
+      return import('@lion/ui/form-core-translations/de-DE.js');
+    case 'de':
+      return import('@lion/ui/form-core-translations/de.js');
+    case 'en-AU':
+      return import('@lion/ui/form-core-translations/en-AU.js');
+    case 'en-GB':
+      return import('@lion/ui/form-core-translations/en-GB.js');
+    case 'en-US':
+      return import('@lion/ui/form-core-translations/en-US.js');
+    case 'en-PH':
+    case 'en':
+      return import('@lion/ui/form-core-translations/en.js');
+    case 'es-ES':
+      return import('@lion/ui/form-core-translations/es-ES.js');
+    case 'es':
+      return import('@lion/ui/form-core-translations/es.js');
+    case 'fr-FR':
+      return import('@lion/ui/form-core-translations/fr-FR.js');
+    case 'fr-BE':
+      return import('@lion/ui/form-core-translations/fr-BE.js');
+    case 'fr':
+      return import('@lion/ui/form-core-translations/fr.js');
+    case 'hu-HU':
+      return import('@lion/ui/form-core-translations/hu-HU.js');
+    case 'hu':
+      return import('@lion/ui/form-core-translations/hu.js');
+    case 'it-IT':
+      return import('@lion/ui/form-core-translations/it-IT.js');
+    case 'it':
+      return import('@lion/ui/form-core-translations/it.js');
+    case 'nl-BE':
+      return import('@lion/ui/form-core-translations/nl-BE.js');
+    case 'nl-NL':
+      return import('@lion/ui/form-core-translations/nl-NL.js');
+    case 'nl':
+      return import('@lion/ui/form-core-translations/nl.js');
+    case 'pl-PL':
+      return import('@lion/ui/form-core-translations/pl-PL.js');
+    case 'pl':
+      return import('@lion/ui/form-core-translations/pl.js');
+    case 'ro-RO':
+      return import('@lion/ui/form-core-translations/ro-RO.js');
+    case 'ro':
+      return import('@lion/ui/form-core-translations/ro.js');
+    case 'ru-RU':
+      return import('@lion/ui/form-core-translations/ru-RU.js');
+    case 'ru':
+      return import('@lion/ui/form-core-translations/ru.js');
+    case 'sk-SK':
+      return import('@lion/ui/form-core-translations/sk-SK.js');
+    case 'sk':
+      return import('@lion/ui/form-core-translations/sk.js');
+    case 'uk-UA':
+      return import('@lion/ui/form-core-translations/uk-UA.js');
+    case 'uk':
+      return import('@lion/ui/form-core-translations/uk.js');
+    case 'zh-CN':
+    case 'zh':
+      return import('@lion/ui/form-core-translations/zh.js');
+    default:
+      return import('@lion/ui/form-core-translations/en.js');
+  }
+};

package/components/form-core/src/registration/FormRegisteringMixin.js

@@ -22,6 +22,14 @@ const FormRegisteringMixinImplementation = superclass =>
   class extends superclass {
     constructor() {
       super();
+      /**
+       * The name the element will be registered with to the .formElements collection
+       * of the parent. Also, it serves as the key of key/value pairs in
+       *  modelValue/serializedValue objects
+       * @type {string}
+       */
+      this.name = '';
+
       /**
        * The registrar this FormControl registers to, Usually a descendant of FormGroup or
        * ChoiceGroup
@@ -37,8 +45,28 @@ const FormRegisteringMixinImplementation = superclass =>
       this.allowCrossRootRegistration = false;
     }
 
+    /**
+     * Name attribute for the control.
+     * @type {string}
+     */
+    get name() {
+      return this.__name || '';
+    }
+
+    /**
+     * Converts values provided for the `name` attribute to string type.
+     * Mimics the native `input` behavior.
+     * @param {string} newName
+     */
+    set name(newName) {
+      const oldName = this.name;
+      this.__name = newName.toString();
+      this.requestUpdate('name', oldName);
+    }
+
     static get properties() {
       return {
+        name: { type: String, reflect: true },
         allowCrossRootRegistration: { type: Boolean, attribute: 'allow-cross-root-registration' },
       };
     }

package/components/form-core/src/validate/LionValidationFeedback.js

@@ -1,4 +1,6 @@
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
+import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
+import { localizeNamespaceLoader } from '../localizeNamespaceLoader.js';
 
 /**
  * @typedef {import('./Validator.js').Validator} Validator
@@ -6,17 +8,46 @@ import { html, LitElement } from 'lit';
  * @typedef {import('../../types/validate/ValidateMixinTypes.js').FeedbackMessage} FeedbackMessage
  */
 
+/**
+ * @param {string} string
+ */
+const capitalize = string => `${string[0].toUpperCase()}${string.slice(1)}`;
+
 /**
  * @desc Takes care of accessible rendering of error messages
  * Should be used in conjunction with FormControl having ValidateMixin applied
  */
-export class LionValidationFeedback extends LitElement {
+export class LionValidationFeedback extends LocalizeMixin(LitElement) {
   static get properties() {
     return {
       feedbackData: { attribute: false },
     };
   }
 
+  static localizeNamespaces = [
+    { 'lion-form-core': localizeNamespaceLoader },
+    ...super.localizeNamespaces,
+  ];
+
+  static get styles() {
+    return [
+      css`
+        .validation-feedback__type {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          overflow: hidden;
+          clip-path: inset(100%);
+          clip: rect(1px, 1px, 1px, 1px);
+          white-space: nowrap;
+          border: 0;
+          margin: 0;
+          padding: 0;
+        }
+      `,
+    ];
+  }
+
   /**
    * @overridable
    * @param {Object} opts
@@ -58,6 +89,9 @@ export class LionValidationFeedback extends LitElement {
       ${this.feedbackData &&
       this.feedbackData.map(
         ({ message, type, validator }) => html`
+          <div class="validation-feedback__type">
+            ${this._localizeManager.msg(`lion-form-core:validation${capitalize(type)}`)}
+          </div>
           ${this._messageTemplate({ message, type, validator })}
         `,
       )}