add label to color picker

2026-01-12 20:19:13 +00:00 · 2022-03-17 10:31:29 -04:00
parent 5ea578b8c8
commit ada6f533b7
16 changed files with 64 additions and 20 deletions
--- a/docs/components/color-picker.md
+++ b/docs/components/color-picker.md
@@ -5,13 +5,13 @@
 Color pickers allow the user to select a color.

 ```html preview
-<sl-color-picker></sl-color-picker>
+<sl-color-picker label="Select a color"></sl-color-picker>
 ```

 ```jsx react
 import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';

-const App = () => <SlColorPicker />;
+const App = () => <SlColorPicker label="Select a color" />;
 ```

 ?> This component works with standard `<form>` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
@@ -23,7 +23,13 @@ const App = () => <SlColorPicker />;
 Use the `value` attribute to set an initial value for the color picker.

 ```html preview
-<sl-color-picker value="#4a90e2"></sl-color-picker>
+<sl-color-picker value="#4a90e2" label="Select a color"></sl-color-picker>
+```
+
+```jsx react
+import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => <SlColorPicker value="#4a90e2" label="Select a color" />;
 ```

 ### Opacity
@@ -31,13 +37,13 @@ Use the `value` attribute to set an initial value for the color picker.
 Use the `opacity` attribute to enable the opacity slider. When this is enabled, the value will be displayed as HEXA, RGBA, or HSLA based on `format`.

 ```html preview
-<sl-color-picker opacity></sl-color-picker>
+<sl-color-picker opacity label="Select a color"></sl-color-picker>
 ```

 ```jsx react
 import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';

-const App = () => <SlColorPicker opacity />;
+const App = () => <SlColorPicker opacity label="Select a color" />;
 ```

 ### Formats
@@ -47,9 +53,9 @@ Set the color picker's format with the `format` attribute. Valid options include
 To prevent users from toggling the format themselves, add the `no-format-toggle` attribute.

 ```html preview
-<sl-color-picker format="hex" value="#4a90e2"></sl-color-picker>
-<sl-color-picker format="rgb" value="rgb(80, 227, 194)"></sl-color-picker>
-<sl-color-picker format="hsl" value="hsl(290, 87%, 47%)"></sl-color-picker>
+<sl-color-picker format="hex" value="#4a90e2" label="Select a color"></sl-color-picker>
+<sl-color-picker format="rgb" value="rgb(80, 227, 194)" label="Select a color"></sl-color-picker>
+<sl-color-picker format="hsl" value="hsl(290, 87%, 47%)" label="Select a color"></sl-color-picker>
 ```

 ```jsx react
@@ -69,9 +75,9 @@ const App = () => (
 Use the `size` attribute to change the color picker's trigger size.

 ```html preview
-<sl-color-picker size="small"></sl-color-picker>
-<sl-color-picker size="medium"></sl-color-picker>
-<sl-color-picker size="large"></sl-color-picker>
+<sl-color-picker size="small" label="Select a color"></sl-color-picker>
+<sl-color-picker size="medium" label="Select a color"></sl-color-picker>
+<sl-color-picker size="large" label="Select a color"></sl-color-picker>
 ```

 ```jsx react
@@ -79,9 +85,9 @@ import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';

 const App = () => (
  <>
-    <SlColorPicker size="small" />
-    <SlColorPicker size="medium" />
-    <SlColorPicker size="large" />
+    <SlColorPicker size="small" label="Select a color" />
+    <SlColorPicker size="medium" label="Select a color" />
+    <SlColorPicker size="large" label="Select a color" />
  </>
 );
 ```
@@ -91,13 +97,13 @@ const App = () => (
 The color picker can be rendered inline instead of in a dropdown using the `inline` attribute.

 ```html preview
-<sl-color-picker inline></sl-color-picker>
+<sl-color-picker inline label="Select a color"></sl-color-picker>
 ```

 ```jsx react
 import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';

-const App = () => <SlColorPicker inline />;
+const App = () => <SlColorPicker inline label="Select a color" />;
 ```

 [component-metadata:sl-color-picker]
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -11,6 +11,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - 🚨 BREAKING: removed status from the `sl-error` event payload in `<sl-icon>`
 - Added the experimental `<sl-radio-button>` component
 - Added `button-group` and `button-group__base` parts to `<sl-radio-group>`
+- Added the `label` attribute and slot to `<sl-color-picker>` to improve accessibility with screen readers
 - Fixed a bug that prevented form submission from working as expected in some cases
 - Fixed a bug that prevented `<sl-split-panel>` from toggling `vertical` properly [#703](https://github.com/shoelace-style/shoelace/issues/703)
 - Fixed a bug that prevented `<sl-color-picker>` from rendering a color initially [#704](https://github.com/shoelace-style/shoelace/issues/704)
--- a/src/components/color-picker/color-picker.styles.ts
+++ b/src/components/color-picker/color-picker.styles.ts
@@ -31,6 +31,11 @@ export default css`
    border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
  }

+  .color-picker--inline${focusVisibleSelector} {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--sl-color-primary-500), var(--sl-focus-ring);
+  }
+
  .color-picker__grid {
    position: relative;
    height: var(--grid-height);
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -41,6 +41,8 @@ declare const EyeDropper: EyeDropperConstructor;
 * @dependency sl-dropdown
 * @dependency sl-input
 *
+ * @slot label - The color picker's label. Alternatively, you can use the label prop.
+ *
 * @event sl-change Emitted when the color picker's value changes.
 *
 * @csspart base - The component's internal wrapper.
@@ -98,6 +100,9 @@ export default class SlColorPicker extends LitElement {
  /** The current color. */
  @property() value = '#ffffff';

+  /* The color picker's label. This will not be displayed, but it will be announced by assistive devices. */
+  @property() label = '';
+
  /**
   * The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA
   * respectively. The color picker will always accept user input in any format (including CSS color names) and convert
@@ -627,7 +632,17 @@ export default class SlColorPicker extends LitElement {
          'color-picker--disabled': this.disabled
        })}
        aria-disabled=${this.disabled ? 'true' : 'false'}
+        aria-labelledby="label"
+        tabindex=${this.inline ? '0' : '-1'}
      >
+        ${this.inline
+          ? html`
+              <sl-visually-hidden id="label">
+                <slot name="label">${this.label}</slot>
+              </sl-visually-hidden>
+            `
+          : null}
+
        <div
          part="grid"
          class="color-picker__grid"
@@ -669,7 +684,7 @@ export default class SlColorPicker extends LitElement {
                aria-orientation="horizontal"
                aria-valuemin="0"
                aria-valuemax="360"
-                aria-valuenow=${Math.round(this.hue)}
+                aria-valuenow=${`${Math.round(this.hue)}`}
                tabindex=${ifDefined(this.disabled ? undefined : '0')}
                @keydown=${this.handleHueKeyDown}
              ></span>
@@ -736,6 +751,7 @@ export default class SlColorPicker extends LitElement {
            spellcheck="false"
            .value=${live(this.inputValue)}
            ?disabled=${this.disabled}
+            aria-label=${this.localize.term('currentValue')}
            @keydown=${this.handleInputKeyDown}
            @sl-change=${this.handleInputChange}
          ></sl-input>
@@ -838,7 +854,11 @@ export default class SlColorPicker extends LitElement {
            color: `hsla(${this.hue}deg, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100})`
          })}
          type="button"
-        ></button>
+        >
+          <sl-visually-hidden>
+            <slot name="label">${this.label}</slot>
+          </sl-visually-hidden>
+        </button>
        ${colorPicker}
      </sl-dropdown>
    `;
--- a/src/translations/da.ts
+++ b/src/translations/da.ts
@@ -8,6 +8,7 @@ const translation: Translation = {

  close: 'Luk',
  copy: 'Kopier',
+  currentValue: 'Nuværende regerer',
  progress: 'Status',
  remove: 'Fjerne',
  resize: 'Tipas størrelse',
--- a/src/translations/de-ch.ts
+++ b/src/translations/de-ch.ts
@@ -8,8 +8,9 @@ const translation: Translation = {

  close: 'Schliessen',
  copy: 'Kopieren',
+  currentValue: 'Aktueller Wert',
  progress: 'Fortschritt',
-  remove: 'Verwijderen',
+  remove: 'Entfernen',
  resize: 'Größe ändern',
  scrollToEnd: 'Zum Ende scrollen',
  scrollToStart: 'Zum Anfang scrollen',
--- a/src/translations/de.ts
+++ b/src/translations/de.ts
@@ -8,8 +8,9 @@ const translation: Translation = {

  close: 'Schließen',
  copy: 'Kopieren',
+  currentValue: 'Aktueller Wert',
  progress: 'Fortschritt',
-  remove: 'Verwijderen',
+  remove: 'Entfernen',
  resize: 'Größe ändern',
  scrollToEnd: 'Zum Ende scrollen',
  scrollToStart: 'Zum Anfang scrollen',
--- a/src/translations/en.ts
+++ b/src/translations/en.ts
@@ -8,6 +8,7 @@ const translation: Translation = {

  close: 'Close',
  copy: 'Copy',
+  currentValue: 'Current value',
  progress: 'Progress',
  remove: 'Remove',
  resize: 'Resize',
--- a/src/translations/es.ts
+++ b/src/translations/es.ts
@@ -8,6 +8,7 @@ const translation: Translation = {

  close: 'Cerrar',
  copy: 'Copiar',
+  currentValue: 'Valor actual',
  progress: 'Progreso',
  remove: 'Eliminar',
  resize: 'Cambiar el tamaño',
--- a/src/translations/fr.ts
+++ b/src/translations/fr.ts
@@ -8,6 +8,7 @@ const translation: Translation = {

  close: 'Fermer',
  copy: 'Copier',
+  currentValue: 'Valeur actuelle',
  progress: 'Progrès',
  remove: 'Retirer',
  resize: 'Redimensionner',
--- a/src/translations/he.ts
+++ b/src/translations/he.ts
@@ -8,6 +8,7 @@ const translation: Translation = {

  close: 'סגור',
  copy: 'העתק',
+  currentValue: 'ערך נוכחי',
  progress: 'התקדמות',
  remove: 'לְהַסִיר',
  resize: 'שנה גודל',
--- a/src/translations/ja.ts
+++ b/src/translations/ja.ts
@@ -8,6 +8,7 @@ const translation: Translation = {

  close: '閉じる',
  copy: 'コピー',
+  currentValue: '現在の価値',
  progress: '進行',
  remove: '削除',
  resize: 'サイズ変更',
--- a/src/translations/nl.ts
+++ b/src/translations/nl.ts
@@ -8,6 +8,7 @@ const translation: Translation = {

  close: 'Sluiten',
  copy: 'Kopiëren',
+  currentValue: 'Huidige waarde',
  progress: 'Voortgang',
  remove: 'Verwijderen',
  resize: 'Formaat wijzigen',
--- a/src/translations/pl.ts
+++ b/src/translations/pl.ts
@@ -8,6 +8,7 @@ const translation: Translation = {

  close: 'Zamknij',
  copy: 'Kopiuj',
+  currentValue: 'Aktualna wartość',
  progress: 'Postęp',
  remove: 'Usunąć',
  resize: 'Zmień rozmiar',
--- a/src/translations/pt.ts
+++ b/src/translations/pt.ts
@@ -8,6 +8,7 @@ const translation: Translation = {

  close: 'Fechar',
  copy: 'Copiar',
+  currentValue: 'Valor atual',
  progress: 'Progresso',
  remove: 'Remover',
  resize: 'Mudar o tamanho',
--- a/src/translations/ru.ts
+++ b/src/translations/ru.ts
@@ -8,6 +8,7 @@ const translation: Translation = {

  close: 'Закрыть',
  copy: 'Скопировать',
+  currentValue: 'Текущая стоимость',
  progress: 'Прогресс',
  remove: 'Удалять',
  resize: 'Изменить размер',