(WIP) Fix description text not read on hover by NVDA #4311
matyasfpr-validation.yml
on: pull_request
Lint commit msg + code
3m 54s
Vitest unit tests
6m 10s
Cypress component tests
7m 48s
Legacy unit tests
4m 21s
Annotations
11 errors
|
Lint commit msg + code
Process completed with exit code 1.
|
|
packages/ui-checkbox/src/CheckboxGroup/__new-tests__/CheckboxGroup.test.tsx > <CheckboxGroup /> > displays description message inside the legend:
packages/ui-checkbox/src/CheckboxGroup/__new-tests__/CheckboxGroup.test.tsx#L103
Error: expect(received).toBeInTheDocument()
received value must be an HTMLElement or an SVGElement.
❯ packages/ui-checkbox/src/CheckboxGroup/__new-tests__/CheckboxGroup.test.tsx:103:20
|
|
packages/ui-color-picker/src/ColorMixer/__new-tests__/ColorMixer.test.tsx > <ColorMixer /> > labels are displayed: > should render input labels:
packages/ui-color-picker/src/ColorMixer/__new-tests__/ColorMixer.test.tsx#L116
AssertionError: expected 8 to be 4 // Object.is equality
- Expected
+ Received
- 4
+ 8
❯ packages/ui-color-picker/src/ColorMixer/__new-tests__/ColorMixer.test.tsx:116:35
|
|
packages/ui-color-picker/src/ColorPicker/__new-tests__/ColorPicker.test.tsx > <ColorPicker /> > complex mode > should display the color mixer:
packages/ui-color-picker/src/ColorPicker/__new-tests__/ColorPicker.test.tsx#L468
TestingLibraryElementError: Found multiple elements with the text of: Red input
Here are the matching elements:
Ignored nodes: comments, script, style
<label
aria-labelledby="FormFieldLayout_31"
class="css-183j57y-formFieldLayout"
data-cid="TextInput"
for="TextInput_31"
>
<span
class="css-d89gko-grid"
>
<span
class="css-1r50q5-gridRow"
>
<span
class="css-r9cwls-screenReaderContent"
id="FormFieldLayout_31"
>
<span
class="css-r9cwls-screenReaderContent"
>
Red input
</span>
</span>
<span
class="css-1sbhkbz-gridCol"
>
<span
class="css-jwt7s2-textInput__facade"
>
<input
class="css-lykru6-textInput"
id="TextInput_31"
type="text"
value="0"
/>
</span>
</span>
</span>
</span>
</label>
Ignored nodes: comments, script, style
<input
class="css-lykru6-textInput"
id="TextInput_31"
type="text"
value="0"
/>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<body>
<div
aria-hidden="true"
>
<div
class="css-1yl295c-colorPicker"
data-cid="ColorPicker"
>
<label
aria-labelledby="FormFieldLayout_30"
class="css-10inoki-formFieldLayout"
data-cid="TextInput"
for="TextInput_30"
style="width: 22.5rem;"
>
<span
class="css-d89gko-grid"
>
<span
class="css-1r50q5-gridRow"
>
<span
class="css-1iqa4xu-gridCol"
>
<span
class="css-10gayoi-formFieldLabel"
id="FormFieldLayout_30"
>
Color Input
</span>
</span>
<span
class="css-1sbhkbz-gridCol"
>
<span
class="css-jwt7s2-textInput__facade"
>
<span
class="css-11xfyoy-textInput__layout"
>
<div
class="css-gksna-colorPicker__simpleColorContainer"
>
<div
class="css-1fwwf3u-colorPicker__hashMarkContainer"
>
#
</div>
</div>
<span
class="css-hm9jts-textInput__inputLayout"
>
<input
class="css-di2vv6-textInput"
id="TextInput_30"
placeholder="Enter HEX"
type="text"
value=""
width="22.5rem"
/>
</span>
</span>
</span>
</span>
</span>
</span>
</label>
<div
class="css-1zi3hu-colorPicker__colorMixerButtonContainer"
style="padding-top: 0px;"
>
<div
class="css-37xkyg-colorPicker__colorMixerButtonWrapper"
>
<span
class="css-1ihz85b-position"
data-cid="Position Popover"
data-position="Popover_2"
>
<button
aria-expanded="true"
class="css-1as0scj-view--inlineBlock-baseButton"
cursor="pointer"
data-cid="BaseButton IconButton"
data-popover-trigger="true"
data-position-target="Popover_2"
dir="ltr"
tabindex="0"
type="button"
>
<span
class="css-1o8t7ib-baseButton__content"
>
<span
class="css-qi8ml9-baseButton__childrenLayout"
>
<span
class="css-5udsuu-baseButton__iconOnly"
>
|
|
packages/ui-color-picker/src/ColorPicker/__new-tests__/ColorPicker.test.tsx > <ColorPicker /> > complex mode > should display the correct color in the colormixer when the input is prefilled:
packages/ui-color-picker/src/ColorPicker/__new-tests__/ColorPicker.test.tsx#L506
TestingLibraryElementError: Found multiple elements with the text of: Red input
Here are the matching elements:
Ignored nodes: comments, script, style
<label
aria-labelledby="FormFieldLayout_35"
class="css-183j57y-formFieldLayout"
data-cid="TextInput"
for="TextInput_35"
>
<span
class="css-d89gko-grid"
>
<span
class="css-1r50q5-gridRow"
>
<span
class="css-r9cwls-screenReaderContent"
id="FormFieldLayout_35"
>
<span
class="css-r9cwls-screenReaderContent"
>
Red input
</span>
</span>
<span
class="css-1sbhkbz-gridCol"
>
<span
class="css-jwt7s2-textInput__facade"
>
<input
class="css-lykru6-textInput"
id="TextInput_35"
type="text"
value="3"
/>
</span>
</span>
</span>
</span>
</label>
Ignored nodes: comments, script, style
<input
class="css-lykru6-textInput"
id="TextInput_35"
type="text"
value="3"
/>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<body>
<div
aria-hidden="true"
>
<div
class="css-1yl295c-colorPicker"
data-cid="ColorPicker"
>
<label
aria-labelledby="FormFieldLayout_34"
class="css-10inoki-formFieldLayout"
data-cid="TextInput"
for="TextInput_34"
style="width: 22.5rem;"
>
<span
class="css-d89gko-grid"
>
<span
class="css-1r50q5-gridRow"
>
<span
class="css-1iqa4xu-gridCol"
>
<span
class="css-10gayoi-formFieldLabel"
id="FormFieldLayout_34"
>
Color Input
</span>
</span>
<span
class="css-1sbhkbz-gridCol"
>
<span
class="css-jwt7s2-textInput__facade"
>
<span
class="css-11xfyoy-textInput__layout"
>
<div
class="css-gksna-colorPicker__simpleColorContainer"
>
<div
class="css-1fwwf3u-colorPicker__hashMarkContainer"
>
#
</div>
</div>
<span
class="css-hm9jts-textInput__inputLayout"
>
<input
class="css-di2vv6-textInput"
id="TextInput_34"
placeholder="Enter HEX"
type="text"
value="0374B5"
width="22.5rem"
/>
</span>
</span>
</span>
</span>
</span>
</span>
</label>
<div
class="css-1zi3hu-colorPicker__colorMixerButtonContainer"
style="padding-top: 0px;"
>
<div
class="css-37xkyg-colorPicker__colorMixerButtonWrapper"
>
<span
class="css-1ihz85b-position"
data-cid="Position Popover"
data-position="Popover_3"
>
<button
aria-expanded="true"
class="css-1as0scj-view--inlineBlock-baseButton"
cursor="pointer"
data-cid="BaseButton IconButton"
data-popover-trigger="true"
data-position-target="Popover_3"
dir="ltr"
tabindex="0"
type="button"
>
<span
class="css-1o8t7ib-baseButton__content"
>
<span
class="css-qi8ml9-baseButton__childrenLayout"
>
<span
class="css-5udsuu-baseButton__iconOnly"
>
|
|
packages/ui-color-picker/src/ColorPicker/__new-tests__/ColorPicker.test.tsx > <ColorPicker /> > complex mode > should trigger onChange when selected color is added from colorMixer:
packages/ui-color-picker/src/ColorPicker/__new-tests__/ColorPicker.test.tsx#L554
TestingLibraryElementError: Found multiple elements with the text of: Red input
Here are the matching elements:
Ignored nodes: comments, script, style
<label
aria-labelledby="FormFieldLayout_39"
class="css-183j57y-formFieldLayout"
data-cid="TextInput"
for="TextInput_39"
>
<span
class="css-d89gko-grid"
>
<span
class="css-1r50q5-gridRow"
>
<span
class="css-r9cwls-screenReaderContent"
id="FormFieldLayout_39"
>
<span
class="css-r9cwls-screenReaderContent"
>
Red input
</span>
</span>
<span
class="css-1sbhkbz-gridCol"
>
<span
class="css-jwt7s2-textInput__facade"
>
<input
class="css-lykru6-textInput"
id="TextInput_39"
type="text"
value="0"
/>
</span>
</span>
</span>
</span>
</label>
Ignored nodes: comments, script, style
<input
class="css-lykru6-textInput"
id="TextInput_39"
type="text"
value="0"
/>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<body>
<div
aria-hidden="true"
>
<div
class="css-1yl295c-colorPicker"
data-cid="ColorPicker"
>
<label
aria-labelledby="FormFieldLayout_38"
class="css-10inoki-formFieldLayout"
data-cid="TextInput"
for="TextInput_38"
style="width: 22.5rem;"
>
<span
class="css-d89gko-grid"
>
<span
class="css-1r50q5-gridRow"
>
<span
class="css-1iqa4xu-gridCol"
>
<span
class="css-10gayoi-formFieldLabel"
id="FormFieldLayout_38"
>
Color Input
</span>
</span>
<span
class="css-1sbhkbz-gridCol"
>
<span
class="css-jwt7s2-textInput__facade"
>
<span
class="css-11xfyoy-textInput__layout"
>
<div
class="css-gksna-colorPicker__simpleColorContainer"
>
<div
class="css-1fwwf3u-colorPicker__hashMarkContainer"
>
#
</div>
</div>
<span
class="css-hm9jts-textInput__inputLayout"
>
<input
class="css-di2vv6-textInput"
id="TextInput_38"
placeholder="Enter HEX"
type="text"
value=""
width="22.5rem"
/>
</span>
</span>
</span>
</span>
</span>
</span>
</label>
<div
class="css-1zi3hu-colorPicker__colorMixerButtonContainer"
style="padding-top: 0px;"
>
<div
class="css-37xkyg-colorPicker__colorMixerButtonWrapper"
>
<span
class="css-1ihz85b-position"
data-cid="Position Popover"
data-position="Popover_4"
>
<button
aria-expanded="true"
class="css-1as0scj-view--inlineBlock-baseButton"
cursor="pointer"
data-cid="BaseButton IconButton"
data-popover-trigger="true"
data-position-target="Popover_4"
dir="ltr"
tabindex="0"
type="button"
>
<span
class="css-1o8t7ib-baseButton__content"
>
<span
class="css-qi8ml9-baseButton__childrenLayout"
>
<span
class="css-5udsuu-baseButton__iconOnly"
>
|
|
packages/ui-date-input/src/DateInput/__new-tests__/DateInput.test.tsx > <DateInput /> > input > should render a label:
packages/ui-date-input/src/DateInput/__new-tests__/DateInput.test.tsx#L115
TestingLibraryElementError: Found multiple elements with the text of: label text
Here are the matching elements:
Ignored nodes: comments, script, style
<label
aria-labelledby="FormFieldLayout_1"
class="css-183j57y-formFieldLayout"
for="Selectable_1"
>
<span
class="css-d89gko-grid"
>
<span
class="css-1r50q5-gridRow"
>
<span
class="css-1iqa4xu-gridCol"
>
<span
class="css-10gayoi-formFieldLabel"
id="FormFieldLayout_1"
>
label text
</span>
</span>
<span
class="css-1sbhkbz-gridCol"
>
<span
class="css-jwt7s2-textInput__facade"
>
<span
class="css-1rgo9ya-textInput__layout"
>
<span
class="css-hm9jts-textInput__inputLayout"
>
<input
aria-autocomplete="both"
aria-describedby="Selectable_1-description"
aria-expanded="false"
aria-haspopup="listbox"
autocomplete="off"
class="css-lykru6-textInput"
data-position-target="Popover_1"
id="Selectable_1"
role="combobox"
type="text"
value=""
/>
<span
class="css-6eqebe-textInput__afterElement"
>
<svg
aria-hidden="true"
class="css-8x7cbx-inlineSVG-svgIcon"
focusable="false"
height="1em"
name="IconCalendarMonth"
role="presentation"
rotate="0"
style="width: 1em; height: 1em;"
viewBox="0 0 1920 1920"
width="1em"
>
<g
role="presentation"
>
<path
d="M1411.824 0c31.17 0 56.47 25.3 56.47 56.471v56.47h169.412c93.403 0 169.412 76.01 169.412 169.412V1920H113V282.353c0-93.402 76.009-169.412 169.412-169.412h169.41v-56.47c0-31.172 25.3-56.47 56.472-56.47s56.47 25.298 56.47 56.47v56.47h790.589v-56.47c0-31.172 25.299-56.47 56.47-56.47Zm282.352 564.705H225.942v1242.353h1468.234V564.705Zm-1016.47 677.648v338.824H338.882v-338.824h338.824Zm451.765 0v338.824H790.647v-338.824h338.824Zm451.764 0v338.824h-338.823v-338.824h338.823Zm-1016.47 112.941H451.824v112.941h112.941v-112.941Zm451.764 0H903.588v112.941h112.941v-112.941Zm451.765 0h-112.941v112.941h112.941v-112.941ZM677.706 790.588v338.824H338.882V790.588h338.824Zm451.765 0v338.824H790.647V790.588h338.824Zm451.764 0v338.824h-338.823V790.588h338.823ZM564.765 903.53H451.824v112.941h112.941V903.53Zm451.764 0H903.588v112.941h112.941V903.53Zm451.765 0h-112.941v112.941h112.941V903.53ZM451.823 225.882H282.412c-31.06 0-56.47 25.3-56.47 56.471v169.412h1468.234V282.353c0-31.172-25.411-56.47-56.47-56.47h-169.412v56.47c0 31.172-25.3 56.471-56.47 56.471-31.172 0-56.471-25.299-56.471-56.47v-56.472H564.765v56.471c0 31.172-25.3 56.471-56.471 56.471-31.171 0-56.471-25.299-56.471-56.47v-56.472Z"
fill-rule="evenodd"
/>
</g>
</svg>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</label>
Ignored nodes: comments, script, style
<input
aria-autocomplete="both"
aria-describedby="Selectable_1-description"
aria-expanded="false"
aria-haspopup="listbox"
autocomplete="off"
class="css-lykru6-textInput"
data-position-target="Popover_1"
id="Selectable_1"
role="combobox"
type="text"
value=""
/>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<body>
<div>
<span
class="css-196cp5f-dateInput"
>
<label
aria-labelledby="FormFieldLayout_1"
class="css-183j57y-formFieldLayout"
for="Selectable_1"
>
|
|
packages/ui-date-input/src/DateInput/__new-tests__/DateInput.test.tsx > <DateInput /> > input > should set value:
packages/ui-date-input/src/DateInput/__new-tests__/DateInput.test.tsx#L133
TestingLibraryElementError: Found multiple elements with the text of: Choose date
Here are the matching elements:
Ignored nodes: comments, script, style
<label
aria-labelledby="FormFieldLayout_2"
class="css-183j57y-formFieldLayout"
for="Selectable_2"
>
<span
class="css-d89gko-grid"
>
<span
class="css-1r50q5-gridRow"
>
<span
class="css-1iqa4xu-gridCol"
>
<span
class="css-10gayoi-formFieldLabel"
id="FormFieldLayout_2"
>
Choose date
</span>
</span>
<span
class="css-1sbhkbz-gridCol"
>
<span
class="css-jwt7s2-textInput__facade"
>
<span
class="css-1rgo9ya-textInput__layout"
>
<span
class="css-hm9jts-textInput__inputLayout"
>
<input
aria-autocomplete="both"
aria-describedby="Selectable_2-description"
aria-expanded="false"
aria-haspopup="listbox"
autocomplete="off"
class="css-lykru6-textInput"
data-position-target="Popover_2"
id="Selectable_2"
role="combobox"
type="text"
value="January 5"
/>
<span
class="css-6eqebe-textInput__afterElement"
>
<svg
aria-hidden="true"
class="css-8x7cbx-inlineSVG-svgIcon"
focusable="false"
height="1em"
name="IconCalendarMonth"
role="presentation"
rotate="0"
style="width: 1em; height: 1em;"
viewBox="0 0 1920 1920"
width="1em"
>
<g
role="presentation"
>
<path
d="M1411.824 0c31.17 0 56.47 25.3 56.47 56.471v56.47h169.412c93.403 0 169.412 76.01 169.412 169.412V1920H113V282.353c0-93.402 76.009-169.412 169.412-169.412h169.41v-56.47c0-31.172 25.3-56.47 56.472-56.47s56.47 25.298 56.47 56.47v56.47h790.589v-56.47c0-31.172 25.299-56.47 56.47-56.47Zm282.352 564.705H225.942v1242.353h1468.234V564.705Zm-1016.47 677.648v338.824H338.882v-338.824h338.824Zm451.765 0v338.824H790.647v-338.824h338.824Zm451.764 0v338.824h-338.823v-338.824h338.823Zm-1016.47 112.941H451.824v112.941h112.941v-112.941Zm451.764 0H903.588v112.941h112.941v-112.941Zm451.765 0h-112.941v112.941h112.941v-112.941ZM677.706 790.588v338.824H338.882V790.588h338.824Zm451.765 0v338.824H790.647V790.588h338.824Zm451.764 0v338.824h-338.823V790.588h338.823ZM564.765 903.53H451.824v112.941h112.941V903.53Zm451.764 0H903.588v112.941h112.941V903.53Zm451.765 0h-112.941v112.941h112.941V903.53ZM451.823 225.882H282.412c-31.06 0-56.47 25.3-56.47 56.471v169.412h1468.234V282.353c0-31.172-25.411-56.47-56.47-56.47h-169.412v56.47c0 31.172-25.3 56.471-56.47 56.471-31.172 0-56.471-25.299-56.471-56.47v-56.472H564.765v56.471c0 31.172-25.3 56.471-56.471 56.471-31.171 0-56.471-25.299-56.471-56.47v-56.472Z"
fill-rule="evenodd"
/>
</g>
</svg>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</label>
Ignored nodes: comments, script, style
<input
aria-autocomplete="both"
aria-describedby="Selectable_2-description"
aria-expanded="false"
aria-haspopup="listbox"
autocomplete="off"
class="css-lykru6-textInput"
data-position-target="Popover_2"
id="Selectable_2"
role="combobox"
type="text"
value="January 5"
/>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<body>
<div>
<span
class="css-196cp5f-dateInput"
>
<label
aria-labelledby="FormFieldLayout_2"
class="css-183j57y-formFieldLayout"
for="Selectab
|
|
packages/ui-date-input/src/DateInput/__new-tests__/DateInput.test.tsx > <DateInput /> > input > should call onChange with the updated value:
packages/ui-date-input/src/DateInput/__new-tests__/DateInput.test.tsx#L151
TestingLibraryElementError: Found multiple elements with the text of: Choose date
Here are the matching elements:
Ignored nodes: comments, script, style
<label
aria-labelledby="FormFieldLayout_3"
class="css-183j57y-formFieldLayout"
for="Selectable_3"
>
<span
class="css-d89gko-grid"
>
<span
class="css-1r50q5-gridRow"
>
<span
class="css-1iqa4xu-gridCol"
>
<span
class="css-10gayoi-formFieldLabel"
id="FormFieldLayout_3"
>
Choose date
</span>
</span>
<span
class="css-1sbhkbz-gridCol"
>
<span
class="css-jwt7s2-textInput__facade"
>
<span
class="css-1rgo9ya-textInput__layout"
>
<span
class="css-hm9jts-textInput__inputLayout"
>
<input
aria-autocomplete="both"
aria-describedby="Selectable_3-description"
aria-expanded="false"
aria-haspopup="listbox"
autocomplete="off"
class="css-lykru6-textInput"
data-position-target="Popover_3"
id="Selectable_3"
role="combobox"
type="text"
value=""
/>
<span
class="css-6eqebe-textInput__afterElement"
>
<svg
aria-hidden="true"
class="css-8x7cbx-inlineSVG-svgIcon"
focusable="false"
height="1em"
name="IconCalendarMonth"
role="presentation"
rotate="0"
style="width: 1em; height: 1em;"
viewBox="0 0 1920 1920"
width="1em"
>
<g
role="presentation"
>
<path
d="M1411.824 0c31.17 0 56.47 25.3 56.47 56.471v56.47h169.412c93.403 0 169.412 76.01 169.412 169.412V1920H113V282.353c0-93.402 76.009-169.412 169.412-169.412h169.41v-56.47c0-31.172 25.3-56.47 56.472-56.47s56.47 25.298 56.47 56.47v56.47h790.589v-56.47c0-31.172 25.299-56.47 56.47-56.47Zm282.352 564.705H225.942v1242.353h1468.234V564.705Zm-1016.47 677.648v338.824H338.882v-338.824h338.824Zm451.765 0v338.824H790.647v-338.824h338.824Zm451.764 0v338.824h-338.823v-338.824h338.823Zm-1016.47 112.941H451.824v112.941h112.941v-112.941Zm451.764 0H903.588v112.941h112.941v-112.941Zm451.765 0h-112.941v112.941h112.941v-112.941ZM677.706 790.588v338.824H338.882V790.588h338.824Zm451.765 0v338.824H790.647V790.588h338.824Zm451.764 0v338.824h-338.823V790.588h338.823ZM564.765 903.53H451.824v112.941h112.941V903.53Zm451.764 0H903.588v112.941h112.941V903.53Zm451.765 0h-112.941v112.941h112.941V903.53ZM451.823 225.882H282.412c-31.06 0-56.47 25.3-56.47 56.471v169.412h1468.234V282.353c0-31.172-25.411-56.47-56.47-56.47h-169.412v56.47c0 31.172-25.3 56.471-56.47 56.471-31.172 0-56.471-25.299-56.471-56.47v-56.472H564.765v56.471c0 31.172-25.3 56.471-56.471 56.471-31.171 0-56.471-25.299-56.471-56.47v-56.472Z"
fill-rule="evenodd"
/>
</g>
</svg>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</label>
Ignored nodes: comments, script, style
<input
aria-autocomplete="both"
aria-describedby="Selectable_3-description"
aria-expanded="false"
aria-haspopup="listbox"
autocomplete="off"
class="css-lykru6-textInput"
data-position-target="Popover_3"
id="Selectable_3"
role="combobox"
type="text"
value=""
/>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<body>
<div>
<span
class="css-196cp5f-dateInput"
>
<label
aria-labelledby="FormFieldLayout_3"
class="css-183j57y-formFieldLayout"
for="Selectable_3"
>
|
|
packages/ui-date-input/src/DateInput/__new-tests__/DateInput.test.tsx > <DateInput /> > input > should call onBlur:
packages/ui-date-input/src/DateInput/__new-tests__/DateInput.test.tsx#L177
TestingLibraryElementError: Found multiple elements with the text of: Choose date
Here are the matching elements:
Ignored nodes: comments, script, style
<label
aria-labelledby="FormFieldLayout_4"
class="css-183j57y-formFieldLayout"
for="Selectable_4"
>
<span
class="css-d89gko-grid"
>
<span
class="css-1r50q5-gridRow"
>
<span
class="css-1iqa4xu-gridCol"
>
<span
class="css-10gayoi-formFieldLabel"
id="FormFieldLayout_4"
>
Choose date
</span>
</span>
<span
class="css-1sbhkbz-gridCol"
>
<span
class="css-jwt7s2-textInput__facade"
>
<span
class="css-1rgo9ya-textInput__layout"
>
<span
class="css-hm9jts-textInput__inputLayout"
>
<input
aria-autocomplete="both"
aria-describedby="Selectable_4-description"
aria-expanded="false"
aria-haspopup="listbox"
autocomplete="off"
class="css-lykru6-textInput"
data-position-target="Popover_4"
id="Selectable_4"
role="combobox"
type="text"
value=""
/>
<span
class="css-6eqebe-textInput__afterElement"
>
<svg
aria-hidden="true"
class="css-8x7cbx-inlineSVG-svgIcon"
focusable="false"
height="1em"
name="IconCalendarMonth"
role="presentation"
rotate="0"
style="width: 1em; height: 1em;"
viewBox="0 0 1920 1920"
width="1em"
>
<g
role="presentation"
>
<path
d="M1411.824 0c31.17 0 56.47 25.3 56.47 56.471v56.47h169.412c93.403 0 169.412 76.01 169.412 169.412V1920H113V282.353c0-93.402 76.009-169.412 169.412-169.412h169.41v-56.47c0-31.172 25.3-56.47 56.472-56.47s56.47 25.298 56.47 56.47v56.47h790.589v-56.47c0-31.172 25.299-56.47 56.47-56.47Zm282.352 564.705H225.942v1242.353h1468.234V564.705Zm-1016.47 677.648v338.824H338.882v-338.824h338.824Zm451.765 0v338.824H790.647v-338.824h338.824Zm451.764 0v338.824h-338.823v-338.824h338.823Zm-1016.47 112.941H451.824v112.941h112.941v-112.941Zm451.764 0H903.588v112.941h112.941v-112.941Zm451.765 0h-112.941v112.941h112.941v-112.941ZM677.706 790.588v338.824H338.882V790.588h338.824Zm451.765 0v338.824H790.647V790.588h338.824Zm451.764 0v338.824h-338.823V790.588h338.823ZM564.765 903.53H451.824v112.941h112.941V903.53Zm451.764 0H903.588v112.941h112.941V903.53Zm451.765 0h-112.941v112.941h112.941V903.53ZM451.823 225.882H282.412c-31.06 0-56.47 25.3-56.47 56.471v169.412h1468.234V282.353c0-31.172-25.411-56.47-56.47-56.47h-169.412v56.47c0 31.172-25.3 56.471-56.47 56.471-31.172 0-56.471-25.299-56.471-56.47v-56.472H564.765v56.471c0 31.172-25.3 56.471-56.471 56.471-31.171 0-56.471-25.299-56.471-56.47v-56.472Z"
fill-rule="evenodd"
/>
</g>
</svg>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</label>
Ignored nodes: comments, script, style
<input
aria-autocomplete="both"
aria-describedby="Selectable_4-description"
aria-expanded="false"
aria-haspopup="listbox"
autocomplete="off"
class="css-lykru6-textInput"
data-position-target="Popover_4"
id="Selectable_4"
role="combobox"
type="text"
value=""
/>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<body>
<div>
<span
class="css-196cp5f-dateInput"
>
<label
aria-labelledby="FormFieldLayout_4"
class="css-183j57y-formFieldLayout"
for="Selectable_4"
>
|
|
packages/ui-date-input/src/DateInput/__new-tests__/DateInput.test.tsx > <DateInput /> > input > should correctly set interaction type:
packages/ui-date-input/src/DateInput/__new-tests__/DateInput.test.tsx#L194
TestingLibraryElementError: Found multiple elements with the text of: Choose date
Here are the matching elements:
Ignored nodes: comments, script, style
<label
aria-labelledby="FormFieldLayout_5"
class="css-183j57y-formFieldLayout"
for="Selectable_5"
>
<span
class="css-d89gko-grid"
>
<span
class="css-1r50q5-gridRow"
>
<span
class="css-1iqa4xu-gridCol"
>
<span
class="css-10gayoi-formFieldLabel"
id="FormFieldLayout_5"
>
Choose date
</span>
</span>
<span
class="css-1sbhkbz-gridCol"
>
<span
class="css-1p05k6v-textInput__facade"
>
<span
class="css-1rgo9ya-textInput__layout"
>
<span
class="css-hm9jts-textInput__inputLayout"
>
<input
aria-autocomplete="both"
aria-describedby="Selectable_5-description"
aria-expanded="false"
aria-haspopup="listbox"
autocomplete="off"
class="css-lykru6-textInput"
data-position-target="Popover_5"
disabled=""
id="Selectable_5"
role="combobox"
type="text"
value=""
/>
<span
class="css-6eqebe-textInput__afterElement"
>
<svg
aria-hidden="true"
class="css-8x7cbx-inlineSVG-svgIcon"
focusable="false"
height="1em"
name="IconCalendarMonth"
role="presentation"
rotate="0"
style="width: 1em; height: 1em;"
viewBox="0 0 1920 1920"
width="1em"
>
<g
role="presentation"
>
<path
d="M1411.824 0c31.17 0 56.47 25.3 56.47 56.471v56.47h169.412c93.403 0 169.412 76.01 169.412 169.412V1920H113V282.353c0-93.402 76.009-169.412 169.412-169.412h169.41v-56.47c0-31.172 25.3-56.47 56.472-56.47s56.47 25.298 56.47 56.47v56.47h790.589v-56.47c0-31.172 25.299-56.47 56.47-56.47Zm282.352 564.705H225.942v1242.353h1468.234V564.705Zm-1016.47 677.648v338.824H338.882v-338.824h338.824Zm451.765 0v338.824H790.647v-338.824h338.824Zm451.764 0v338.824h-338.823v-338.824h338.823Zm-1016.47 112.941H451.824v112.941h112.941v-112.941Zm451.764 0H903.588v112.941h112.941v-112.941Zm451.765 0h-112.941v112.941h112.941v-112.941ZM677.706 790.588v338.824H338.882V790.588h338.824Zm451.765 0v338.824H790.647V790.588h338.824Zm451.764 0v338.824h-338.823V790.588h338.823ZM564.765 903.53H451.824v112.941h112.941V903.53Zm451.764 0H903.588v112.941h112.941V903.53Zm451.765 0h-112.941v112.941h112.941V903.53ZM451.823 225.882H282.412c-31.06 0-56.47 25.3-56.47 56.471v169.412h1468.234V282.353c0-31.172-25.411-56.47-56.47-56.47h-169.412v56.47c0 31.172-25.3 56.471-56.47 56.471-31.172 0-56.471-25.299-56.471-56.47v-56.472H564.765v56.471c0 31.172-25.3 56.471-56.471 56.471-31.171 0-56.471-25.299-56.471-56.47v-56.472Z"
fill-rule="evenodd"
/>
</g>
</svg>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
</label>
Ignored nodes: comments, script, style
<input
aria-autocomplete="both"
aria-describedby="Selectable_5-description"
aria-expanded="false"
aria-haspopup="listbox"
autocomplete="off"
class="css-lykru6-textInput"
data-position-target="Popover_5"
disabled=""
id="Selectable_5"
role="combobox"
type="text"
value=""
/>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<body>
<div>
<span
class="css-196cp5f-dateInput"
>
<label
aria-labelledby="FormFieldLayout_5"
class="css-183j57y-formFieldLayo
|