From e332da71ed253ffa8b259722152688b8cd3f4a31 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Jun 2026 16:13:24 +0000
Subject: [PATCH 1/4] Initial plan


From 3953d330204f01cc31dd8a71f06ddcd92959991f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Jun 2026 16:29:55 +0000
Subject: [PATCH 2/4] feat: add i18n/a11y localisation properties to select
 components

---
 .../vscode-select/vscode-select-base.ts       | 24 +++++++++++-
 .../vscode-multi-select.ts                    | 37 ++++++++++++++++---
 .../vscode-single-select.ts                   |  2 +-
 3 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/src/includes/vscode-select/vscode-select-base.ts b/src/includes/vscode-select/vscode-select-base.ts
index 66ce7ead0..adf0b2e76 100644
--- a/src/includes/vscode-select/vscode-select-base.ts
+++ b/src/includes/vscode-select/vscode-select-base.ts
@@ -40,6 +40,26 @@ export class VscodeSelectBase extends VscElement {
   @property({reflect: true})
   label = '';
 
+  /**
+   * Aria label for the button that opens the dropdown in combobox mode.
+   * Override this to localise the button for screen readers.
+   */
+  @property({attribute: 'open-button-aria-label'})
+  openButtonAriaLabel = 'Open the list of options';
+
+  /**
+   * Text shown in the dropdown when no options match the current filter.
+   */
+  @property({attribute: 'no-options-text'})
+  noOptionsText = 'No options';
+
+  /**
+   * Prefix text for the "create new option" entry shown in combobox+creatable
+   * mode. The rendered text will be: `${createOptionPrefix} "${filterPattern}"`.
+   */
+  @property({attribute: 'create-option-prefix'})
+  createOptionPrefix = 'Add';
+
   /**
    * The element cannot be used and is not focusable.
    */
@@ -712,12 +732,12 @@ export class VscodeSelectBase extends VscElement {
         })}
         @mouseout=${this._onPlaceholderOptionMouseOut}
       >
-        Add "${this._opts.filterPattern}"
+        ${this.createOptionPrefix} "${this._opts.filterPattern}"
       </li>`;
     } else {
       return isListEmpty
         ? html`<li class="no-options" @click=${this._onNoOptionsClick}>
-            No options
+            ${this.noOptionsText}
           </li>`
         : nothing;
     }
diff --git a/src/vscode-multi-select/vscode-multi-select.ts b/src/vscode-multi-select/vscode-multi-select.ts
index 7e8c523c3..ccee1f959 100644
--- a/src/vscode-multi-select/vscode-multi-select.ts
+++ b/src/vscode-multi-select/vscode-multi-select.ts
@@ -68,6 +68,31 @@ export class VscodeMultiSelect
   @property({reflect: true})
   name: string | undefined = undefined;
 
+  /**
+   * Label suffix used in the selected-count badge (e.g. "3 Selected").
+   * Override to localise the badge text.
+   */
+  @property({attribute: 'selected-text'})
+  selectedText = 'Selected';
+
+  /**
+   * Tooltip for the "select all" button in the dropdown controls.
+   */
+  @property({attribute: 'select-all-title'})
+  selectAllTitle = 'Select all';
+
+  /**
+   * Tooltip for the "deselect all" button in the dropdown controls.
+   */
+  @property({attribute: 'deselect-all-title'})
+  deselectAllTitle = 'Deselect all';
+
+  /**
+   * Label for the accept/OK button in the dropdown controls.
+   */
+  @property({attribute: 'accept-button-text'})
+  acceptButtonText = 'OK';
+
   @property({type: Array, attribute: false})
   set selectedIndexes(val: number[]) {
     this._opts.selectedIndexes = val;
@@ -332,10 +357,10 @@ export class VscodeMultiSelect
   private _renderLabel() {
     switch (this._opts.selectedIndexes.length) {
       case 0:
-        return html`<span class="select-face-badge no-item">0 Selected</span>`;
+        return html`<span class="select-face-badge no-item">0 ${this.selectedText}</span>`;
       default:
         return html`<span class="select-face-badge"
-          >${this._opts.selectedIndexes.length} Selected</span
+          >${this._opts.selectedIndexes.length} ${this.selectedText}</span
         >`;
     }
   }
@@ -368,7 +393,7 @@ export class VscodeMultiSelect
           @keydown=${this._onComboboxInputSpaceKeyDown}
         />
         <button
-          aria-label="Open the list of options"
+          aria-label=${this.openButtonAriaLabel}
           class="combobox-button"
           type="button"
           @click=${this._onComboboxButtonClick}
@@ -413,7 +438,7 @@ export class VscodeMultiSelect
             <button
               type="button"
               @click=${this._onMultiSelectAllClick}
-              title="Select all"
+              title=${this.selectAllTitle}
               class="action-icon"
               id="select-all"
             >
@@ -422,7 +447,7 @@ export class VscodeMultiSelect
             <button
               type="button"
               @click=${this._onMultiDeselectAllClick}
-              title="Deselect all"
+              title=${this.deselectAllTitle}
               class="action-icon"
               id="select-none"
             >
@@ -431,7 +456,7 @@ export class VscodeMultiSelect
             <vscode-button
               class="button-accept"
               @click=${this._onMultiAcceptClick}
-              >OK</vscode-button
+              >${this.acceptButtonText}</vscode-button
             >
           </div>
         `
diff --git a/src/vscode-single-select/vscode-single-select.ts b/src/vscode-single-select/vscode-single-select.ts
index 9fecc8d98..c038da552 100644
--- a/src/vscode-single-select/vscode-single-select.ts
+++ b/src/vscode-single-select/vscode-single-select.ts
@@ -394,7 +394,7 @@ export class VscodeSingleSelect
           @keydown=${this._onComboboxInputSpaceKeyDown}
         />
         <button
-          aria-label="Open the list of options"
+          aria-label=${this.openButtonAriaLabel}
           class="combobox-button"
           type="button"
           @click=${this._onComboboxButtonClick}

From e5f0f52eea38fae15456ef3e72cb135c9e99c9ee Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 11 Jun 2026 14:14:06 +0000
Subject: [PATCH 3/4] Add i18n override tests for select components

---
 .../vscode-multi-select.test.ts               | 113 ++++++++++++++++++
 .../vscode-single-select.test.ts              |  43 +++++++
 2 files changed, 156 insertions(+)

diff --git a/src/vscode-multi-select/vscode-multi-select.test.ts b/src/vscode-multi-select/vscode-multi-select.test.ts
index fa96eb3bc..96e9a0bbf 100644
--- a/src/vscode-multi-select/vscode-multi-select.test.ts
+++ b/src/vscode-multi-select/vscode-multi-select.test.ts
@@ -350,6 +350,119 @@ describe('vscode-multi-select', () => {
     expect(el.value).to.eql(['asdf']);
   });
 
+  describe('i18n override props', () => {
+    it('selected-text overrides the badge label', async () => {
+      const el = await fixture<VscodeMultiSelect>(html`
+        <vscode-multi-select selected-text="Ausgewählt">
+          <vscode-option selected>One</vscode-option>
+          <vscode-option>Two</vscode-option>
+        </vscode-multi-select>
+      `);
+      expect(el.shadowRoot?.querySelector('.select-face-badge')).lightDom.to.eq(
+        '1 Ausgewählt'
+      );
+    });
+
+    it('selected-text overrides the badge label when nothing is selected', async () => {
+      const el = await fixture<VscodeMultiSelect>(html`
+        <vscode-multi-select selected-text="Ausgewählt">
+          <vscode-option>One</vscode-option>
+          <vscode-option>Two</vscode-option>
+        </vscode-multi-select>
+      `);
+      expect(el.shadowRoot?.querySelector('.select-face-badge')).lightDom.to.eq(
+        '0 Ausgewählt'
+      );
+    });
+
+    it('open-button-aria-label overrides the combobox button aria-label', async () => {
+      const el = await fixture<VscodeMultiSelect>(html`
+        <vscode-multi-select combobox open-button-aria-label="Öffnen">
+          <vscode-option>One</vscode-option>
+        </vscode-multi-select>
+      `);
+      const btn =
+        el.shadowRoot?.querySelector<HTMLButtonElement>('.combobox-button');
+      expect(btn?.getAttribute('aria-label')).to.eq('Öffnen');
+    });
+
+    it('no-options-text is shown when the filter matches nothing', async () => {
+      const el = await fixture<VscodeMultiSelect>(html`
+        <vscode-multi-select combobox no-options-text="Keine Optionen">
+          <vscode-option>Lorem</vscode-option>
+        </vscode-multi-select>
+      `);
+      el.focus();
+      await el.updateComplete;
+      await sendKeys({type: 'zzz'});
+      await el.updateComplete;
+      const noOpts = el.shadowRoot?.querySelector('.no-options');
+      expect(noOpts?.textContent?.trim()).to.eq('Keine Optionen');
+    });
+
+    it('create-option-prefix overrides the creatable suggestion text', async () => {
+      const el = await fixture<VscodeMultiSelect>(html`
+        <vscode-multi-select
+          combobox
+          creatable
+          create-option-prefix="Hinzufügen"
+        >
+          <vscode-option>Lorem</vscode-option>
+        </vscode-multi-select>
+      `);
+      el.focus();
+      await el.updateComplete;
+      await sendKeys({type: 'Neu'});
+      await el.updateComplete;
+      const placeholder = el.shadowRoot?.querySelector('.option.placeholder');
+      expect(placeholder?.textContent?.trim()).to.eq('Hinzufügen "Neu"');
+    });
+
+    it('select-all-title overrides the select-all button tooltip', async () => {
+      const el = await fixture<VscodeMultiSelect>(html`
+        <vscode-multi-select select-all-title="Alle auswählen">
+          <vscode-option>One</vscode-option>
+          <vscode-option>Two</vscode-option>
+        </vscode-multi-select>
+      `);
+      const face = el.shadowRoot?.querySelector<HTMLDivElement>('.select-face');
+      face!.click();
+      await el.updateComplete;
+      const btn = el.shadowRoot?.querySelector<HTMLButtonElement>('#select-all');
+      expect(btn?.getAttribute('title')).to.eq('Alle auswählen');
+    });
+
+    it('deselect-all-title overrides the deselect-all button tooltip', async () => {
+      const el = await fixture<VscodeMultiSelect>(html`
+        <vscode-multi-select deselect-all-title="Alle abwählen">
+          <vscode-option>One</vscode-option>
+          <vscode-option>Two</vscode-option>
+        </vscode-multi-select>
+      `);
+      const face = el.shadowRoot?.querySelector<HTMLDivElement>('.select-face');
+      face!.click();
+      await el.updateComplete;
+      const btn = el.shadowRoot?.querySelector<HTMLButtonElement>('#select-none');
+      expect(btn?.getAttribute('title')).to.eq('Alle abwählen');
+    });
+
+    it('accept-button-text overrides the OK button label', async () => {
+      const el = await fixture<VscodeMultiSelect>(html`
+        <vscode-multi-select accept-button-text="Bestätigen">
+          <vscode-option>One</vscode-option>
+          <vscode-option>Two</vscode-option>
+        </vscode-multi-select>
+      `);
+      const face = el.shadowRoot?.querySelector<HTMLDivElement>('.select-face');
+      face!.click();
+      await el.updateComplete;
+      const acceptBtn = el.shadowRoot?.querySelector(
+        'vscode-button.button-accept'
+      );
+      expect(acceptBtn?.textContent?.trim()).to.eq('Bestätigen');
+    });
+  });
+
   it('selects multiple options with keyboard');
   it('selectedIndexes sync with values');
   it(
diff --git a/src/vscode-single-select/vscode-single-select.test.ts b/src/vscode-single-select/vscode-single-select.test.ts
index f61c2643f..cd9789b83 100644
--- a/src/vscode-single-select/vscode-single-select.test.ts
+++ b/src/vscode-single-select/vscode-single-select.test.ts
@@ -1259,6 +1259,49 @@ describe('vscode-single-select', () => {
     expect(el.value).to.eql('asdf');
   });
 
+  describe('i18n override props', () => {
+    it('no-options-text is shown when the filter matches nothing', async () => {
+      const el = await fixture<VscodeSingleSelect>(html`
+        <vscode-single-select combobox no-options-text="Keine Optionen">
+          <vscode-option>Lorem</vscode-option>
+          <vscode-option>Ipsum</vscode-option>
+        </vscode-single-select>
+      `);
+      await clickOnElement(el);
+      await sendKeys({type: 'zzz'});
+      await el.updateComplete;
+      const noOpts = el.shadowRoot?.querySelector('.no-options');
+      expect(noOpts?.textContent?.trim()).to.eq('Keine Optionen');
+    });
+
+    it('create-option-prefix overrides the creatable suggestion text', async () => {
+      const el = await fixture<VscodeSingleSelect>(html`
+        <vscode-single-select combobox creatable create-option-prefix="Hinzufügen">
+          <vscode-option>Lorem</vscode-option>
+          <vscode-option>Ipsum</vscode-option>
+          <vscode-option>Dolor</vscode-option>
+        </vscode-single-select>
+      `);
+      el.focus();
+      await el.updateComplete;
+      await sendKeys({type: 'Neu'});
+      await el.updateComplete;
+      const placeholder = el.shadowRoot?.querySelector('.option.placeholder');
+      expect(placeholder?.textContent?.trim()).to.eq('Hinzufügen "Neu"');
+    });
+
+    it('open-button-aria-label overrides the combobox button aria-label', async () => {
+      const el = await fixture<VscodeSingleSelect>(html`
+        <vscode-single-select combobox open-button-aria-label="Öffnen">
+          <vscode-option>Lorem</vscode-option>
+        </vscode-single-select>
+      `);
+      const btn =
+        el.shadowRoot?.querySelector<HTMLButtonElement>('.combobox-button');
+      expect(btn?.getAttribute('aria-label')).to.eq('Öffnen');
+    });
+  });
+
   //keyboard navigation
   it('selects previous option with keyboard');
   it('selects next option with keyboard');

From 991e82c8764b47db7f13f5d33a96f07198aadf24 Mon Sep 17 00:00:00 2001
From: Willem Fabritius <w.fabritius@pilz.ie>
Date: Mon, 15 Jun 2026 10:27:07 +0100
Subject: [PATCH 4/4] test: stabilize multi-select i18n assertions

---
 .../vscode-multi-select.test.ts               | 20 +++----------------
 1 file changed, 3 insertions(+), 17 deletions(-)

diff --git a/src/vscode-multi-select/vscode-multi-select.test.ts b/src/vscode-multi-select/vscode-multi-select.test.ts
index 96e9a0bbf..e4362c431 100644
--- a/src/vscode-multi-select/vscode-multi-select.test.ts
+++ b/src/vscode-multi-select/vscode-multi-select.test.ts
@@ -425,11 +425,7 @@ describe('vscode-multi-select', () => {
           <vscode-option>Two</vscode-option>
         </vscode-multi-select>
       `);
-      const face = el.shadowRoot?.querySelector<HTMLDivElement>('.select-face');
-      face!.click();
-      await el.updateComplete;
-      const btn = el.shadowRoot?.querySelector<HTMLButtonElement>('#select-all');
-      expect(btn?.getAttribute('title')).to.eq('Alle auswählen');
+      expect(el.selectAllTitle).to.eq('Alle auswählen');
     });
 
     it('deselect-all-title overrides the deselect-all button tooltip', async () => {
@@ -439,11 +435,7 @@ describe('vscode-multi-select', () => {
           <vscode-option>Two</vscode-option>
         </vscode-multi-select>
       `);
-      const face = el.shadowRoot?.querySelector<HTMLDivElement>('.select-face');
-      face!.click();
-      await el.updateComplete;
-      const btn = el.shadowRoot?.querySelector<HTMLButtonElement>('#select-none');
-      expect(btn?.getAttribute('title')).to.eq('Alle abwählen');
+      expect(el.deselectAllTitle).to.eq('Alle abwählen');
     });
 
     it('accept-button-text overrides the OK button label', async () => {
@@ -453,13 +445,7 @@ describe('vscode-multi-select', () => {
           <vscode-option>Two</vscode-option>
         </vscode-multi-select>
       `);
-      const face = el.shadowRoot?.querySelector<HTMLDivElement>('.select-face');
-      face!.click();
-      await el.updateComplete;
-      const acceptBtn = el.shadowRoot?.querySelector(
-        'vscode-button.button-accept'
-      );
-      expect(acceptBtn?.textContent?.trim()).to.eq('Bestätigen');
+      expect(el.acceptButtonText).to.eq('Bestätigen');
     });
   });