Fail
Unable to find an accessible element with the role "button"
Here are the accessible roles:
heading:
Name "Some block above":
<h3
class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-chtuds"
data-testid="JourneysTypography"
/>
Name "Some block above":
<h3
class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-chtuds"
data-testid="JourneysTypography"
/>
--------------------------------------------------
textbox:
Name "Your answer here Your answer here":
<textarea
aria-describedby="textResponse-field-helper-text"
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline css-17xklri"
id="textResponse-field"
maxlength="1000"
name="response"
style="height: 23px; overflow: hidden;"
/>
Name "":
<textarea
aria-describedby="textResponse-field-helper-text"
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline css-4tcraw"
id="textResponse-field"
maxlength="1000"
name="response"
style="height: 23px; overflow: hidden;"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body
class="sb-main-padded sb-show-main"
>
<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"
>
<pre
class="sb-heading"
id="error-message"
/>
<pre
class="sb-errordisplay_code"
>
<code
id="error-stack"
/>
</pre>
</div>
<div
id="storybook-root"
>
<div
dir="ltr"
style="display: flex; flex-direction: column; max-width: 100vw; margin: -16px; overflow-x: hidden;"
>
<div
style="width: 100%; height: auto; min-height: 50vh; overflow: auto; padding: 1.5rem; background: rgb(255, 255, 255); color: rgb(38, 38, 46);"
>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation3 css-ikahob"
>
<h3
class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-chtuds"
data-testid="JourneysTypography"
>
Some block above
</h3>
<div
class="MuiBox-root css-1qm1lh"
data-testid="JourneysTextResponse"
>
<form
action="#"
data-testid="textResponse-textResponseBlockId1"
>
<div
class="MuiStack-root css-j7qwjs"
>
<div
class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1chsvmk"
data-testid="JourneysTextField"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeMedium MuiInputLabel-outlined css-ccsyzz"
data-shrink="false"
for="textResponse-field"
id="textResponse-field-label"
>
Your answer here
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline css-vsjb9i"
>
<textarea
aria-describedby="textResponse-field-helpe...View in Storybook
Chrome 121360x900
Linux Linux Ubuntu 20.04.4
864453 on 24-04-NC-fix-form-block-update-front-end
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://612c2a83fdc2b2003a5c2eb7-lugrtouqeb.capture-loopback.chromatic.com/sb-preview/runtime.js:4:97720