fix(combobox): add ARIA attributes and update translations for toggle button

.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).

.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.

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', () => {

packages/components/combobox/src/combobox.ts

@@ -500,17 +500,15 @@ 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
                 ?disabled=${this.disabled}
                 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>
     `;
   }
 

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',

packages/locales/src/es-ES.xlf

@@ -454,13 +454,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>

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',

packages/locales/src/it.xlf

@@ -454,13 +454,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>

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',

packages/locales/src/nl.xlf

@@ -458,13 +458,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>

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',

packages/locales/src/pl.xlf

@@ -454,13 +454,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>