The baseline is thinner than the new snapshot (300x582 to 1184x582).
Fail
Unable to find an accessible element with the role "listbox"View in Storybook
Chrome 1401184x582
Linux Linux Ubuntu 20.04.4
d0c32b on syl-dark-banner
Caught exception in
play functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
TestingLibraryElementError: Unable to find an accessible element with the role "listbox"
Here are the accessible roles:
checkbox:
Name "Open":
<input
aria-checked="false"
aria-invalid="false"
class="_9hox6s4"
id=":r4:"
type="checkbox"
/>
--------------------------------------------------
log:
Name "":
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="_19bpjuy"
role="log"
/>
--------------------------------------------------
combobox:
Name "":
<input
aria-autocomplete="none"
aria-disabled="false"
aria-expanded="false"
aria-invalid="false"
aria-required="false"
autocomplete="off"
class="_h3lgrh1"
data-testid=""
id=":r6:"
placeholder="Select an item"
role="combobox"
type="text"
value=""
/>
--------------------------------------------------
button:
Name "Toggle listbox":
<button
aria-controls=":r5:"
aria-disabled="false"
aria-expanded="false"
aria-label="Toggle listbox"
class="_x2m8ga"
data-kind="tertiary"
tabindex="-1"
type="button"
/>
--------------------------------------------------log:
Name "":
<div
aria-live="assertive"
class="wbARegion"
data-testid="wbARegion-assertive0"
id="wbARegion-assertive0"
role="log"
/>
Name "":
<div
aria-live="assertive"
class="wbARegion"
data-testid="wbARegion-assertive1"
id="wbARegion-assertive1"
role="log"
/>
Name "":
<div
aria-live="polite"
class="wbARegion"
data-testid="wbARegion-polite0"
id="wbARegion-polite0"
role="log"
/>
Name "":
<div
aria-live="polite"
class="wbARegion"
data-testid="wbARegion-polite1"
id="wbARegion-polite1"
role="log"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body
class="sb-main-padded sb-show-main"
data-wb-theme="default"
spellcheck="false"
>
<div
class="sb-preparing-story sb-wrapper"
>
<div
class="sb-loader"
/>
</div>
<div
class="sb-preparing-docs sb-wrapper"
>
<div
class="sb-previewBlock"
>
<div
class="sb-previewBlock_header"
>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
</div>
<div
class="sb-previewBlock_body"
>
<div
class="sb-loader"
/>
</div>
</div>
<table
aria-hidden="true"
class="sb-argstableBlock"
>
<thead
class="sb-argstableBlock-head"
>
<tr>
<th>
<span>
Name
</span>
</th>
<th>
<span>
Description
</span>
</th>
<th>
<span>
Default
</span>
</th>
<th>
<span>
Control
</span>
</th>
</tr>
</thead>
<tbody
class="sb-argstableBlock-body"
>
<tr>
<td>
<span>
propertyName
</span>
<span
title="Required"
>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
<tr>
<td>
<span>
propertyName
</span>
<span>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
<tr>
<td>
<span>
propertyName
</span>
<span>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div
class="sb-nopreview sb-wrapper"
>
<div
class="sb-nopreview_main"
>
<h1
class="sb-nopreview_heading sb-heading"
>
No Preview
</h1>
<p>
Sorry, but you either have no stories or none are selected somehow.
</p>
<ul>
<li>
Please check the Storybook config.
</li>
<li>
Try reloading the page.
</li>
</ul>
<p>
If the problem persists, check the browser console, or the terminal you've run Storybook from.
</p>
</div>
</div>
<div
class="sb-errordisplay sb-wrapper"
>
<div
class="sb-errordisplay_main"
>
<h1
id="error-message"
/>
<p>
The component failed to render properly, likely due to a configuration issue in Storybook.
Here are some common causes and how you can address them:
</p>
<ol>
<li>
<strong>
Missing Context/Providers
</strong>
: You can use decorators to supply specific
contexts or providers, which are sometimes necessary for components to render correctly. For
detailed instructions on using decorators, please visit the
<a
href="https://storybook.js.org/docs/writing-stories/decorators"
>
Decorators d...
at Object.getElementError (https://5e1bf4b385e3fb0020b7073c-mcgsjjbdqd.capture-loopback.chromatic.com/assets/iframe-kbTHRwti.js:304:284)
at https://5e1bf4b385e3fb0020b7073c-mcgsjjbdqd.capture-loopback.chromatic.com/assets/iframe-kbTHRwti.js:326:164
at https://5e1bf4b385e3fb0020b7073c-mcgsjjbdqd.capture-loopback.chromatic.com/assets/iframe-kbTHRwti.js:318:4166
at https://5e1bf4b385e3fb0020b7073c-mcgsjjbdqd.capture-loopback.chromatic.com/assets/iframe-kbTHRwti.js:326:387
at Ffe.invoke (https://5e1bf4b385e3fb0020b7073c-mcgsjjbdqd.capture-loopback.chromatic.com/assets/iframe-kbTHRwti.js:209:9336)
at Ffe.track (https://5e1bf4b385e3fb0020b7073c-mcgsjjbdqd.capture-loopback.chromatic.com/assets/iframe-kbTHRwti.js:209:6435)
at Object.getByRole (https://5e1bf4b385e3fb0020b7073c-mcgsjjbdqd.capture-loopback.chromatic.com/assets/iframe-kbTHRwti.js:209:5706)
at play (https://5e1bf4b385e3fb0020b7073c-mcgsjjbdqd.capture-loopback.chromatic.com/assets/combobox.stories-8CADlgkD.js:1:3982)
at async zT.runPhase (https://5e1bf4b385e3fb0020b7073c-mcgsjjbdqd.capture-loopback.chromatic.com/assets/iframe-kbTHRwti.js:911:763)
at async zT.render (https://5e1bf4b385e3fb0020b7073c-mcgsjjbdqd.capture-loopback.chromatic.com/assets/iframe-kbTHRwti.js:911:3814)