fix(combobox): add translations

.changeset/cuddly-windows-fail.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[combobox] add translations

packages/ui/components/combobox/src/LionCombobox.js

@@ -1,5 +1,6 @@
 import { browserDetection } from '@lion/ui/core.js';
 import { LionListbox } from '@lion/ui/listbox.js';
+import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 import { OverlayMixin, withDropdownConfig } from '@lion/ui/overlays.js';
 import { css, html } from 'lit';
 import { makeMatchingTextBold, unmakeMatchingTextBold } from './utils/makeMatchingTextBold.js';
@@ -24,7 +25,7 @@ const matchA11ySpanReverseFns = new WeakMap();
  * LionCombobox: implements the wai-aria combobox design pattern and integrates it as a Lion
  * FormControl
  */
-export class LionCombobox extends OverlayMixin(LionListbox) {
+export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
   /** @type {any} */
   static get properties() {
     return {
@@ -75,6 +76,71 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
     ];
   }
 
+  static get localizeNamespaces() {
+    return [
+      {
+        'lion-combobox': /** @param {string} locale */ locale => {
+          switch (locale) {
+            case 'bg-BG':
+            case 'bg':
+              return import('@lion/ui/combobox-translations/bg.js');
+            case 'cs-CZ':
+            case 'cs':
+              return import('@lion/ui/combobox-translations/cs.js');
+            case 'de-AT':
+            case 'de-DE':
+            case 'de':
+              return import('@lion/ui/combobox-translations/de.js');
+            case 'en-AU':
+            case 'en-GB':
+            case 'en-PH':
+            case 'en-US':
+            case 'en':
+              return import('@lion/ui/combobox-translations/en.js');
+            case 'es-ES':
+            case 'es':
+              return import('@lion/ui/combobox-translations/es.js');
+            case 'fr-FR':
+            case 'fr-BE':
+            case 'fr':
+              return import('@lion/ui/combobox-translations/fr.js');
+            case 'hu-HU':
+            case 'hu':
+              return import('@lion/ui/combobox-translations/hu.js');
+            case 'it-IT':
+            case 'it':
+              return import('@lion/ui/combobox-translations/it.js');
+            case 'nl-BE':
+            case 'nl-NL':
+            case 'nl':
+              return import('@lion/ui/combobox-translations/nl.js');
+            case 'pl-PL':
+            case 'pl':
+              return import('@lion/ui/combobox-translations/pl.js');
+            case 'ro-RO':
+            case 'ro':
+              return import('@lion/ui/combobox-translations/ro.js');
+            case 'ru-RU':
+            case 'ru':
+              return import('@lion/ui/combobox-translations/ru.js');
+            case 'sk-SK':
+            case 'sk':
+              return import('@lion/ui/combobox-translations/sk.js');
+            case 'uk-UA':
+            case 'uk':
+              return import('@lion/ui/combobox-translations/uk.js');
+            case 'zh-CN':
+            case 'zh':
+              return import('@lion/ui/combobox-translations/zh.js');
+            default:
+              return import('@lion/ui/combobox-translations/en.js');
+          }
+        },
+      },
+      ...super.localizeNamespaces,
+    ];
+  }
+
   /**
    * @enhance FormControlMixin - add slot[name=selection-display]
    * @protected
@@ -94,9 +160,12 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
    */
   // eslint-disable-next-line class-methods-use-this
   _overlayListboxTemplate() {
-    // TODO: Localize the aria-label
     return html`
-      <div id="overlay-content-node-wrapper" role="dialog" aria-label="Combobox options popup">
+      <div
+        id="overlay-content-node-wrapper"
+        role="dialog"
+        aria-label="${this.msgLit(`lion-combobox:optionsPopup`)}"
+      >
         <slot name="listbox"></slot>
       </div>
       <slot id="options-outlet"></slot>

packages/ui/components/combobox/test/lion-combobox.test.js

@@ -899,8 +899,26 @@ describe('lion-combobox', () => {
 
         expect(el.checkedIndex).to.equal(-1);
         await el.feedbackComplete;
-        expect(el.hasFeedbackFor).to.include('error');
-        expect(el.showsFeedbackFor).to.include('error');
+        expect(el.hasFeedbackFor).to.include('error', 'hasFeedbackFor');
+        await el.feedbackComplete;
+        expect(el.showsFeedbackFor).to.include('error', 'showsFeedbackFor');
+      });
+
+      it('dropdown has a label', async () => {
+        const el = /** @type {LionCombobox} */ (
+          await fixture(html`
+            <lion-combobox name="foo" .validators=${[new Required()]}>
+              <lion-option checked .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 { _overlayCtrl } = getComboboxMembers(el);
+        expect(_overlayCtrl.contentWrapperNode.getAttribute('aria-label')).to.equal(
+          'Combobox options popup',
+        );
       });
     });
   });
@@ -1361,6 +1379,7 @@ describe('lion-combobox', () => {
         `)
       );
       const { _inputNode } = getComboboxMembers(el);
+      await el.updateComplete;
       expect(_inputNode.value).to.equal('');
 
       /**
@@ -1375,9 +1394,10 @@ describe('lion-combobox', () => {
         await el.updateComplete;
         el.autocomplete = autocomplete;
         el.setCheckedIndex(index);
+        await el.updateComplete;
         el.opened = false;
         await el.updateComplete;
-        expect(_inputNode.value).to.equal(valueOnClose);
+        expect(_inputNode.value).to.equal(valueOnClose, autocomplete);
       }
 
       await performChecks('none', 0, 'Artichoke');
@@ -2049,6 +2069,8 @@ describe('lion-combobox', () => {
           const { _inputNode } = getComboboxMembers(el);
 
           async function performChecks() {
+            await el.updateComplete;
+
             el.formElements[0].click();
             await el.updateComplete;
 

packages/ui/components/combobox/translations/bg.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Изскачащ прозорец за опции за комбинирано поле',
+};

packages/ui/components/combobox/translations/cs.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Vyskakovací okno možností ComboBox',
+};

packages/ui/components/combobox/translations/de.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Popup-Fenster für Kombibox-Optionen',
+};

packages/ui/components/combobox/translations/en.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Combobox options popup',
+};

packages/ui/components/combobox/translations/es.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Ventana emergente de opciones de cuadro combinado',
+};

packages/ui/components/combobox/translations/fr.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Fenêtre popup des options de la boîte combinée',
+};

packages/ui/components/combobox/translations/hu.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Kombinált lista opcióinak felugró ablaka',
+};

packages/ui/components/combobox/translations/it.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Finestra a comparsa opzioni ComboBox',
+};

packages/ui/components/combobox/translations/nl.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Pop-up van opties',
+};

packages/ui/components/combobox/translations/pl.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Wyskakujące okno opcji pola wyboru',
+};

packages/ui/components/combobox/translations/ro.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Fereastra pop-up cu opţiuni Combobox',
+};

packages/ui/components/combobox/translations/ru.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Всплывающее окно параметров поля со списком',
+};

packages/ui/components/combobox/translations/sk.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Vyskakovacie okno možností kombinovaného poľa',
+};

packages/ui/components/combobox/translations/uk.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: 'Спливаюче вікно параметрів поля зі списком',
+};

packages/ui/components/combobox/translations/zh.js

@@ -0,0 +1,3 @@
+export default {
+  optionsPopup: '组合框选项弹出框',
+};

packages/ui/package.json

@@ -17,6 +17,7 @@
       "default": "./exports/*"
     },
     "./calendar-translations/*": "./components/calendar/translations/*",
+    "./combobox-translations/*": "./components/combobox/translations/*",
     "./pagination-translations/*": "./components/pagination/translations/*",
     "./progress-indicator-translations/*": "./components/progress-indicator/translations/*",
     "./input-datepicker-translations/*": "./components/input-datepicker/translations/*",