Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-30 13:51:28 +04:00
Code Issues Projects Releases Wiki Activity

Improve accessibility across layouts, components, and forms (#2799)

Browse Source
This commit is contained in:
Paweł Kuna
2026-08-05 23:40:37 +02:00
committed by GitHub
parent 17d2363ef2
commit 1effe221cb
160 changed files with 1494 additions and 1092 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shared/ui/Colorpicker.astro
+4 -2
View File
@@ -9,9 +9,11 @@ interface Props {
format?: string | false
swatchesOnly?: boolean
class?: string
/** Accessible name for the input; falls back to a generic label when the caller doesn't wrap this in a labelled FormGroup */
ariaLabel?: string
}
const { value, id = 'default', alpha = false, format = false, swatchesOnly, class: className } = Astro.props
const { value, id = 'default', alpha = false, format = false, swatchesOnly, class: className, ariaLabel } = Astro.props
const colors = site.colors as Record<string, { prop: string }>
const swatchProps = Object.values(colors).map((color) => color.prop)
@@ -20,7 +22,7 @@ const colorpickerId = `colorpicker-${id}`
const colorpickerSelector = `#colorpicker-${id}`
---
<input type="text" class={`form-control d-block${className ? ` ${className}` : ''}`} id={colorpickerId} value={value} />
<input type="text" class={`form-control d-block${className ? ` ${className}` : ''}`} id={colorpickerId} value={value} aria-label={ariaLabel ?? 'Color value'} />
<CaptureScript>
<!-- BEGIN COLORPICKER -->
<script define:vars={{ colorpickerId, colorpickerSelector, alpha, format, swatchesOnly, swatchProps }}>