Skip to content

Add i18n override coverage for single- and multi-select labels/ARIA text #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wfabr merged 1 commit into from
Jun 11, 2026
Merged

Add i18n override coverage for single- and multi-select labels/ARIA text #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 113 additions & 0 deletions src/vscode-multi-select/vscode-multi-select.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
43 changes: 43 additions & 0 deletions src/vscode-single-select/vscode-single-select.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
Loading