spectrum-web-components
spectrum-web-components copied to clipboard
[Bug][a11y]: Slider editable NumberField labeled twice
Code of conduct
- [X] I agree to follow this project's code of conduct.
Impacted component(s)
Slider, FieldLabel, NumberField
Expected behavior
The NumberField that displays in the shadowDom for the editable
variant of a Slider should only include the textContent
for its label
once as its aria-label
.
A possible solution for this would be to deduplicate within the get labelText()
method in FieldLabel, as follows:
private get labelText(): string | undefined {
const assignedNodes = this.slotEl.assignedNodes({ flatten: true });
if (!assignedNodes.length) {
return undefined;
}
const labelText = assignedNodes.map((node) =>
(node.textContent || /* c8 ignore next */ '').trim()
)
/** deduplicate and omit empty nodes */
.filter(
(textContent, index, array) => (
textContent.length &&
array.findIndex((item) => item === textContent) === index
)
);
return labelText.join(' ');
}
Actual behavior
On https://opensource.adobe.com/spectrum-web-components/components/slider/#editable, the NumberField that displays in the shadowDom for the editable
variant of a Slider repeats the textContent
for its label
twice in its aria-label
.
Rendered <sp-number-field>
element in shadowDom, where you can see aria-label=" Angle (editable) Angle (editable) "
on the input
, follows:
<sp-number-field id="number-field" min="0" max="360" step="1" value="180" hide-stepper="" dir="ltr" type="text" step-modifier="10" autocomplete="off" focusable="" data-dashlane-shadowhost="true" data-dashlane-observed="true">
<!-- #shadow-root -->
<div id="textfield">
<!--?lit$812536239$-->
<!--?lit$812536239$-->
<!--?lit$812536239$-->
<!--?lit$812536239$-->
<!-- @ts-ignore -->
<input class="input" type="text" aria-describedby="sp-help-text-1" aria-label=" Angle (editable) Angle (editable) " placeholder="" autocomplete="off" inputmode="numeric" data-dashlane-rid="cde23094b63176a0" data-form-type="other">
<!--?lit$812536239$--><!--?-->
</div>
</sp-number-field>
Screenshots
No response
What browsers are you seeing the problem in?
No response
How can we reproduce this issue?
- Go to '...'
- Click on '....'
- Scroll to '....'
- Check console
- See error
Sample code that illustrates the problem
No response
Logs taken while reproducing problem
No response