Skip to content

Commit

Permalink
fix(slider): slider input aria-valuetext omits formatOptions for unit #…
Browse files Browse the repository at this point in the history 
…3340
  • Loading branch information
@majornista
majornista committed Jun 21, 2023
1 parent 6d5d6b3 commit 39e4d36
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 10 deletions.
8 changes: 7 additions & 1 deletion packages/slider/src/HandleController.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,13 @@ export class HandleController implements Controller {
public formattedValueForHandle(model: ModelValue): string {
const { handle } = model;
const numberFormat = handle.numberFormat ?? this.host.numberFormat;
return handle.getAriaHandleText(model.value, numberFormat);
const _forcedUnit =
handle._forcedUnit === ''
? this.host._forcedUnit
: handle._forcedUnit;
return (
handle.getAriaHandleText(model.value, numberFormat) + _forcedUnit
);
}

public get formattedValues(): Map<string, string> {
Expand Down
4 changes: 2 additions & 2 deletions packages/slider/src/Slider.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,8 +123,8 @@ export class Slider extends ObserveSlotText(SliderHandle, '') {
) => {
const valueArray = [...values.values()];
if (valueArray.length === 2)
return `${valueArray[0]}${this._forcedUnit} - ${valueArray[1]}${this._forcedUnit}`;
return valueArray.join(`${this._forcedUnit}, `) + this._forcedUnit;
return `${valueArray[0]} – ${valueArray[1]}`;
return valueArray.join(', ');
};

public override get ariaValueText(): string {
Expand Down
33 changes: 26 additions & 7 deletions packages/slider/stories/slider.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -537,11 +537,13 @@ export const TwoHandles = (args: StoryArgs = {}): TemplateResult => {
<sp-slider-handle
slot="handle"
name="min"
label="Minimum"
value="5"
></sp-slider-handle>
<sp-slider-handle
slot="handle"
name="max"
label="Maximum"
value="250"
></sp-slider-handle>
</sp-slider>
Expand Down Expand Up @@ -573,11 +575,13 @@ export const TwoHandlesPt = (args: StoryArgs = {}): TemplateResult => {
<sp-slider-handle
slot="handle"
name="min"
label="Minimum"
value="5"
></sp-slider-handle>
<sp-slider-handle
slot="handle"
name="max"
label="Maximum"
value="250"
></sp-slider-handle>
</sp-slider>
Expand All @@ -599,16 +603,25 @@ export const ThreeHandlesPc = (args: StoryArgs = {}): TemplateResult => {
max="255"
@input=${handleHandleEvent(args)}
@change=${handleHandleEvent(args)}
.formatOptions=${{
style: 'unit',
unit: 'pc',
}}
.formatOptions=${{ style: 'unit', unit: 'pc' }}
...=${spreadProps(args)}
>
Output Levels
<sp-slider-handle slot="handle" value="5"></sp-slider-handle>
<sp-slider-handle slot="handle" value="133"></sp-slider-handle>
<sp-slider-handle slot="handle" value="250"></sp-slider-handle>
<sp-slider-handle
slot="handle"
value="5"
label="Low"
></sp-slider-handle>
<sp-slider-handle
slot="handle"
value="133"
label="Mid"
></sp-slider-handle>
<sp-slider-handle
slot="handle"
value="250"
label="High"
></sp-slider-handle>
</sp-slider>
</div>
`;
Expand All @@ -632,19 +645,22 @@ export const ThreeHandlesOrdered = (args: StoryArgs = {}): TemplateResult => {
<sp-slider-handle
slot="handle"
name="low"
label="Low"
value="5"
max="next"
></sp-slider-handle>
<sp-slider-handle
slot="handle"
name="mid"
label="Mid"
value="100"
min="previous"
max="next"
></sp-slider-handle>
<sp-slider-handle
slot="handle"
name="high"
label="High"
value="250"
min="previous"
></sp-slider-handle>
Expand Down Expand Up @@ -785,12 +801,14 @@ export const ThreeHandlesComplex = (args: StoryArgs = {}): TemplateResult => {
<sp-slider-handle
slot="handle"
name="black"
label="Black"
value=${values.black}
.normalization=${blackNormalization}
></sp-slider-handle>
<sp-slider-handle
slot="handle"
name="gray"
label="Gray"
value="0.215"
min="0"
max="1"
Expand All @@ -801,6 +819,7 @@ export const ThreeHandlesComplex = (args: StoryArgs = {}): TemplateResult => {
<sp-slider-handle
slot="handle"
name="white"
label="White"
value=${values.white}
.normalization=${whiteNormalization}
></sp-slider-handle>
Expand Down
78 changes: 78 additions & 0 deletions packages/slider/test/slider.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -977,6 +977,84 @@ describe('Slider', () => {

expect(input.getAttribute('aria-valuetext')).to.equal('50');
});
it('supports units not included in Intl.NumberFormatOptions', async () => {
let el = await fixture<Slider>(
html`
<sp-slider value="50" min="0" max="100" format-options="{"style": "unit", "unit": "px"}"></sp-slider>
`
);

await elementUpdated(el);

const input = el.focusElement as HTMLInputElement;
await elementUpdated(el);

expect(input.getAttribute('aria-valuetext')).to.equal('50');

el = await fixture<Slider>(
html`
<sp-slider
value="5"
step="1"
min="0"
max="255"
format-options='{"style": "unit", "unit": "px"}'
>
<sp-slider-handle
slot="handle"
name="min"
label="Minimum"
value="5"
></sp-slider-handle>
<sp-slider-handle
slot="handle"
name="max"
label="Maximum"
value="250"
></sp-slider-handle>
</sp-slider>
`
);

await elementUpdated(el);

let shadowRoot = el.shadowRoot as ShadowRoot;
expect(shadowRoot.querySelector('input#input-0[aria-valuetext="5px"]'))
.to.exist;
expect(
shadowRoot.querySelector('input#input-1[aria-valuetext="250px"]')
).to.exist;

el = await fixture<Slider>(
html`
<sp-slider value="5" step="1" min="0" max="255">
<sp-slider-handle
slot="handle"
name="min"
label="Minimum"
value="5"
format-options='{"style": "unit", "unit": "px"}'
></sp-slider-handle>
<sp-slider-handle
slot="handle"
name="max"
label="Maximum"
value="250"
format-options='{"style": "unit", "unit": "px"}'
></sp-slider-handle>
</sp-slider>
`
);

await elementUpdated(el);

shadowRoot = el.shadowRoot as ShadowRoot;
expect(shadowRoot.querySelector('input#input-0[aria-valuetext="5px"]'))
.to.exist;
expect(
shadowRoot.querySelector('input#input-1[aria-valuetext="250px"]')
).to.exist;
});
it('accepts min/max/value in the same timing', async () => {
const el = await fixture<Slider>(
html`
Expand Down

0 comments on commit 39e4d36

Please sign in to comment.