Fail
Unable to find an accessible element with the role "button" and name "go slide 2"
Here are the accessible roles:
region:
Name "carousel":
<div
aria-label="carousel"
class="va-carousel va-carousel--transition"
role="region"
style="height: 300px;"
/>
--------------------------------------------------
button:
Name "go slide {index}":
<button
aria-disabled="false"
aria-label="go slide {index}"
class="va-button va-button--round va-button--normal"
style="border-color: transparent; color: rgb(255, 255, 255); background: transparent; --795b243d: #154EC1; --4626c5e4: 1; --5012b89e: transparent; --30bb90d9: 0;"
tabindex="0"
type="button"
/>
Name "go slide {index}":
<button
aria-disabled="false"
aria-label="go slide {index}"
class="va-button va-button--round va-button--normal"
style="border-color: transparent; color: rgb(38, 40, 36); background: transparent; --795b243d: hsla(192,15%,94%,0.7); --4626c5e4: 1; --5012b89e: transparent; --30bb90d9: 0;"
tabindex="0"
type="button"
/>
Name "go slide {index}":
<button
aria-disabled="false"
aria-label="go slide {index}"
class="va-button va-button--round va-button--normal"
style="border-color: transparent; color: rgb(38, 40, 36); background: transparent; --795b243d: hsla(192,15%,94%,0.7); --4626c5e4: 1; --5012b89e: transparent; --30bb90d9: 0;"
tabindex="0"
type="button"
/>
--------------------------------------------------
list:
Name "":
<div
class="va-carousel__slides"
role="list"
style="transform: translateX(0%);"
/>
--------------------------------------------------
listitem:
Name "slide {index} of {length}":
<div
aria-current="true"
aria-hidden="false"
aria-label="slide {index} of {length}"
class="va-carousel__slide"
role="listitem"
/>
--------------------------------------------------region:
Name "carousel":
<div
aria-label="carousel"
class="va-carousel va-carousel--transition"
role="region"
style="height: 300px;"
/>
--------------------------------------------------
list:
Name "":
<div
class="va-carousel__slides"
role="list"
style="transform: translateX(0%);"
/>
--------------------------------------------------
listitem:
Name "slide {index} of {length}":
<div
aria-current="true"
aria-hidden="false"
aria-label="slide {index} of {length}"
class="va-carousel__slide"
role="listitem"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<div
data-v-app=""
id="storybook-root"
>
[true]
<div
aria-label="carousel"
class="va-carousel va-carousel--transition"
role="region"
style="height: 300px;"
>
<div
class="va-carousel__indicators"
>
<div
class="va-carousel__indicator va-carousel__indicator--active"
>
<div
class="va-hover"
>
<button
aria-disabled="false"
aria-label="go slide {index}"
class="va-button va-button--round va-button--normal"
style="border-color: transparent; color: rgb(255, 255, 255); background: transparent; --795b243d: #154EC1; --4626c5e4: 1; --5012b89e: transparent; --30bb90d9: 0;"
tabindex="0"
type="button"
>
<span
class="va-button__content"
>
1
</span>
</button>
</div>
</div>
<div
class="va-carousel__indicator"
>
<div
class="va-hover"
>
<button
aria-disabled="false"
aria-label="go slide {index}"
class="va-button va-button--round va-button--normal"
style="border-color: transparent; color: rgb(38, 40, 36); background: transparent; --795b243d: hsla(192,15%,94%,0.7); --4626c5e4: 1; --5012b89e: transparent; --30bb90d9: 0;"
tabindex="0"
type="button"
>
<span
class="va-button__content"
>
2
</span>
</button>
</div>
</div>
<div
class="va-carousel__indicator"
>
<div
class="va-hover"
>
<button
aria-disabled="false"
aria-label="go slide {index}"
class="va-button va-button--round va-button--normal"
style="border-color: transparent; color: rgb(38, 40, 36); background: transparent; --795b243d: hsla(192,15%,94%,0.7); --4626c5e4: 1; --5012b89e: transparent; --30bb90d9: 0;"
tabindex="0"
type="button"
>
<span
class="va-button__content"
>
3
</span>
</button>
</div>
</div>
</div>
<div
class="va-carousel__content"
>
<div
class="va-carousel__slides"
role="list"
style="transform: translateX(0%);"
>
<div
aria-current="true"
aria-hidden="false"
aria-label="slide {index} of {length}"
class="va-carousel__slide"
role="listitem"
>
<div
class="va-aspect-ratio va-image"
style="--22aaab94: cover; --7464ced2: undefined;"
>
<picture
aria-busy="true"
class="va-image__content"
style="display: none;"
>
<img
alt=""
draggable="false"
fetchpriority="auto"
sizes=""
src="https://picsum.photos/id/10/2500"
srcset=""
title=""
/>
</picture>
</div>
</div>
<div
aria-current="false"
aria-hidden="true"
aria-label="slide {index} of {length}"
class="va-carousel__slide"
role="listitem"
>
<div
class="va-aspect-ratio va-image"
style="--22aaab94: cover; --7464ced2: undefined;"
>
<picture
aria-busy="true"
class="va-image__content"
style="display: none;"
>
<img
alt=""
draggable="false"
fetchpriority="auto"
sizes=""
src="https://picsum.photos/id/14/2500"
srcset=""
title=""
/>
</picture>
</div>
</div>
<div
aria-current="false"
aria-hidden="true"
aria-label="slide {index} of {length}"
class="va-carousel__slide"
role="listitem"
>
<div
class="va-aspect-ratio va-image"
style="--22aaab94: cover; --7464ced2: undefined;"
>
<picture
aria-busy="true"
class="va-image__content"
style="display: none;"
>
<img
alt=""
draggable="false"
fetchpriority="auto"
sizes=""
src="https://picsum.photos/id/18/2500"
srcset=""
title=""
/>
</picture>
</div>
</div>
<div
aria-current="false"
aria-hidden="true"
aria-label="slide {index} of {length}"
class="va-carousel__slide"
role="listitem"
>
<div
class="va-aspect-ratio va-image"
style="--22aaab94: cover; --7464ced2: undefined;"
>
<picture
aria-busy="true"
class="va-image__content"
style="display: none;"
>
<img
alt=""
draggable="false"
fetchpriority="auto"
sizes=""
src="https://picsum.photos/id/10/2500"
srcset=""
title=""
/>
</picture>
</div>
</div>
</div>
</div>
</div>
[false]
<div
aria-label="carousel"
class="va-carousel va-carousel--transition"
role="region"
style="height: 300px;"
>
<div
class="va-carousel__content"
>
<div
class="va-carousel__slides"
role="list"
style="transform: translateX(0%);"
>
<div
aria-current="true"
aria-hidden="false"
aria-label="slide {index} of {length}"
class="va-carousel__slide"
role="listitem"
>
<div
class="va-aspect-ratio va-image"
style="--22aaab94: cover; --7464ced2: undefined;"
>
<picture
aria-busy="true"
class="va-image__content"
style="display: none;"
>
<img
alt=""
draggable="false"
fetchpriority="auto"
sizes=""
src="https://picsum.photos/id/10/2500"
srcset=""
title=""
/>
</picture>
</div>
</div>
<div
aria-current="false"
aria-hidden="true"
aria-label="slide {index} of {length}"
class="va-carousel__slide"
role="listitem"
>
<div
class="va-aspect-ratio va-image"
style="--22aaab94: cover; --7464ced2: undefined;"
>
<picture
aria-busy="true"
class="va-image__content"
style="display: none;"
>
<img
alt=""
draggable="false"
fetchpriority="auto"
sizes=""
src="https://picsum.photos/id/14/2500"
srcset=""
title=""
/>
</picture>
</div>
</div>
<div
aria-current="false"
aria-hidden="true"
aria-label="slide {index} of {length}"
class="va-carousel__slide"
role="listitem"
>
<div
class="va-aspect-ratio va-image"
style="--22aaab94: cover; --7464ced2: undefined;"
>
<picture
aria-busy="true"
class="va-image__content"
style="display: none;"
>
<img
alt=""
draggable="false"
fetchpriority="auto"
sizes=""
src="https://picsum.photos/id/18/2500"
srcset=""
title=""
/>
</picture>
</div>
</div>
<div
aria-current="false"
aria-hidden="true"
aria-label="slide {index} of {length}"
class="va-carousel__slide"
role="listitem"
>
<div
class="va-aspect-ratio va-image"
style="--22aaab94: cover; --7464ced2: undefined;"
>
<picture
aria-busy="true"
class="va-image__content"
style="display: none;"
>
<img
alt=""
draggable="false"
fetchpriority="auto"
sizes=""
src="https://picsum.photos/id/10/2500"
srcset=""
title=""
/>
</picture>
</div>
</div>
</div>
</div>
</div>
</div>View in Storybook
Chrome 1211168x624
Linux Linux Ubuntu 20.04.4
083a39 on develop
Caught exception in
play functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
Error: ignoredException
at https://64d608ab34b67e621ab50cfd-zvtprtknyw.capture-loopback.chromatic.com/sb-preview/runtime.js:4:97720