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 previous slide": <button aria-disabled="false" aria-label="go previous slide" class="va-button va-button--normal va-button--icon-only" 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 next slide": <button aria-disabled="false" aria-label="go next slide" class="va-button va-button--normal va-button--icon-only" 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(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;" /> -------------------------------------------------- button: Name "go previous slide": <button aria-disabled="false" aria-label="go previous slide" class="va-button va-button--normal va-button--icon-only" 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 next slide": <button aria-disabled="false" aria-label="go next slide" class="va-button va-button--normal va-button--icon-only" 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(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" /> -------------------------------------------------- Ignored nodes: comments, script, style <div data-v-app="" id="storybook-root" > [true] - should slide <div aria-label="carousel" class="va-carousel va-carousel--transition" role="region" style="height: 300px;" > <div class="va-carousel__arrow va-carousel__arrow--left" > <div class="va-hover" > <button aria-disabled="false" aria-label="go previous slide" class="va-button va-button--normal va-button--icon-only" 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" > <i aria-hidden="true" class="va-icon material-icons va-button__left-icon" notranslate="" style="color: rgb(38, 40, 36); font-size: 18px; height: 18px; line-height: 18px;" > chevron_left </i> </span> </button> </div> </div> <div class="va-carousel__arrow va-carousel__arrow--right" > <div class="va-hover" > <button aria-disabled="false" aria-label="go next slide" class="va-button va-button--normal va-button--icon-only" 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" > <i aria-hidden="true" class="va-icon material-icons va-button__left-icon" notranslate="" style="color: rgb(38, 40, 36); font-size: 18px; height: 18px; line-height: 18px;" > chevron_right </i> </span> </button> </div> </div> <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" > ...View in Storybook
Chrome 121
1168x624
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