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;" /> -------------------------------------------------- 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 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" > [hover] <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> [none] <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="but...View in Storybook
Chrome 121
1168x948
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