diff --git a/docs/components/color-picker.md b/docs/components/color-picker.md index 160b0629f..1b460af50 100644 --- 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 - + ``` ```jsx react import { SlColorPicker } from '@shoelace-style/shoelace/dist/react'; -const App = () => ; +const App = () => ; ``` ?> This component works with standard `
` 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 = () => ; Use the `value` attribute to set an initial value for the color picker. ```html preview - + +``` + +```jsx react +import { SlColorPicker } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ; ``` ### 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 - + ``` ```jsx react import { SlColorPicker } from '@shoelace-style/shoelace/dist/react'; -const App = () => ; +const App = () => ; ``` ### 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 - - - + + + ``` ```jsx react @@ -69,9 +75,9 @@ const App = () => ( Use the `size` attribute to change the color picker's trigger size. ```html preview - - - + + + ``` ```jsx react @@ -79,9 +85,9 @@ import { SlColorPicker } from '@shoelace-style/shoelace/dist/react'; const App = () => ( <> - - - + + + ); ``` @@ -91,13 +97,13 @@ const App = () => ( The color picker can be rendered inline instead of in a dropdown using the `inline` attribute. ```html preview - + ``` ```jsx react import { SlColorPicker } from '@shoelace-style/shoelace/dist/react'; -const App = () => ; +const App = () => ; ``` [component-metadata:sl-color-picker] diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 26f13eaad..0469094f3 100644 --- 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 `` - Added the experimental `` component - Added `button-group` and `button-group__base` parts to `` +- Added the `label` attribute and slot to `` 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 `` from toggling `vertical` properly [#703](https://github.com/shoelace-style/shoelace/issues/703) - Fixed a bug that prevented `` from rendering a color initially [#704](https://github.com/shoelace-style/shoelace/issues/704) diff --git a/src/components/color-picker/color-picker.styles.ts b/src/components/color-picker/color-picker.styles.ts index 48677cc41..039d0f371 100644 --- 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); diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts index c2ee70ba4..26e7d6949 100644 --- 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` + + ${this.label} + + ` + : null} +
@@ -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} > @@ -838,7 +854,11 @@ export default class SlColorPicker extends LitElement { color: `hsla(${this.hue}deg, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100})` })} type="button" - > + > + + ${this.label} + + ${colorPicker} `; diff --git a/src/translations/da.ts b/src/translations/da.ts index e64282e06..83d3ee862 100644 --- 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', diff --git a/src/translations/de-ch.ts b/src/translations/de-ch.ts index 79eb4d672..504960ae9 100644 --- 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', diff --git a/src/translations/de.ts b/src/translations/de.ts index c23e74a74..76bf840c3 100644 --- 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', diff --git a/src/translations/en.ts b/src/translations/en.ts index 223fc0dee..421de5f81 100644 --- 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', diff --git a/src/translations/es.ts b/src/translations/es.ts index e26142007..9a0eeb89a 100644 --- 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', diff --git a/src/translations/fr.ts b/src/translations/fr.ts index 15e644381..871d7b652 100644 --- 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', diff --git a/src/translations/he.ts b/src/translations/he.ts index db8eac345..83fec27b7 100644 --- a/src/translations/he.ts +++ b/src/translations/he.ts @@ -8,6 +8,7 @@ const translation: Translation = { close: 'סגור', copy: 'העתק', + currentValue: 'ערך נוכחי', progress: 'התקדמות', remove: 'לְהַסִיר', resize: 'שנה גודל', diff --git a/src/translations/ja.ts b/src/translations/ja.ts index bb72fccbc..5983bac24 100644 --- a/src/translations/ja.ts +++ b/src/translations/ja.ts @@ -8,6 +8,7 @@ const translation: Translation = { close: '閉じる', copy: 'コピー', + currentValue: '現在の価値', progress: '進行', remove: '削除', resize: 'サイズ変更', diff --git a/src/translations/nl.ts b/src/translations/nl.ts index 867ff8985..70a475250 100644 --- 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', diff --git a/src/translations/pl.ts b/src/translations/pl.ts index 0ed7bb67e..b5173cd40 100644 --- 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', diff --git a/src/translations/pt.ts b/src/translations/pt.ts index 16613afa0..e224ed4e6 100644 --- 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', diff --git a/src/translations/ru.ts b/src/translations/ru.ts index b377733a6..2e2d3ac15 100644 --- a/src/translations/ru.ts +++ b/src/translations/ru.ts @@ -8,6 +8,7 @@ const translation: Translation = { close: 'Закрыть', copy: 'Скопировать', + currentValue: 'Текущая стоимость', progress: 'Прогресс', remove: 'Удалять', resize: 'Изменить размер',