Skip to content

feat: add accessibleNameStart and accessibleNameEnd to range-slider #11060

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
web-padawan merged 1 commit into from
Feb 5, 2026
Merged

feat: add accessibleNameStart and accessibleNameEnd to range-slider #11060

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions packages/slider/src/vaadin-range-slider.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,20 @@ declare class RangeSlider extends FieldMixin(SliderMixin(FocusMixin(ThemableMixi
*/
value: number[];

/**
* Custom accessible name for the start (minimum) input.
* When not set, defaults to "${label} min" or "min" if no label.
* @attr {string} accessible-name-start
*/
accessibleNameStart: string | null | undefined;

/**
* Custom accessible name for the end (maximum) input.
* When not set, defaults to "${label} max" or "max" if no label.
* @attr {string} accessible-name-end
*/
accessibleNameEnd: string | null | undefined;

addEventListener<K extends keyof RangeSliderEventMap>(
type: K,
listener: (this: RangeSlider, ev: RangeSliderEventMap[K]) => void,
Expand Down
25 changes: 25 additions & 0 deletions packages/slider/src/vaadin-range-slider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,24 @@ class RangeSlider extends FieldMixin(
notify: true,
sync: true,
},

/**
* Custom accessible name for the start (minimum) input.
* When not set, defaults to "${label} min" or "min" if no label.
* @attr {string} accessible-name-start
*/
accessibleNameStart: {
type: String,
},

/**
* Custom accessible name for the end (maximum) input.
* When not set, defaults to "${label} max" or "max" if no label.
* @attr {string} accessible-name-end
*/
accessibleNameEnd: {
type: String,
},
};
}

Expand Down Expand Up @@ -277,6 +295,7 @@ class RangeSlider extends FieldMixin(
type="range"
id="${this.__inputId0}"
slot="input"
aria-label="${this.accessibleNameStart || this.__getAriaLabel('min')}"
.min="${min}"
.max="${max}"
.step="${step}"
Expand All @@ -291,6 +310,7 @@ class RangeSlider extends FieldMixin(
type="range"
id="${this.__inputId1}"
slot="input"
aria-label="${this.accessibleNameEnd || this.__getAriaLabel('max')}"
.min="${min}"
.max="${max}"
.step="${step}"
Expand Down Expand Up @@ -364,6 +384,11 @@ class RangeSlider extends FieldMixin(
this.toggleAttribute('end-focused', isElementFocused(this._inputElements[1]));
}

/** @private */
__getAriaLabel(suffix) {
return this.label ? `${this.label} ${suffix}` : suffix;
}

/** @private */
__commitValue() {
this.value = [...this.__value];
Expand Down
94 changes: 94 additions & 0 deletions packages/slider/test/dom/__snapshots__/range-slider.test.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export const snapshots = {};
snapshots["vaadin-range-slider host default"] =
`<vaadin-range-slider>
<input
aria-label="min"
id="slider-3"
max="100"
min="0"
Expand All @@ -13,6 +14,7 @@ snapshots["vaadin-range-slider host default"] =
type="range"
>
<input
aria-label="max"
id="slider-4"
max="100"
min="0"
Expand All @@ -39,6 +41,7 @@ snapshots["vaadin-range-slider host default"] =
snapshots["vaadin-range-slider host value"] =
`<vaadin-range-slider>
<input
aria-label="min"
id="slider-3"
max="100"
min="0"
Expand All @@ -48,6 +51,7 @@ snapshots["vaadin-range-slider host value"] =
type="range"
>
<input
aria-label="max"
id="slider-4"
max="100"
min="0"
Expand All @@ -74,6 +78,7 @@ snapshots["vaadin-range-slider host value"] =
snapshots["vaadin-range-slider host min"] =
`<vaadin-range-slider>
<input
aria-label="min"
id="slider-3"
max="100"
min="20"
Expand All @@ -83,6 +88,7 @@ snapshots["vaadin-range-slider host min"] =
type="range"
>
<input
aria-label="max"
id="slider-4"
max="100"
min="20"
Expand All @@ -109,6 +115,7 @@ snapshots["vaadin-range-slider host min"] =
snapshots["vaadin-range-slider host max"] =
`<vaadin-range-slider>
<input
aria-label="min"
id="slider-3"
max="80"
min="0"
Expand All @@ -118,6 +125,7 @@ snapshots["vaadin-range-slider host max"] =
type="range"
>
<input
aria-label="max"
id="slider-4"
max="80"
min="0"
Expand All @@ -144,6 +152,7 @@ snapshots["vaadin-range-slider host max"] =
snapshots["vaadin-range-slider host step"] =
`<vaadin-range-slider>
<input
aria-label="min"
id="slider-3"
max="100"
min="0"
Expand All @@ -153,6 +162,7 @@ snapshots["vaadin-range-slider host step"] =
type="range"
>
<input
aria-label="max"
id="slider-4"
max="100"
min="0"
Expand Down Expand Up @@ -182,6 +192,7 @@ snapshots["vaadin-range-slider host disabled"] =
disabled=""
>
<input
aria-label="min"
disabled=""
id="slider-3"
max="100"
Expand All @@ -192,6 +203,7 @@ snapshots["vaadin-range-slider host disabled"] =
type="range"
>
<input
aria-label="max"
disabled=""
id="slider-4"
max="100"
Expand Down Expand Up @@ -222,6 +234,7 @@ snapshots["vaadin-range-slider host label"] =
has-label=""
>
<input
aria-label="Label min"
id="slider-3"
max="100"
min="0"
Expand All @@ -231,6 +244,7 @@ snapshots["vaadin-range-slider host label"] =
type="range"
>
<input
aria-label="Label max"
id="slider-4"
max="100"
min="0"
Expand Down Expand Up @@ -261,6 +275,7 @@ snapshots["vaadin-range-slider host helper"] =
has-helper=""
>
<input
aria-label="min"
id="slider-3"
max="100"
min="0"
Expand All @@ -270,6 +285,7 @@ snapshots["vaadin-range-slider host helper"] =
type="range"
>
<input
aria-label="max"
id="slider-4"
max="100"
min="0"
Expand Down Expand Up @@ -305,6 +321,7 @@ snapshots["vaadin-range-slider host required"] =
required=""
>
<input
aria-label="min"
id="slider-3"
max="100"
min="0"
Expand All @@ -314,6 +331,7 @@ snapshots["vaadin-range-slider host required"] =
type="range"
>
<input
aria-label="max"
id="slider-4"
max="100"
min="0"
Expand Down Expand Up @@ -344,6 +362,7 @@ snapshots["vaadin-range-slider host error"] =
invalid=""
>
<input
aria-label="min"
id="slider-3"
max="100"
min="0"
Expand All @@ -353,6 +372,7 @@ snapshots["vaadin-range-slider host error"] =
type="range"
>
<input
aria-label="max"
id="slider-4"
max="100"
min="0"
Expand Down Expand Up @@ -680,3 +700,77 @@ snapshots["vaadin-range-slider shadow max < value"] =
`;
/* end snapshot vaadin-range-slider shadow max < value */

snapshots["vaadin-range-slider host accessibleNameStart"] =
`<vaadin-range-slider>
<input
aria-label="Custom Start"
id="slider-3"
max="100"
min="0"
slot="input"
step="1"
tabindex="0"
type="range"
>
<input
aria-label="max"
id="slider-4"
max="100"
min="0"
slot="input"
step="1"
tabindex="0"
type="range"
>
<label
id="label-vaadin-range-slider-0"
slot="label"
>
</label>
<div
hidden=""
id="error-message-vaadin-range-slider-2"
slot="error-message"
>
</div>
</vaadin-range-slider>
`;
/* end snapshot vaadin-range-slider host accessibleNameStart */

snapshots["vaadin-range-slider host accessibleNameEnd"] =
`<vaadin-range-slider>
<input
aria-label="min"
id="slider-3"
max="100"
min="0"
slot="input"
step="1"
tabindex="0"
type="range"
>
<input
aria-label="Custom End"
id="slider-4"
max="100"
min="0"
slot="input"
step="1"
tabindex="0"
type="range"
>
<label
id="label-vaadin-range-slider-0"
slot="label"
>
</label>
<div
hidden=""
id="error-message-vaadin-range-slider-2"
slot="error-message"
>
</div>
</vaadin-range-slider>
`;
/* end snapshot vaadin-range-slider host accessibleNameEnd */

12 changes: 12 additions & 0 deletions packages/slider/test/dom/range-slider.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,18 @@ describe('vaadin-range-slider', () => {
await expect(slider).dom.to.equalSnapshot();
});

it('accessibleNameStart', async () => {
slider.accessibleNameStart = 'Custom Start';
await nextUpdate(slider);
await expect(slider).dom.to.equalSnapshot();
});

it('accessibleNameEnd', async () => {
slider.accessibleNameEnd = 'Custom End';
await nextUpdate(slider);
await expect(slider).dom.to.equalSnapshot();
});

it('disabled', async () => {
slider.disabled = true;
await expect(slider).dom.to.equalSnapshot();
Expand Down