[Bug][a11y]: Slider input aria-valuetext omits formatOptions for unit

[majornista]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

Slider, RangeSlider, SliderHandle

Expected behavior

The aria-valuetext attribute on the input[type="range"] element within the SliderHandle in the Slider shadowDom should include the _forcedUnit for units not included in Intl.NumberFormatOptions, like px or pc.

Possible fix:

1. Update the formattedValueForHandle method in HandleController.ts to include the _forcedUnit when it is defined on either the handle or this.host:

This:

spectrum-web-components/packages/slider/src/HandleController.ts

Lines 145 to 149 in f21cfa3

	public formattedValueForHandle(model: ModelValue): string {
	const { handle } = model;
	const numberFormat = handle.numberFormat ?? this.host.numberFormat;
	return handle.getAriaHandleText(model.value, numberFormat);
	}

Becomes this:

    public formattedValueForHandle(model: ModelValue): string {
        const { handle } = model;
        const numberFormat = handle.numberFormat ?? this.host.numberFormat;
        const _forcedUnit = handle._forcedUnit === '' ? this.host._forcedUnit : handle._forcedUnit;
        return handle.getAriaHandleText(model.value, numberFormat) + _forcedUnit;
    }

2. Update the getAriaValueText in Slider.ts to remove the concatenation of this._forcedUnit to each of the values.

This:

spectrum-web-components/packages/slider/src/Slider.ts

Lines 120 to 128 in f21cfa3

	@property({ attribute: false })
	public getAriaValueText: (values: Map<string, string>) => string = (
	values
	) => {
	const valueArray = [...values.values()];
	if (valueArray.length === 2)
	return `${valueArray[0]}${this._forcedUnit} - ${valueArray[1]}${this._forcedUnit}`;
	return valueArray.join(`${this._forcedUnit}, `) + this._forcedUnit;
	};

Becomes this:

    @property({ attribute: false })
    public getAriaValueText: (values: Map<string, string>) => string = (
        values
    ) => {
        const valueArray = [...values.values()];
        if (valueArray.length === 2)
            return `${valueArray[0]} – ${valueArray[1]}`;
        return valueArray.join(', ');
    };

Actual behavior

While the _forcedUnit is included in the output element showing the value(s), the _forcedUnit gets omitted from the aria-valuetext attribute on the input[type="range"] within the shadowDom.

This can be reproduced if you inspect the shadowDom for the Units not included in Intl.NumberFormatOptions example.

Screenshots

No response

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

1. Go to '...'
2. Click on '....'
3. Scroll to '....'
4. Check console
5. See error

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response