fix(slider): Set up aria values for handles #2992

Triggered via pull request December 26, 2024 16:16

MarkoOleksiyenko

synchronize #1073

MarkoOleksiyenko:slider-a11y

Status Failure

Total duration 6m 25s

Artifacts –

pr.yml

on: pull_request

Matrix: e2e-tests / e2e-tests

build / build

6m 14s

Matrix: validate-os / validate-os

e2e-tests / merge-reports

Annotations

28 errors, 2 warnings, and 1 notice

[singleBrowser:react:chromium] › samplesMarkup.singlebrowser-e2e-spec.ts:33:4 › Samples markup consistency check › Sample bootstrap/slider/custom › should have a consistent markup: e2e/samplesMarkup.singlebrowser-e2e-spec.ts#L38

1) [singleBrowser:react:chromium] › samplesMarkup.singlebrowser-e2e-spec.ts:33:4 › Samples markup consistency check › Sample bootstrap/slider/custom › should have a consistent markup Error: expect(string).toMatchSnapshot(expected) <body> <div class="container p-3" id="root" > <h2> "Slider with custom labels" </h2> <div class="au-custom-slider-container au-slider au-slider-horizontal" > <div class="au-slider-progress" style="left: 0%; width: 70%; height: 100%;" /> <div class="au-slider-clickable-area" /> <div class="au-slider-label au-slider-label-min" > "0%" </div> <div class="au-slider-label au-slider-label-max" > "100%" </div> <button aria-label="70Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" aria-valuetext="70" class="au-slider-handle au-slider-handle-horizontal" role="slider" style="left: 70%;" /> <div class="au-slider-label au-slider-label-now" style="left: 70%;" > "70%" </div> </div> <hr /> <h2> "Slider with custom handle" </h2> <div class="au-custom-slider-container au-slider au-slider-horizontal" > <div class="au-slider-progress" style="left: 0%; width: 50%; height: 100%;" /> <div class="au-slider-clickable-area" /> <div class="au-slider-label au-slider-label-min" > "0" </div> <div class="au-slider-label au-slider-label-max" > "100" </div> <button aria-label="50Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50" class="au-slider-handle au-slider-handle-horizontal custom-handle" role="slider" style="left: 50%;" > <svg fill="var(--bs-slider-handle-color)" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" > <path d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" stroke-linecap="round" stroke-linejoin="round" /> </svg> </button> <div class="au-slider-label au-slider-label-now" style="left: 50%;" > "50" </div> </div> </div> </body> Expected: /home/runner/work/AgnosUI/AgnosUI/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-slider-custom.html Received: /home/runner/work/AgnosUI/AgnosUI/test-results/samplesMarkup.singlebrowse-04df8-ld-have-a-consistent-markup-singleBrowser-react-chromium/bootstrap-slider-custom-actual.html 36 | await expect.poll(async () => (await page.locator('#root').innerHTML()).trim().length).toBeGreaterThan(0); 37 | await samplesExtraAction[sampleKey]?.(page); > 38 | expect(await htmlSnapshot(page.locator('body'))).toMatchSnapshot(`${sampleKey.toLowerCase()}.html`); | ^ 39 | }); 40 | }); 41 | } at /home/runner/work/AgnosUI/AgnosUI/e2e/samplesMarkup.singlebrowser-e2e-spec.ts:38:54

1) [singleBrowser:react:chromium] › samplesMarkup.singlebrowser-e2e-spec.ts:33:4 › Samples markup consistency check › Sample bootstrap/slider/custom › should have a consistent markup Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(string).toMatchSnapshot(expected) <body> <div class="container p-3" id="root" > <h2> "Slider with custom labels" </h2> <div class="au-custom-slider-container au-slider au-slider-horizontal" > <div class="au-slider-progress" style="left: 0%; width: 70%; height: 100%;" /> <div class="au-slider-clickable-area" /> <div class="au-slider-label au-slider-label-min" > "0%" </div> <div class="au-slider-label au-slider-label-max" > "100%" </div> <button aria-label="70Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" aria-valuetext="70" class="au-slider-handle au-slider-handle-horizontal" role="slider" style="left: 70%;" /> <div class="au-slider-label au-slider-label-now" style="left: 70%;" > "70%" </div> </div> <hr /> <h2> "Slider with custom handle" </h2> <div class="au-custom-slider-container au-slider au-slider-horizontal" > <div class="au-slider-progress" style="left: 0%; width: 50%; height: 100%;" /> <div class="au-slider-clickable-area" /> <div class="au-slider-label au-slider-label-min" > "0" </div> <div class="au-slider-label au-slider-label-max" > "100" </div> <button aria-label="50Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50" class="au-slider-handle au-slider-handle-horizontal custom-handle" role="slider" style="left: 50%;" > <svg fill="var(--bs-slider-handle-color)" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" > <path d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" stroke-linecap="round" stroke-linejoin="round" /> </svg> </button> <div class="au-slider-label au-slider-label-now" style="left: 50%;" > "50" </div> </div> </div> </body> Expected: /home/runner/work/AgnosUI/AgnosUI/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-slider-custom.html Received: /home/runner/work/AgnosUI/AgnosUI/test-results/samplesMarkup.singlebrowse-04df8-ld-have-a-consistent-markup-singleBrowser-react-chromium-retry1/bootstrap-slider-custom-actual.html 36 | await expect.poll(async () => (await page.locator('#root').innerHTML()).trim().length).toBeGreaterThan(0); 37 | await samplesExtraAction[sampleKey]?.(page); > 38 | expect(await htmlSnapshot(page.locator('body'))).toMatchSnapshot(`${sampleKey.toLowerCase()}.html`); | ^ 39 | }); 40 | }); 41 | } at /home/runner/work/AgnosUI/AgnosUI/e2e/samplesMarkup.singlebrowser-e2e-spec.ts:38:54

[singleBrowser:react:chromium] › samplesMarkup.singlebrowser-e2e-spec.ts:33:4 › Samples markup consistency check › Sample daisyui/slider/default › should have a consistent markup: e2e/samplesMarkup.singlebrowser-e2e-spec.ts#L38

2) [singleBrowser:react:chromium] › samplesMarkup.singlebrowser-e2e-spec.ts:33:4 › Samples markup consistency check › Sample daisyui/slider/default › should have a consistent markup Error: expect(string).toMatchSnapshot(expected) <body> <div class="container mx-auto p-3" id="root" > <h2 class="mb-2 text-lg" > "DaisyUI Example" </h2> <input aria-label="20Value" class="au-slider au-slider-clickable-area au-slider-horizontal range" max="100" min="0" step="1" type="range" value="20" /> "Value: 20" </div> </body> Expected: /home/runner/work/AgnosUI/AgnosUI/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-slider-default.html Received: /home/runner/work/AgnosUI/AgnosUI/test-results/samplesMarkup.singlebrowse-78822-ld-have-a-consistent-markup-singleBrowser-react-chromium/daisyui-slider-default-actual.html 36 | await expect.poll(async () => (await page.locator('#root').innerHTML()).trim().length).toBeGreaterThan(0); 37 | await samplesExtraAction[sampleKey]?.(page); > 38 | expect(await htmlSnapshot(page.locator('body'))).toMatchSnapshot(`${sampleKey.toLowerCase()}.html`); | ^ 39 | }); 40 | }); 41 | } at /home/runner/work/AgnosUI/AgnosUI/e2e/samplesMarkup.singlebrowser-e2e-spec.ts:38:54

2) [singleBrowser:react:chromium] › samplesMarkup.singlebrowser-e2e-spec.ts:33:4 › Samples markup consistency check › Sample daisyui/slider/default › should have a consistent markup Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(string).toMatchSnapshot(expected) <body> <div class="container mx-auto p-3" id="root" > <h2 class="mb-2 text-lg" > "DaisyUI Example" </h2> <input aria-label="20Value" class="au-slider au-slider-clickable-area au-slider-horizontal range" max="100" min="0" step="1" type="range" value="20" /> "Value: 20" </div> </body> Expected: /home/runner/work/AgnosUI/AgnosUI/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/daisyui-slider-default.html Received: /home/runner/work/AgnosUI/AgnosUI/test-results/samplesMarkup.singlebrowse-78822-ld-have-a-consistent-markup-singleBrowser-react-chromium-retry1/daisyui-slider-default-actual.html 36 | await expect.poll(async () => (await page.locator('#root').innerHTML()).trim().length).toBeGreaterThan(0); 37 | await samplesExtraAction[sampleKey]?.(page); > 38 | expect(await htmlSnapshot(page.locator('body'))).toMatchSnapshot(`${sampleKey.toLowerCase()}.html`); | ^ 39 | }); 40 | }); 41 | } at /home/runner/work/AgnosUI/AgnosUI/e2e/samplesMarkup.singlebrowser-e2e-spec.ts:38:54

[singleBrowser:svelte:chromium] › samplesMarkup.singlebrowser-e2e-spec.ts:33:4 › Samples markup consistency check › Sample bootstrap/slider/vertical › should have a consistent markup: e2e/samplesMarkup.singlebrowser-e2e-spec.ts#L38

3) [singleBrowser:svelte:chromium] › samplesMarkup.singlebrowser-e2e-spec.ts:33:4 › Samples markup consistency check › Sample bootstrap/slider/vertical › should have a consistent markup Error: expect(string).toMatchSnapshot(expected) <body> <div class="container p-3" id="root" > <div class="d-flex" style="height: 350px;" > <div class="col-6" style="height: 300px;" > <div class="au-slider au-slider-vertical my-0" > <div class="au-slider-progress" style="bottom: 10%; width: 100%; height: 30%;" /> <div class="au-slider-clickable-area-vertical" /> <div class="au-slider-label-vertical au-slider-label-vertical-min" > "0" </div> <div class="au-slider-label-vertical au-slider-label-vertical-max" > "100" </div> <button aria-label="10Value" aria-labelledby="" aria-orientation="vertical" aria-valuemax="100" aria-valuemin="0" aria-valuenow="10" aria-valuetext="10" class="au-slider-handle au-slider-handle-vertical" role="slider" style="top: 90%;" /> <div class="au-slider-label-vertical au-slider-label-vertical-now" style="top: 90%;" > "10" </div> <button aria-label="40Value" aria-labelledby="" aria-orientation="vertical" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" aria-valuetext="40" class="au-slider-handle au-slider-handle-vertical" role="slider" style="top: 60%;" /> <div class="au-slider-label-vertical au-slider-label-vertical-now" style="top: 60%;" > "40" </div> </div> <div class="mt-3" > "Form control values: 10, 40" </div> </div> <div class="col-6" style="height: 300px;" > <div class="au-slider au-slider-vertical my-0" > <div class="au-slider-progress" style="bottom: 0%; width: 100%; height: 40%;" /> <div class="au-slider-clickable-area-vertical" /> <div class="au-slider-label-vertical au-slider-label-vertical-min" > "0" </div> <div class="au-slider-label-vertical au-slider-label-vertical-max" > "100" </div> <button aria-label="40Value" aria-labelledby="" aria-orientation="vertical" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" aria-valuetext="40" class="au-slider-handle au-slider-handle-vertical" role="slider" style="top: 60%;" /> <div class="au-slider-label-vertical au-slider-label-vertical-now" style="top: 60%;" > "40" </div> </div> <div class="mt-3" > "From control value: 40" </div> </div> </div> </div> </body> Expected: /home/runner/work/AgnosUI/AgnosUI/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-slider-vertical.html Received: /home/runner/work/AgnosUI/AgnosUI/test-results/samplesMarkup.singlebrowse-6c341-ld-have-a-consistent-markup-singleBrowser-svelte-chromium/bootstrap-slider-vertical-actual.html 36 | await expect.poll(async () => (await page.locator('#root').innerHTML()).trim().lengt

3) [singleBrowser:svelte:chromium] › samplesMarkup.singlebrowser-e2e-spec.ts:33:4 › Samples markup consistency check › Sample bootstrap/slider/vertical › should have a consistent markup Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(string).toMatchSnapshot(expected) <body> <div class="container p-3" id="root" > <div class="d-flex" style="height: 350px;" > <div class="col-6" style="height: 300px;" > <div class="au-slider au-slider-vertical my-0" > <div class="au-slider-progress" style="bottom: 10%; width: 100%; height: 30%;" /> <div class="au-slider-clickable-area-vertical" /> <div class="au-slider-label-vertical au-slider-label-vertical-min" > "0" </div> <div class="au-slider-label-vertical au-slider-label-vertical-max" > "100" </div> <button aria-label="10Value" aria-labelledby="" aria-orientation="vertical" aria-valuemax="100" aria-valuemin="0" aria-valuenow="10" aria-valuetext="10" class="au-slider-handle au-slider-handle-vertical" role="slider" style="top: 90%;" /> <div class="au-slider-label-vertical au-slider-label-vertical-now" style="top: 90%;" > "10" </div> <button aria-label="40Value" aria-labelledby="" aria-orientation="vertical" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" aria-valuetext="40" class="au-slider-handle au-slider-handle-vertical" role="slider" style="top: 60%;" /> <div class="au-slider-label-vertical au-slider-label-vertical-now" style="top: 60%;" > "40" </div> </div> <div class="mt-3" > "Form control values: 10, 40" </div> </div> <div class="col-6" style="height: 300px;" > <div class="au-slider au-slider-vertical my-0" > <div class="au-slider-progress" style="bottom: 0%; width: 100%; height: 40%;" /> <div class="au-slider-clickable-area-vertical" /> <div class="au-slider-label-vertical au-slider-label-vertical-min" > "0" </div> <div class="au-slider-label-vertical au-slider-label-vertical-max" > "100" </div> <button aria-label="40Value" aria-labelledby="" aria-orientation="vertical" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" aria-valuetext="40" class="au-slider-handle au-slider-handle-vertical" role="slider" style="top: 60%;" /> <div class="au-slider-label-vertical au-slider-label-vertical-now" style="top: 60%;" > "40" </div> </div> <div class="mt-3" > "From control value: 40" </div> </div> </div> </div> </body> Expected: /home/runner/work/AgnosUI/AgnosUI/e2e/samplesMarkup.singlebrowser-e2e-spec.ts-snapshots/bootstrap-slider-vertical.html Received: /home/runner/work/AgnosUI/AgnosUI/test-results/samplesMarkup.singlebrowse-6c341-ld-have-a-consistent-markup-singleBrowser-svelte-chromium-retry1/bootstrap-slider-vertical-actu

[singleBrowser:svelte:chromium] › samplesMarkup.singlebrowser-e2e-spec.ts:33:4 › Samples markup consistency check › Sample bootstrap/slider/right-to-left › should have a consistent markup: e2e/samplesMarkup.singlebrowser-e2e-spec.ts#L38

4) [singleBrowser:svelte:chromium] › samplesMarkup.singlebrowser-e2e-spec.ts:33:4 › Samples markup consistency check › Sample bootstrap/slider/right-to-left › should have a consistent markup Error: expect(string).toMatchSnapshot(expected) <body> <div class="container p-3" id="root" > <h2> "Horizontal slider" </h2> <div class="au-slider au-slider-horizontal" > <div class="au-slider-progress" style="right: 0%; width: 30%; height: 100%;" /> <div class="au-slider-clickable-area" /> <div class="au-slider-label au-slider-label-min au-slider-rtl" > "0" </div> <div class="au-slider-label au-slider-label-max au-slider-rtl" > "100" </div> <button aria-label="30Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" aria-valuetext="30" class="au-slider-handle au-slider-handle-horizontal" role="slider" style="left: 70%;" /> <div class="au-slider-label au-slider-label-now" style="left: 70%;" > "30" </div> </div> <br /> <div class="au-slider au-slider-horizontal" > <div class="au-slider-progress" style="right: 30%; width: 40%; height: 100%;" /> <div class="au-slider-clickable-area" /> <div class="au-slider-label au-slider-label-min au-slider-rtl" > "0" </div> <div class="au-slider-label au-slider-label-max au-slider-rtl" > "100" </div> <button aria-label="30Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" aria-valuetext="30" class="au-slider-handle au-slider-handle-horizontal" role="slider" style="left: 70%;" /> <div class="au-slider-label au-slider-label-now" style="left: 70%;" > "30" </div> <button aria-label="70Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" aria-valuetext="70" class="au-slider-handle au-slider-handle-horizontal" role="slider" style="left: 30%;" /> <div class="au-slider-label au-slider-label-now" style="left: 30%;" > "70" </div> </div> <h2> "Vertical slider" </h2> <div class="d-flex" style="height: 350px;" > <div class="col-6" style="height: 300px;" > <div class="au-slider au-slider-vertical my-0" > <div class="au-slider-progress" style="top: 0%; width: 100%; height: 30%;" /> <div class="au-slider-clickable-area-vertical" /> <div class="au-slider-label-vertical au-slider-label-vertical-min au-slider-rtl" > "0" </div> <div class="au-slider-label-vertical au-slider-label-vertical-max au-slider-rtl" > "100" </div> <button aria-label="30Value" aria-labelledby="" aria-orientation="vertical" aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" aria-valuetext="30" class="au-slider-handle au-slider-handle-vertical" role="slider" style="top: 30%;" /> <div class="au-slider-label-vertical au-slider-label-vertic

4) [singleBrowser:svelte:chromium] › samplesMarkup.singlebrowser-e2e-spec.ts:33:4 › Samples markup consistency check › Sample bootstrap/slider/right-to-left › should have a consistent markup Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(string).toMatchSnapshot(expected) <body> <div class="container p-3" id="root" > <h2> "Horizontal slider" </h2> <div class="au-slider au-slider-horizontal" > <div class="au-slider-progress" style="right: 0%; width: 30%; height: 100%;" /> <div class="au-slider-clickable-area" /> <div class="au-slider-label au-slider-label-min au-slider-rtl" > "0" </div> <div class="au-slider-label au-slider-label-max au-slider-rtl" > "100" </div> <button aria-label="30Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" aria-valuetext="30" class="au-slider-handle au-slider-handle-horizontal" role="slider" style="left: 70%;" /> <div class="au-slider-label au-slider-label-now" style="left: 70%;" > "30" </div> </div> <br /> <div class="au-slider au-slider-horizontal" > <div class="au-slider-progress" style="right: 30%; width: 40%; height: 100%;" /> <div class="au-slider-clickable-area" /> <div class="au-slider-label au-slider-label-min au-slider-rtl" > "0" </div> <div class="au-slider-label au-slider-label-max au-slider-rtl" > "100" </div> <button aria-label="30Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" aria-valuetext="30" class="au-slider-handle au-slider-handle-horizontal" role="slider" style="left: 70%;" /> <div class="au-slider-label au-slider-label-now" style="left: 70%;" > "30" </div> <button aria-label="70Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" aria-valuetext="70" class="au-slider-handle au-slider-handle-horizontal" role="slider" style="left: 30%;" /> <div class="au-slider-label au-slider-label-now" style="left: 30%;" > "70" </div> </div> <h2> "Vertical slider" </h2> <div class="d-flex" style="height: 350px;" > <div class="col-6" style="height: 300px;" > <div class="au-slider au-slider-vertical my-0" > <div class="au-slider-progress" style="top: 0%; width: 100%; height: 30%;" /> <div class="au-slider-clickable-area-vertical" /> <div class="au-slider-label-vertical au-slider-label-vertical-min au-slider-rtl" > "0" </div> <div class="au-slider-label-vertical au-slider-label-vertical-max au-slider-rtl" > "100" </div> <button aria-label="30Value" aria-labelledby="" aria-orientation="vertical" aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" aria-valuetext="30" class="au-slider-handle au-slider-handle-vertical" role="slider" style="top:

[singleBrowser:svelte:chromium] › samplesMarkup.singlebrowser-e2e-spec.ts:33:4 › Samples markup consistency check › Sample bootstrap/slider/range › should have a consistent markup: e2e/samplesMarkup.singlebrowser-e2e-spec.ts#L38

5) [singleBrowser:svelte:chromium] › samplesMarkup.singlebrowser-e2e-spec.ts:33:4 › Samples markup consistency check › Sample bootstrap/slider/range › should have a consistent markup Error: expect(string).toMatchSnapshot(expected) <body> <div class="container p-3" id="root" > <h2> "Slider with form control" </h2> <div class="au-slider au-slider-horizontal" > <div class="au-slider-progress" style="left: 10%; width: 30%; height: 100%;" /> <div class="au-slider-progress" style="left: 40%; width: 10%; height: 100%;" /> <div class="au-slider-progress" style="left: 50%; width: 10%; height: 100%;" /> <div class="au-slider-progress" style="left: 60%; width: 30%; height: 100%;" /> <div class="au-slider-clickable-area" /> <div class="au-slider-label au-slider-label-min" > "0" </div> <div class="au-slider-label au-slider-label-max" > "100" </div> <button aria-label="10Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="10" aria-valuetext="10" class="au-slider-handle au-slider-handle-horizontal" role="slider" style="left: 10%;" /> <div class="au-slider-label au-slider-label-now" style="left: 10%;" > "10" </div> <button aria-label="40Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" aria-valuetext="40" class="au-slider-handle au-slider-handle-horizontal" role="slider" style="left: 40%;" /> <div class="au-slider-label au-slider-label-now" style="left: 40%;" > "40" </div> <button aria-label="50Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50" class="au-slider-handle au-slider-handle-horizontal" role="slider" style="left: 50%;" /> <div class="au-slider-label au-slider-label-now" style="left: 50%;" > "50" </div> <button aria-label="60Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" aria-valuetext="60" class="au-slider-handle au-slider-handle-horizontal" role="slider" style="left: 60%;" /> <div class="au-slider-label au-slider-label-now" style="left: 60%;" > "60" </div> <button aria-label="90Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" aria-valuetext="90" class="au-slider-handle au-slider-handle-horizontal" role="slider" style="left: 90%;" /> <div class="au-slider-label au-slider-label-now" style="left: 90%;" > "90" </div> </div> "Form control values: 10, 40, 50, 60, 90" <hr /> <h2> "Slider with values" </h2> <div class="au-slider au-slider-horizontal" > <div class="au-slider-progress" style="left: 10%; width: 30%; height: 100%;" /> <div class="au-slider-clickable-area" /> <div class="au-slider-label au-slider-label-min" > "0" </div> <div class="au-slider-label au-slider-label-max"

5) [singleBrowser:svelte:chromium] › samplesMarkup.singlebrowser-e2e-spec.ts:33:4 › Samples markup consistency check › Sample bootstrap/slider/range › should have a consistent markup Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(string).toMatchSnapshot(expected) <body> <div class="container p-3" id="root" > <h2> "Slider with form control" </h2> <div class="au-slider au-slider-horizontal" > <div class="au-slider-progress" style="left: 10%; width: 30%; height: 100%;" /> <div class="au-slider-progress" style="left: 40%; width: 10%; height: 100%;" /> <div class="au-slider-progress" style="left: 50%; width: 10%; height: 100%;" /> <div class="au-slider-progress" style="left: 60%; width: 30%; height: 100%;" /> <div class="au-slider-clickable-area" /> <div class="au-slider-label au-slider-label-min" > "0" </div> <div class="au-slider-label au-slider-label-max" > "100" </div> <button aria-label="10Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="10" aria-valuetext="10" class="au-slider-handle au-slider-handle-horizontal" role="slider" style="left: 10%;" /> <div class="au-slider-label au-slider-label-now" style="left: 10%;" > "10" </div> <button aria-label="40Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" aria-valuetext="40" class="au-slider-handle au-slider-handle-horizontal" role="slider" style="left: 40%;" /> <div class="au-slider-label au-slider-label-now" style="left: 40%;" > "40" </div> <button aria-label="50Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" aria-valuetext="50" class="au-slider-handle au-slider-handle-horizontal" role="slider" style="left: 50%;" /> <div class="au-slider-label au-slider-label-now" style="left: 50%;" > "50" </div> <button aria-label="60Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" aria-valuetext="60" class="au-slider-handle au-slider-handle-horizontal" role="slider" style="left: 60%;" /> <div class="au-slider-label au-slider-label-now" style="left: 60%;" > "60" </div> <button aria-label="90Value" aria-labelledby="" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" aria-valuetext="90" class="au-slider-handle au-slider-handle-horizontal" role="slider" style="left: 90%;" /> <div class="au-slider-label au-slider-label-now" style="left: 90%;" > "90" </div> </div> "Form control values: 10, 40, 50, 60, 90" <hr /> <h2> "Slider with values" </h2> <div class="au-slider au-slider-horizontal" > <div class="au-slider-progress" style="left: 10%; width: 30%; height: 100%;" /> <div class="au-slider-clickable-area" /> <div class="au-slider-label au-slider-label-min" >

e2e-tests / Test (6/10)