Fail
Found multiple elements with the role "button"
Here are the matching elements:
Ignored nodes: comments, script, style
<button
aria-describedby="react-aria-description-0"
aria-expanded="false"
aria-haspopup="dialog"
aria-label="Calendar"
aria-labelledby="react-aria777120368-7 react-aria777120368-10"
class="sc-eDvSVe bTCyys"
data-is-single-icon-only=""
data-qa="Button"
data-size="medium"
data-theme="default"
data-type="secondary"
id="react-aria777120368-7"
type="button"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
data-element="ButtonIcon"
role="img"
>
<svg
aria-hidden="true"
data-icon="calendar"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</span>
</button>
Ignored nodes: comments, script, style
<button
aria-describedby="react-aria-description-3"
aria-expanded="false"
aria-haspopup="dialog"
aria-label="Calendar"
aria-labelledby="react-aria777120368-14 react-aria777120368-17"
class="sc-eDvSVe bTCyys"
data-is-single-icon-only=""
data-qa="Button"
data-size="medium"
data-theme="default"
data-type="secondary"
id="react-aria777120368-14"
type="button"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
data-element="ButtonIcon"
role="img"
>
<svg
aria-hidden="true"
data-icon="calendar"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</span>
</button>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class="sc-idXgbr kBfjgZ root"
data-font-display="block"
id="cube-ui-kit-root"
style="--cube-dynamic-viewport-height:900px;"
>
<div
class="sc-iveFHk lkXyhj"
data-qa="Field"
>
<div
data-element="InputArea"
>
<div
class="sc-hLBbgP lovONz"
>
<div
class="sc-bYMpWt frfFVi"
data-qa="DateInputWrapper"
data-size="medium"
role="presentation"
>
<div
data-element="Contents"
role="presentation"
>
<div
class="sc-kMjNwy hkyAsD"
data-size="medium"
role="presentation"
>
<div
class="sc-cjibBx fKFlYQ"
role="presentation"
>
<div
aria-describedby="react-aria-description-2"
aria-label="year, Start Date, "
aria-labelledby="react-aria777120368-25 react-aria777120368-1"
aria-valuemax="9999"
aria-valuemin="1"
aria-valuenow="2020"
aria-valuetext="2020"
autocapitalize="off"
autocorrect="off"
class="sc-jIRcFI iDJyKy"
contenteditable="true"
data-qa="EditableSegment"
data-testid="year"
enterkeyhint="next"
id="react-aria777120368-25"
inputmode="numeric"
role="spinbutton"
spellcheck="false"
style="caret-color: transparent; min-width: calc(4ch);"
tabindex="0"
>
2020
</div>
<span
aria-hidden="true"
class="sc-ilhmMj iqSrbG"
data-qa="LiteralSegment"
>
-
</span>
<div
aria-label="month, Start Date, "
aria-labelledby="react-aria777120368-27 react-aria777120368-1"
aria-valuemax="12"
aria-valuemin="1"
aria-valuenow="9"
aria-valuetext="09 – September"
autocapitalize="off"
autocorrect="off"
class="sc-jIRcFI iDJyKy"
contenteditable="true"
data-qa="EditableSegment"
data-testid="month"
enterkeyhint="next"
id="react-aria777120368-27"
inputmode="numeric"
role="spinbutton"
spellcheck="false"
style="caret-color: transparent; min-width: calc(2ch);"
tabindex="0"
>
09
</div>
<span
aria-hidden="true"
class="sc-ilhmMj iqSrbG"
data-qa="LiteralSegment"
>
-
</span>
<div
aria-label="day, Start Date, "
aria-labelledby="react-aria777120368-29 react-aria777120368-1"
aria-valuemax="30"
aria-valuemin="1"
aria-valuenow="10"
aria-valuetext="10"
autocapitalize="off"
autocorrect="off"
class="sc-jIRcFI iDJyKy"
contenteditable="true"
data-qa="EditableSegment"
data-testid="day"
enterkeyhint="next"
id="react-aria777120368-29"
inputmode="numeric"
role="spinbutton"
spellcheck="false"
style="caret-color: transparent; min-width: calc(2ch);"
tabindex="0"
>
10
</div>
</div>
</div>
</div>
</div>
<button
aria-describedby="react-aria-description-0"
aria-expanded="false"
aria-haspopup="dialog"
aria-label="Calendar"
aria-labelledby="react-aria777120368-7 react-aria777120368-10"
class="sc-eDvSVe bTCyys"
data-is-single-icon-only=""
data-qa="Button"
data-size="medium"
data-theme="default"
data-type="secondary"
id="react-aria777120368-7"
type="button"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
data-element="ButtonIcon"
role="img"
>
<svg
aria-hidden="true"
data-icon="calendar"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</span>
</button>
<div
aria-hidden="true"
class="sc-cUEOzv cKAZks"
data-qa="DateRangeDash"
>
––
</div>
<div
class="sc-bYMpWt frfFVi"
data-qa="DateInputWrapper"
data-size="medium"
role="presentation"
>
<div
data-element="Contents"
role="presentation"
>
<div
class="sc-kMjNwy hkyAsD"
data-size="medium"
role="presentation"
>
<div
class="sc-cjibBx fKFlYQ"
role="presentation"
>
<div
aria-describedby="react-aria-description-2"
aria-label="year, End Date, "
aria-labelledby="react-aria777120368-36 react-aria777120368-1"
aria-valuemax="9999"
aria-valuemin="1"
aria-valuenow="2021"
aria-valuetext="2021"
autocapitalize="off"
autocorrect="off"
class="sc-jIRcFI iDJyKy"
contenteditable="true"
data-qa="EditableSegment"
data-testid="year"
enterkeyhint="next"
id="react-aria777120368-36"
inputmode="numeric"
role="spinbutton"
spellcheck="false"
style="caret-color: transparent; min-width: calc(4ch);"
tabindex="0"
>
2021
</div>
<span
aria-hidden="true"
class="sc-ilhmMj iqSrbG"
data-qa="LiteralSegment"
>
-
</span>
<div
aria-label="month, End Date, "
aria-labelledby="react-aria777120368-38 react-aria777120368-1"
aria-valuemax="12"
aria-valuemin="1"
aria-valuenow="4"
aria-valuetext="04 – April"
autocapitalize="off"
autocorrect="off"
class="sc-jIRcFI iDJyKy"
contenteditable="true"
data-qa="EditableSegment"
data-testid="month"
enterkeyhint="next"
id="react-aria777120368-38"
inputmode="numeric"
role="spinbutton"
spellcheck="false"
style="caret-color: transparent; min-width: calc(2ch);"
tabindex="0"
>
04
</div>
<span
aria-hidden="true"
class="sc-ilhmMj iqSrbG"
data-qa="LiteralSegment"
>
-
</span>
<div
aria-label="day, End Date, "
aria-labelledby="react-aria777120368-40 react-aria777120368-1"
aria-valuemax="30"
aria-valuemin="1"
aria-valuenow="1"
aria-valuetext="01"
autocapitalize="off"
autocorrect="off"
class="sc-jIRcFI iDJyKy"
contenteditable="true"
data-qa="EditableSegment"
data-testid="day"
enterkeyhint="next"
id="react-aria777120368-40"
inputmode="numeric"
role="spinbutton"
spellcheck="false"
style="caret-color: transparent; min-width: calc(2ch);"
tabindex="0"
>
01
</div>
</div>
</div>
</div>
</div>
<button
aria-describedby="react-aria-description-3"
aria-expanded="false"
aria-haspopup="dialog"
aria-label="Calendar"
aria-labelledby="react-aria777120368-14 react-aria777120368-17"
class="sc-eDvSVe bTCyys"
data-is-single-icon-only=""
data-qa="Button"
data-size="medium"
data-theme="default"
data-type="secondary"
id="react-aria777120368-14"
type="button"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
data-element="ButtonIcon"
role="img"
>
<svg
aria-hidden="true"
data-icon="calendar"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</span>
</button>
</div>
</div>
</div>
<div
aria-live="polite"
class="sc-ipEyDJ kBRIKt"
data-qa="NotificationsBar"
role="region"
tabindex="0"
/>
</div>
</div>View in Storybook
Chrome 1051184x884
Linux Ubuntu 24.04.4
ce80f4 on improved-daterange-picker
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://626ee6db91d1c8004a912249-aotmzyxwuo.capture-loopback.chromatic.com/sb-preview/runtime.js:4:91104