[Bug][a11y]: ColorSlider fails to announce new value on change after a keydown event

[majornista]

Code of conduct

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

Impacted component(s)

ColorSlider

Expected behavior

Using VoiceOver, ColorSlider should announce the new value after using ArrowRight/ArrowLeft/ArrowUp/ArrowDown.

Actual behavior

Using VoiceOver, ColorSlider fails to announce the new value after using ArrowRight/ArrowLeft/ArrowUp/ArrowDown.

Screenshots

No response

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

1. With VoiceOver running on MacOS, go to https://opensource.adobe.com/spectrum-web-components/components/color-slider/#default
2. Move keyboard focus to the sp-color-slider instance under the heading "Default"
3. Use ArrowRight or ArrowUp to increment the value several steps.
4. Notice that VoiceOver fails to announce the new value.

Sample code that illustrates the problem

Possible solution:

1. Add aria-valuetext to the input at:
   

   spectrum-web-components/packages/color-slider/src/ColorSlider.ts

   Line 336 in a447ba2

   .value=${String(this.value)}

                .value=${String(this.value)}
                aria-valuetext=${`${Math.round(this.value)}°`}

2. Fix the sliderHandlePosition calculation in handleKeydown, so that we increment by the value of a step rather than 360/100, at:
   

   spectrum-web-components/packages/color-slider/src/ColorSlider.ts

   Lines 141 to 144 in a447ba2

   	this.sliderHandlePosition = Math.min(
   	100,
   	Math.max(0, this.sliderHandlePosition + delta)
   	);

   
   to

        const range = 360;
        const mult = 100 / range;
        this.sliderHandlePosition = Math.min(
            100,
            Math.max(0, this.sliderHandlePosition + delta * mult)
        );

Logs taken while reproducing problem

No response