From 0224b20d763321541d3a2f248d0d642cf087e099 Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Wed, 20 May 2026 16:05:09 +0200
Subject: [PATCH 1/2] button with proper aria-label and aria-expanded,
 translations changes

---
 .../components/combobox/src/combobox.spec.ts  | 18 +++++++++++------
 packages/components/combobox/src/combobox.ts  | 20 +++++++------------
 packages/locales/src/es-ES.ts                 |  3 +--
 packages/locales/src/es-ES.xlf                | 10 +++-------
 packages/locales/src/it.ts                    |  3 +--
 packages/locales/src/it.xlf                   | 10 +++-------
 packages/locales/src/nl.ts                    |  3 +--
 packages/locales/src/nl.xlf                   | 10 +++-------
 packages/locales/src/pl.ts                    |  3 +--
 packages/locales/src/pl.xlf                   | 10 +++-------
 10 files changed, 35 insertions(+), 55 deletions(-)

diff --git a/packages/components/combobox/src/combobox.spec.ts b/packages/components/combobox/src/combobox.spec.ts
index eceb849449..fff7c17a29 100644
--- a/packages/components/combobox/src/combobox.spec.ts
+++ b/packages/components/combobox/src/combobox.spec.ts
@@ -187,22 +187,28 @@ describe('sl-combobox', () => {
       expect(wrapper?.matches(':popover-open')).to.be.false;
     });
 
-    it('should have an aria-label of "Show the options" when the popover is closed', () => {
+    it('should have a static aria-label of "Options" on the button', () => {
       const button = el.renderRoot.querySelector('button[slot="suffix"]');
 
-      expect(button).to.have.attribute('aria-label', 'Show the options');
+      expect(button).to.have.attribute('aria-label', 'Options');
     });
 
-    it('should have an aria-label of "Hide the options" when the popover is open', async () => {
+    it('should have aria-expanded "false" on the button when the popover is closed', () => {
+      const button = el.renderRoot.querySelector('button[slot="suffix"]');
+
+      expect(button).to.have.attribute('aria-expanded', 'false');
+    });
+
+    it('should have aria-expanded "true" on the button when the popover is open', async () => {
       const button = el.renderRoot.querySelector<HTMLElement>('button[slot="suffix"]');
 
       button?.click();
       await el.updateComplete;
 
-      expect(button).to.have.attribute('aria-label', 'Hide the options');
+      expect(button).to.have.attribute('aria-expanded', 'true');
     });
 
-    it('should switch aria-label back to "Show the options" when the popover closes', async () => {
+    it('should switch aria-expanded back to "false" when the popover closes', async () => {
       const button = el.renderRoot.querySelector<HTMLElement>('button[slot="suffix"]');
 
       button?.click();
@@ -211,7 +217,7 @@ describe('sl-combobox', () => {
       button?.click();
       await el.updateComplete;
 
-      expect(button).to.have.attribute('aria-label', 'Show the options');
+      expect(button).to.have.attribute('aria-expanded', 'false');
     });
 
     it('should not be select only', () => {
diff --git a/packages/components/combobox/src/combobox.ts b/packages/components/combobox/src/combobox.ts
index 191a9cbac7..5ea2e09cd9 100644
--- a/packages/components/combobox/src/combobox.ts
+++ b/packages/components/combobox/src/combobox.ts
@@ -500,8 +500,7 @@ export class Combobox<T = any, U = T> extends ObserveAttributesMixin(
         placeholder=${ifDefined(
           this.multiple && this.selectedItems.length ? undefined : this.placeholder
         )}
-        size=${ifDefined(this.size)}
-      >
+        size=${ifDefined(this.size)}>
         ${this.multiple && this.selectedItems.length
           ? html`
               <sl-tag-list
@@ -509,8 +508,7 @@ export class Combobox<T = any, U = T> extends ObserveAttributesMixin(
                 aria-label=${msg('Selected options', { id: 'sl.combobox.selectedOptions' })}
                 size=${ifDefined(this.size)}
                 slot="prefix"
-                stacked
-              >
+                stacked>
                 ${repeat(
                   this.selectedItems,
                   item => item,
@@ -520,8 +518,7 @@ export class Combobox<T = any, U = T> extends ObserveAttributesMixin(
                       ?disabled=${this.disabled}
                       ?removable=${!this.disabled}
                       aria-hidden=${this.disabled ? nothing : 'true'}
-                      class=${this.focusedTag === item ? 'focused' : ''}
-                    >
+                      class=${this.focusedTag === item ? 'focused' : ''}>
                       ${item.label}
                     </sl-tag>
                   `
@@ -533,12 +530,10 @@ export class Combobox<T = any, U = T> extends ObserveAttributesMixin(
         <button
           @click=${this.#onButtonClick}
           ?disabled=${this.disabled}
-          aria-label=${this.wrapper?.matches(':popover-open')
-            ? msg('Hide the options', { id: 'sl.combobox.hideOptions' })
-            : msg('Show the options', { id: 'sl.combobox.showOptions' })}
+          aria-expanded=${this.input?.getAttribute('aria-expanded') ?? 'false'}
+          aria-label=${msg('Options', { id: 'sl.combobox.options' })}
           slot="suffix"
-          tabindex="-1"
-        >
+          tabindex="-1">
           <sl-icon name="chevron-down"></sl-icon>
         </button>
       </sl-text-field>
@@ -557,8 +552,7 @@ export class Combobox<T = any, U = T> extends ObserveAttributesMixin(
         @toggle=${this.#onToggle}
         part="wrapper"
         popover
-        tabindex="-1"
-      ></slot>
+        tabindex="-1"></slot>
     `;
   }
 
diff --git a/packages/locales/src/es-ES.ts b/packages/locales/src/es-ES.ts
index c0e981fdfa..e7980e5411 100644
--- a/packages/locales/src/es-ES.ts
+++ b/packages/locales/src/es-ES.ts
@@ -27,10 +27,9 @@ export const templates = {
   'sl.checkbox.validation.valueMissing': 'Selecciona esta opción.',
   'sl.checkbox.validation.valueMissingMultiple': 'Selecciona al menos una opción.',
   'sl.combobox.createCustomOption': str`Crear "${0}"`,
-  'sl.combobox.hideOptions': 'Ocultar las opciones',
   'sl.combobox.noOptionsFound': str`No se han encontrado opciones que comiencen con "${0}".`,
+  'sl.combobox.options': 'Opciones',
   'sl.combobox.selectedOptions': 'Opciones seleccionadas',
-  'sl.combobox.showOptions': 'Mostrar las opciones',
   'sl.combobox.validation.valueMissing': 'Selecciona una opción.',
   'sl.combobox.validation.valueMissingMultiple': 'Selecciona al menos una opción.',
   'sl.common.allOptions': 'Todas las opciones',
diff --git a/packages/locales/src/es-ES.xlf b/packages/locales/src/es-ES.xlf
index 03999faa56..b4822107d4 100644
--- a/packages/locales/src/es-ES.xlf
+++ b/packages/locales/src/es-ES.xlf
@@ -450,13 +450,9 @@
   <source>No later than <x id="0" equiv-text="${format(this.max, this.locale, this.#helperTextFormatOptions)}"/></source>
   <target>No más tarde de <x id="0" equiv-text="${format(this.max, this.locale, this.#helperTextFormatOptions)}"/></target>
 </trans-unit>
-<trans-unit id="sl.combobox.hideOptions">
-  <source>Hide the options</source>
-  <target>Ocultar las opciones</target>
-</trans-unit>
-<trans-unit id="sl.combobox.showOptions">
-  <source>Show the options</source>
-  <target>Mostrar las opciones</target>
+<trans-unit id="sl.combobox.options">
+  <source>Options</source>
+  <target>Opciones</target>
 </trans-unit>
 <trans-unit id="sl.infotip.moreInformation">
   <source>More information</source>
diff --git a/packages/locales/src/it.ts b/packages/locales/src/it.ts
index f8e8ddd64c..8728f2629d 100644
--- a/packages/locales/src/it.ts
+++ b/packages/locales/src/it.ts
@@ -27,10 +27,9 @@ export const templates = {
   'sl.checkbox.validation.valueMissing': 'Seleziona questa casella.',
   'sl.checkbox.validation.valueMissingMultiple': "Seleziona almeno un'opzione.",
   'sl.combobox.createCustomOption': str`Crea "${0}"`,
-  'sl.combobox.hideOptions': 'Nascondi le opzioni',
   'sl.combobox.noOptionsFound': str`Nessuna opzione che inizia con "${0}" è stata trovata.`,
+  'sl.combobox.options': 'Opzioni',
   'sl.combobox.selectedOptions': 'Opzioni selezionate',
-  'sl.combobox.showOptions': 'Mostra le opzioni',
   'sl.combobox.validation.valueMissing': "Seleziona un'opzione.",
   'sl.combobox.validation.valueMissingMultiple': "Seleziona almeno un'opzione.",
   'sl.common.allOptions': 'Tutte le opzioni',
diff --git a/packages/locales/src/it.xlf b/packages/locales/src/it.xlf
index 7d7dbede9c..6c8ab54efa 100644
--- a/packages/locales/src/it.xlf
+++ b/packages/locales/src/it.xlf
@@ -450,13 +450,9 @@
   <source>No later than <x id="0" equiv-text="${format(this.max, this.locale, this.#helperTextFormatOptions)}"/></source>
   <target>Non oltre <x id="0" equiv-text="${format(this.max, this.locale, this.#helperTextFormatOptions)}"/></target>
 </trans-unit>
-<trans-unit id="sl.combobox.hideOptions">
-  <source>Hide the options</source>
-  <target>Nascondi le opzioni</target>
-</trans-unit>
-<trans-unit id="sl.combobox.showOptions">
-  <source>Show the options</source>
-  <target>Mostra le opzioni</target>
+<trans-unit id="sl.combobox.options">
+  <source>Options</source>
+  <target>Opzioni</target>
 </trans-unit>
 <trans-unit id="sl.infotip.moreInformation">
   <source>More information</source>
diff --git a/packages/locales/src/nl.ts b/packages/locales/src/nl.ts
index ca99a36f9c..9710b9d9a3 100644
--- a/packages/locales/src/nl.ts
+++ b/packages/locales/src/nl.ts
@@ -27,10 +27,9 @@ export const templates = {
   'sl.checkbox.validation.valueMissing': 'Vink dit vakje aan.',
   'sl.checkbox.validation.valueMissingMultiple': 'Vink tenminste één optie aan.',
   'sl.combobox.createCustomOption': str`Maak "${0}" aan`,
-  'sl.combobox.hideOptions': 'Verberg de opties',
   'sl.combobox.noOptionsFound': str`Geen opties gevonden die beginnen met "${0}".`,
+  'sl.combobox.options': 'Opties',
   'sl.combobox.selectedOptions': 'Geselecteerde opties',
-  'sl.combobox.showOptions': 'Toon de opties',
   'sl.combobox.validation.valueMissing': 'Kies een optie.',
   'sl.combobox.validation.valueMissingMultiple': 'Selecteer tenminste één optie.',
   'sl.common.allOptions': 'Alle opties',
diff --git a/packages/locales/src/nl.xlf b/packages/locales/src/nl.xlf
index 9de25d833a..d61dcae25c 100644
--- a/packages/locales/src/nl.xlf
+++ b/packages/locales/src/nl.xlf
@@ -454,13 +454,9 @@
   <source>More information</source>
   <target>Meer informatie</target>
 </trans-unit>
-<trans-unit id="sl.combobox.hideOptions">
-  <source>Hide the options</source>
-  <target>Verberg de opties</target>
-</trans-unit>
-<trans-unit id="sl.combobox.showOptions">
-  <source>Show the options</source>
-  <target>Toon de opties</target>
+<trans-unit id="sl.combobox.options">
+  <source>Options</source>
+  <target>Opties</target>
 </trans-unit>
 </body>
 </file>
diff --git a/packages/locales/src/pl.ts b/packages/locales/src/pl.ts
index 77c13e25be..aa6add51a0 100644
--- a/packages/locales/src/pl.ts
+++ b/packages/locales/src/pl.ts
@@ -27,10 +27,9 @@ export const templates = {
   'sl.checkbox.validation.valueMissing': 'Zaznacz to pole.',
   'sl.checkbox.validation.valueMissingMultiple': 'Zaznacz co najmniej jedną opcję.',
   'sl.combobox.createCustomOption': str`Utwórz "${0}"`,
-  'sl.combobox.hideOptions': 'Ukryj opcje',
   'sl.combobox.noOptionsFound': str`Nie znaleziono opcji zaczynających się od "${0}".`,
+  'sl.combobox.options': 'Opcje',
   'sl.combobox.selectedOptions': 'Wybrane opcje',
-  'sl.combobox.showOptions': 'Pokaż opcje',
   'sl.combobox.validation.valueMissing': 'Wybierz opcję.',
   'sl.combobox.validation.valueMissingMultiple': 'Wybierz co najmniej jedną opcję.',
   'sl.common.allOptions': 'Wszystkie opcje',
diff --git a/packages/locales/src/pl.xlf b/packages/locales/src/pl.xlf
index e38a9cd131..546427103b 100644
--- a/packages/locales/src/pl.xlf
+++ b/packages/locales/src/pl.xlf
@@ -450,13 +450,9 @@
   <source>No later than <x id="0" equiv-text="${format(this.max, this.locale, this.#helperTextFormatOptions)}"/></source>
   <target>Nie później niż <x id="0" equiv-text="${format(this.max, this.locale, this.#helperTextFormatOptions)}"/></target>
 </trans-unit>
-<trans-unit id="sl.combobox.hideOptions">
-  <source>Hide the options</source>
-  <target>Ukryj opcje</target>
-</trans-unit>
-<trans-unit id="sl.combobox.showOptions">
-  <source>Show the options</source>
-  <target>Pokaż opcje</target>
+<trans-unit id="sl.combobox.options">
+  <source>Options</source>
+  <target>Opcje</target>
 </trans-unit>
 <trans-unit id="sl.infotip.moreInformation">
   <source>More information</source>

From 66281a045f1dd610a04f4eec4e788a3a11d67f32 Mon Sep 17 00:00:00 2001
From: anna-lach <a.lach@nowaera.pl>
Date: Thu, 21 May 2026 10:58:36 +0200
Subject: [PATCH 2/2] Changeset

---
 .changeset/bright-walls-live.md   | 5 +++++
 .changeset/cuddly-coins-change.md | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 .changeset/bright-walls-live.md
 create mode 100644 .changeset/cuddly-coins-change.md

diff --git a/.changeset/bright-walls-live.md b/.changeset/bright-walls-live.md
new file mode 100644
index 0000000000..af32b920c1
--- /dev/null
+++ b/.changeset/bright-walls-live.md
@@ -0,0 +1,5 @@
+---
+'@sl-design-system/combobox': patch
+---
+
+Accessibility improvements of the toggle button, now uses proper aria: aria-label and aria-expanded (includes the new `sl.combobox.options` locale key).
diff --git a/.changeset/cuddly-coins-change.md b/.changeset/cuddly-coins-change.md
new file mode 100644
index 0000000000..48c07a1712
--- /dev/null
+++ b/.changeset/cuddly-coins-change.md
@@ -0,0 +1,5 @@
+---
+'@sl-design-system/locales': patch
+---
+
+Add translations for `sl.combobox.options` in Dutch, Italian, Polish and Spanish. Remove obsolete translations for `sl.combobox.hideOptions` and `sl.combobox.showOptions`, as these keys have been replaced by `sl.combobox.options` for the combobox toggle button.