js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix hint aria

Browse Source
This commit is contained in:
Cory LaViska
2025-06-05 13:59:51 -04:00
parent 9a75a181f9
commit 9c19ea7d88
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/webawesome/src/components/slider/slider.ts
View File

@@ -778,7 +778,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
render() {
const hasLabel = this.hasSlotController.test('label');
const hasDescription = this.hasSlotController.test('description');
const hasHint = this.hasSlotController.test('hint');
const sliderClasses = classMap({
small: this.size === 'small',
@@ -798,7 +798,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
}
// Common UI fragments
const labelAndDescription = html`
const labelAndHint = html`
<label
id="label"
part="label"
@@ -809,7 +809,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
<slot name="label">${this.label}</slot>
</label>
<div id="hint" part="hint" class=${classMap({ vh: !hasDescription })}>
<div id="hint" part="hint" class=${classMap({ vh: !hasHint })}>
<slot name="hint">${this.hint}</slot>
</div>
`;
@@ -863,7 +863,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
const maxThumbPosition = clamp(this.getPercentageFromValue(this.maxValue), 0, 100);
return html`
${labelAndDescription}
${labelAndHint}
<div id="slider" part="slider" class=${sliderClasses}>
<div id="track" part="track">
@@ -936,7 +936,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
);
return html`
${labelAndDescription}
${labelAndHint}
<div
id="slider"
@@ -953,7 +953,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
: this.localize.number(this.value)}
aria-valuemax=${this.max}
aria-labelledby="label"
aria-describedby="description"
aria-describedby="hint"
tabindex=${this.disabled ? -1 : 0}
@blur=${this.handleBlur}
@focus=${this.handleFocus}