fixes #727

docs/resources/changelog.md

@@ -20,6 +20,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug that caused the test runner to fail when using a locale other than en-US [#726](https://github.com/shoelace-style/shoelace/issues/726)
 - Improved form submit logic so most user-added event listeners will run after form data is attached and validation occurs [#718](https://github.com/shoelace-style/shoelace/issues/718)
 - Improved accessibility of `<sl-tooltip>` so screen readers announce the content on hover/focus [#219](https://github.com/shoelace-style/shoelace/issues/219)
+- Improved accessibility of form controls by exposing clear buttons and password visibility buttons to screen readers while keeping them out of the tab order [#727](https://github.com/shoelace-style/shoelace/issues/727)
 - Updated `<sl-tab-group>` and `<sl-menu>` to cycle through tabs and menu items instead of stopping at the first/last when using the keyboard
 - Removed path aliasing (again) because it doesn't work with Web Test Runner's esbuild plugin
 

src/components/input/input.ts

@@ -8,6 +8,7 @@ import { emit } from '../../internal/event';
 import { FormSubmitController } from '../../internal/form';
 import { HasSlotController } from '../../internal/slot';
 import { watch } from '../../internal/watch';
+import { LocalizeController } from '../../utilities/localize';
 import styles from './input.styles';
 
 /**
@@ -49,6 +50,7 @@ export default class SlInput extends LitElement {
 
   private readonly formSubmitController = new FormSubmitController(this);
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
+  private readonly localize = new LocalizeController(this);
 
   @state() private hasFocus = false;
   @state() private isPasswordVisible = false;
@@ -374,7 +376,7 @@ export default class SlInput extends LitElement {
                     part="clear-button"
                     class="input__clear"
                     type="button"
-                    aria-hidden="true"
+                    aria-label=${this.localize.term('clearEntry')}
                     @click=${this.handleClearClick}
                     tabindex="-1"
                   >
@@ -390,7 +392,7 @@ export default class SlInput extends LitElement {
                     part="password-toggle-button"
                     class="input__password-toggle"
                     type="button"
-                    aria-hidden="true"
+                    aria-label=${this.localize.term(this.isPasswordVisible ? 'hidePassword' : 'showPassword')}
                     @click=${this.handlePasswordToggle}
                     tabindex="-1"
                   >

src/components/select/select.ts

@@ -10,6 +10,7 @@ import { emit } from '../../internal/event';
 import { FormSubmitController } from '../../internal/form';
 import { getTextContent, HasSlotController } from '../../internal/slot';
 import { watch } from '../../internal/watch';
+import { LocalizeController } from '../../utilities/localize';
 import styles from './select.styles';
 import type SlDropdown from '../../components/dropdown/dropdown';
 import type SlIconButton from '../../components/icon-button/icon-button';
@@ -70,6 +71,7 @@ export default class SlSelect extends LitElement {
   // @ts-expect-error -- Controller is currently unused
   private readonly formSubmitController = new FormSubmitController(this);
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
+  private readonly localize = new LocalizeController(this);
   private resizeObserver: ResizeObserver;
 
   @state() private hasFocus = false;
@@ -534,7 +536,13 @@ export default class SlSelect extends LitElement {
 
               ${this.clearable && hasSelection
                 ? html`
-                    <button part="clear-button" class="select__clear" @click=${this.handleClearClick} tabindex="-1">
+                    <button
+                      part="clear-button"
+                      class="select__clear"
+                      @click=${this.handleClearClick}
+                      aria-label=${this.localize.term('clearEntry')}
+                      tabindex="-1"
+                    >
                       <slot name="clear-icon">
                         <sl-icon name="x-circle-fill" library="system"></sl-icon>
                       </slot>

src/translations/da.ts

@@ -6,15 +6,18 @@ const translation: Translation = {
   $name: 'Danish',
   $dir: 'ltr',
 
+  clearEntry: 'Ryd indtastning',
   close: 'Luk',
   copy: 'Kopier',
   currentValue: 'Nuværende regerer',
+  hidePassword: 'Skjul adgangskode',
   progress: 'Status',
   remove: 'Fjerne',
   resize: 'Tipas størrelse',
   scrollToEnd: 'Scroll til slut',
   scrollToStart: 'Scroll til start',
   selectAColorFromTheScreen: 'Vælg en farve fra skærmen',
+  showPassword: 'Vis adgangskode',
   toggleColorFormat: 'Skift farveformat'
 };
 

src/translations/de-ch.ts

@@ -6,15 +6,18 @@ const translation: Translation = {
   $name: 'Deutsch (Schweiz)',
   $dir: 'ltr',
 
+  clearEntry: 'Klarer Eintrag',
   close: 'Schliessen',
   copy: 'Kopieren',
   currentValue: 'Aktueller Wert',
+  hidePassword: 'Passwort verbergen',
   progress: 'Fortschritt',
   remove: 'Entfernen',
   resize: 'Größe ändern',
   scrollToEnd: 'Zum Ende scrollen',
   scrollToStart: 'Zum Anfang scrollen',
   selectAColorFromTheScreen: 'Wähle eine Farbe vom Bildschirm',
+  showPassword: 'Passwort anzeigen',
   toggleColorFormat: 'Farbformat umschalten'
 };
 

src/translations/de.ts

@@ -6,15 +6,18 @@ const translation: Translation = {
   $name: 'Deutsch',
   $dir: 'ltr',
 
+  clearEntry: 'Klarer Eintrag',
   close: 'Schließen',
   copy: 'Kopieren',
   currentValue: 'Aktueller Wert',
+  hidePassword: 'Passwort verbergen',
   progress: 'Fortschritt',
   remove: 'Entfernen',
   resize: 'Größe ändern',
   scrollToEnd: 'Zum Ende scrollen',
   scrollToStart: 'Zum Anfang scrollen',
   selectAColorFromTheScreen: 'Wähle eine Farbe vom Bildschirm',
+  showPassword: 'Passwort anzeigen',
   toggleColorFormat: 'Farbformat umschalten'
 };
 

src/translations/en.ts

@@ -6,15 +6,18 @@ const translation: Translation = {
   $name: 'English',
   $dir: 'ltr',
 
+  clearEntry: 'Clear entry',
   close: 'Close',
   copy: 'Copy',
   currentValue: 'Current value',
+  hidePassword: 'Hide password',
   progress: 'Progress',
   remove: 'Remove',
   resize: 'Resize',
   scrollToEnd: 'Scroll to end',
   scrollToStart: 'Scroll to start',
   selectAColorFromTheScreen: 'Select a color from the screen',
+  showPassword: 'Show password',
   toggleColorFormat: 'Toggle color format'
 };
 

src/translations/es.ts

@@ -6,15 +6,18 @@ const translation: Translation = {
   $name: 'Español',
   $dir: 'ltr',
 
+  clearEntry: 'Borrar entrada',
   close: 'Cerrar',
   copy: 'Copiar',
   currentValue: 'Valor actual',
+  hidePassword: 'Ocultar contraseña',
   progress: 'Progreso',
   remove: 'Eliminar',
   resize: 'Cambiar el tamaño',
   scrollToEnd: 'Desplazarse hasta el final',
   scrollToStart: 'Desplazarse al inicio',
   selectAColorFromTheScreen: 'Seleccione un color de la pantalla',
+  showPassword: 'Mostrar contraseña',
   toggleColorFormat: 'Alternar formato de color'
 };
 

src/translations/fr.ts

@@ -6,15 +6,18 @@ const translation: Translation = {
   $name: 'Français',
   $dir: 'ltr',
 
+  clearEntry: `Effacer l'entrée`,
   close: 'Fermer',
   copy: 'Copier',
   currentValue: 'Valeur actuelle',
+  hidePassword: 'Masquer le mot de passe',
   progress: 'Progrès',
   remove: 'Retirer',
   resize: 'Redimensionner',
   scrollToEnd: `Faire défiler jusqu'à la fin`,
   scrollToStart: `Faire défiler jusqu'au début`,
   selectAColorFromTheScreen: `Sélectionnez une couleur à l'écran`,
+  showPassword: 'Montrer le mot de passe',
   toggleColorFormat: 'Changer le format de couleur'
 };
 

src/translations/he.ts

@@ -6,15 +6,18 @@ const translation: Translation = {
   $name: 'עברית',
   $dir: 'rtl',
 
+  clearEntry: 'נקה קלט',
   close: 'סגור',
   copy: 'העתק',
   currentValue: 'ערך נוכחי',
+  hidePassword: 'הסתר סיסמא',
   progress: 'התקדמות',
   remove: 'לְהַסִיר',
   resize: 'שנה גודל',
   scrollToEnd: 'גלול עד הסוף',
   scrollToStart: 'גלול להתחלה',
   selectAColorFromTheScreen: 'בחור צבע מהמסך',
+  showPassword: 'הראה סיסמה',
   toggleColorFormat: 'החלף פורמט צבע'
 };
 

src/translations/ja.ts

@@ -6,15 +6,18 @@ const translation: Translation = {
   $name: '日本語',
   $dir: 'ltr',
 
+  clearEntry: 'クリアエントリ',
   close: '閉じる',
   copy: 'コピー',
   currentValue: '現在の価値',
+  hidePassword: 'パスワードを隠す',
   progress: '進行',
   remove: '削除',
   resize: 'サイズ変更',
   scrollToEnd: '最後にスクロールする',
   scrollToStart: '最初にスクロールする',
   selectAColorFromTheScreen: '画面から色を選択してください',
+  showPassword: 'パスワードを表示',
   toggleColorFormat: '色のフォーマットを切り替える'
 };
 

src/translations/nl.ts

@@ -6,15 +6,18 @@ const translation: Translation = {
   $name: 'Dutch',
   $dir: 'ltr',
 
+  clearEntry: 'Invoer wissen',
   close: 'Sluiten',
   copy: 'Kopiëren',
   currentValue: 'Huidige waarde',
+  hidePassword: 'Verberg wachtwoord',
   progress: 'Voortgang',
   remove: 'Verwijderen',
   resize: 'Formaat wijzigen',
   scrollToEnd: 'Scroll naar einde',
   scrollToStart: 'Scroll naar begin',
   selectAColorFromTheScreen: 'Selecteer een kleur van het scherm',
+  showPassword: 'Laat wachtwoord zien',
   toggleColorFormat: 'Wissel kleurnotatie'
 };
 

src/translations/pl.ts

@@ -6,15 +6,18 @@ const translation: Translation = {
   $name: 'Polski',
   $dir: 'ltr',
 
+  clearEntry: 'Wyczyść wpis',
   close: 'Zamknij',
   copy: 'Kopiuj',
   currentValue: 'Aktualna wartość',
+  hidePassword: 'Ukryj hasło',
   progress: 'Postęp',
   remove: 'Usunąć',
   resize: 'Zmień rozmiar',
   scrollToEnd: 'Przewiń do końca',
   scrollToStart: 'Przewiń do początku',
   selectAColorFromTheScreen: 'Próbkuj z ekranu',
+  showPassword: 'Pokaż hasło',
   toggleColorFormat: 'Przełącz format'
 };
 

src/translations/pt.ts

@@ -6,15 +6,18 @@ const translation: Translation = {
   $name: 'Português',
   $dir: 'ltr',
 
+  clearEntry: 'Limpar entrada',
   close: 'Fechar',
   copy: 'Copiar',
   currentValue: 'Valor atual',
+  hidePassword: 'Esconder a senha',
   progress: 'Progresso',
   remove: 'Remover',
   resize: 'Mudar o tamanho',
   scrollToEnd: 'Rolar até o final',
   scrollToStart: 'Rolar até o começo',
   selectAColorFromTheScreen: 'Selecionar uma cor da tela',
+  showPassword: 'Mostrar senhaShow password',
   toggleColorFormat: 'Trocar o formato de cor'
 };
 

src/translations/ru.ts

@@ -6,15 +6,18 @@ const translation: Translation = {
   $name: 'Русский',
   $dir: 'ltr',
 
+  clearEntry: 'Очистить запись',
   close: 'Закрыть',
   copy: 'Скопировать',
   currentValue: 'Текущая стоимость',
+  hidePassword: 'Скрыть пароль',
   progress: 'Прогресс',
   remove: 'Удалять',
   resize: 'Изменить размер',
   scrollToEnd: 'Пролистать до конца',
   scrollToStart: 'Пролистать к началу',
   selectAColorFromTheScreen: 'Выберите цвет на экране',
+  showPassword: 'Показать пароль',
   toggleColorFormat: 'Переключить цветовую модель'
 };