Select using Headless UI #212
yoannfleurydevtests.yml
on: pull_request
⚛️ Components Tests
33s
Annotations
6 errors
|
⚛️ Components Tests
Process completed with exit code 1.
|
|
app/components/form/field-select/field-select.spec.tsx > readOnly:
app/components/form/field-select/field-select.spec.tsx#L250
TestingLibraryElementError: Unable to find an element with the role "option" and name "Buzz Pawdrin"
Here are the available roles:
combobox:
Name "":
<input
aria-autocomplete="list"
aria-expanded="false"
class="flex h-full w-full outline-none disabled:cursor-not-allowed read-only:cursor-not-allowed read-only:opacity-50"
data-headlessui-state=""
data-slot="input"
id="headlessui-combobox-input-«r1q»"
placeholder="Select..."
role="combobox"
type="text"
/>
--------------------------------------------------
button:
Name "":
<button
aria-expanded="false"
aria-haspopup="listbox"
class="relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-40 disabled:grayscale aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:disabled:opacity-20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&>span]:gap-2 hover:bg-black/5 dark:hover:bg-white/10 [a:hover_&]:bg-black/5 dark:[a:hover_&]:bg-white/10 [button:hover_&]:bg-black/5 dark:[button:hover_&]:bg-white/10 size-6 rounded-sm text-xs [&_svg:not([class*='size-'])]:size-3 -me-1.5"
data-headlessui-state=""
data-slot="button"
id="headlessui-combobox-button-«r1r»"
tabindex="-1"
type="button"
/>
Name "Submit":
<button
type="submit"
/>
--------------------------------------------------
region:
Name "Notifications alt+T":
<section
aria-atomic="false"
aria-label="Notifications alt+T"
aria-live="polite"
aria-relevant="additions text"
tabindex="-1"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<form
class="flex flex-1 flex-col"
novalidate=""
>
<div
class="flex flex-col gap-1.5"
>
<label
class="flex gap-1.5 align-baseline text-sm"
for="«r1n»"
>
Bearstronaut
</label>
<div
class="flex flex-1 flex-col gap-1"
>
<input
hidden=""
readonly=""
style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
type="hidden"
/>
<input
hidden=""
name="bear"
readonly=""
style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
type="hidden"
value="grizzlyrin"
/>
<div
aria-describedby="«r1n»-description"
class="relative"
data-headlessui-state=""
ids="[object Object]"
readonly=""
>
<div
class="relative flex w-full min-w-0 items-center overflow-hidden rounded-md border border-input bg-background/80 text-base text-foreground shadow-xs transition-[color,box-shadow] md:text-sm selection:bg-primary selection:text-primary-foreground [&>input]:placeholder:text-muted-foreground focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[[aria-invalid]]:border-destructive has-[[aria-invalid]]:ring-destructive/20 dark:has-[[aria-invalid]]:ring-destructive/40 [&>input]:disabled:opacity-50 h-9 [&>div]:px-2.5 [&>input]:px-3"
>
<input
aria-autocomplete="list"
aria-expanded="false"
class="flex h-full w-full outline-none disabled:cursor-not-allowed read-only:cursor-not-allowed read-only:opacity-50"
data-headlessui-state=""
data-slot="input"
id="headlessui-combobo
|
|
app/components/form/field-select/field-select.spec.tsx > default value:
app/components/form/field-select/field-select.spec.tsx#L184
TestingLibraryElementError: Unable to find an element with the text: Yuri Grizzlyrin. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body>
<div>
<form
class="flex flex-1 flex-col"
novalidate=""
>
<div
class="flex flex-col gap-1.5"
>
<label
class="flex gap-1.5 align-baseline text-sm"
for="«r11»"
>
Bear
</label>
<div
class="flex flex-1 flex-col gap-1"
>
<input
hidden=""
readonly=""
style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
type="hidden"
/>
<input
hidden=""
name="bear"
readonly=""
style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
type="hidden"
value="grizzlyrin"
/>
<div
aria-describedby="«r11»-description"
class="relative"
data-headlessui-state=""
ids="[object Object]"
>
<div
class="relative flex w-full min-w-0 items-center overflow-hidden rounded-md border border-input bg-background/80 text-base text-foreground shadow-xs transition-[color,box-shadow] md:text-sm selection:bg-primary selection:text-primary-foreground [&>input]:placeholder:text-muted-foreground focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[[aria-invalid]]:border-destructive has-[[aria-invalid]]:ring-destructive/20 dark:has-[[aria-invalid]]:ring-destructive/40 [&>input]:disabled:opacity-50 h-9 [&>div]:px-2.5 [&>input]:px-3"
>
<input
aria-autocomplete="list"
aria-expanded="false"
class="flex h-full w-full outline-none disabled:cursor-not-allowed read-only:cursor-not-allowed read-only:opacity-50"
data-headlessui-state=""
data-slot="input"
id="headlessui-combobox-input-«r14»"
placeholder="Select..."
role="combobox"
type="text"
/>
<div
class="absolute top-0 bottom-0 flex items-center justify-center text-muted-foreground pointer-events-none *:not-[svg]:pointer-events-auto [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[1em] right-0"
>
<div
class="flex gap-1"
>
<button
aria-expanded="false"
aria-haspopup="listbox"
class="relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-40 disabled:grayscale aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:disabled:opacity-20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&>span]:gap-2 hover:bg-black/5 dark:hover:bg-white/10 [a:hover_&]:bg-black/5 dark:[a:hover_&]:bg-white/10 [button:hover_&]:bg-black/5 dark:[button:hover_&]:bg-white/10 size-6 rounded-sm text-xs [&_svg:not([class*='size-'])]:size-3 -me-1.5"
data-headlessui-state=""
data-slot="button"
id="headlessui-combobox-button-«r15»"
tabindex="-1"
type="button"
>
<span
class="flex items-center justify-center"
|
|
app/components/form/field-select/field-select.spec.tsx > update value using arrows:
app/components/form/field-select/field-select.spec.tsx#L134
TestingLibraryElementError: Unable to find an element with the role "option" and name "Buzz Pawdrin"
Here are the available roles:
combobox:
Name "":
<input
aria-autocomplete="list"
aria-expanded="false"
class="flex h-full w-full outline-none disabled:cursor-not-allowed read-only:cursor-not-allowed read-only:opacity-50"
data-headlessui-state=""
data-slot="input"
id="headlessui-combobox-input-«rp»"
placeholder="Select..."
role="combobox"
type="text"
/>
--------------------------------------------------
button:
Name "":
<button
aria-expanded="false"
aria-haspopup="listbox"
class="relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-40 disabled:grayscale aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:disabled:opacity-20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&>span]:gap-2 hover:bg-black/5 dark:hover:bg-white/10 [a:hover_&]:bg-black/5 dark:[a:hover_&]:bg-white/10 [button:hover_&]:bg-black/5 dark:[button:hover_&]:bg-white/10 size-6 rounded-sm text-xs [&_svg:not([class*='size-'])]:size-3 -me-1.5"
data-headlessui-state=""
data-slot="button"
id="headlessui-combobox-button-«rq»"
tabindex="-1"
type="button"
/>
Name "Submit":
<button
type="submit"
/>
--------------------------------------------------
region:
Name "Notifications alt+T":
<section
aria-atomic="false"
aria-label="Notifications alt+T"
aria-live="polite"
aria-relevant="additions text"
tabindex="-1"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<form
class="flex flex-1 flex-col"
novalidate=""
>
<div
class="flex flex-col gap-1.5"
>
<label
class="flex gap-1.5 align-baseline text-sm"
for="«rm»"
>
Bearstronaut
</label>
<div
class="flex flex-1 flex-col gap-1"
>
<input
hidden=""
readonly=""
style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
type="hidden"
/>
<input
hidden=""
name="bear"
readonly=""
style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
type="hidden"
value=""
/>
<div
aria-describedby="«rm»-description"
class="relative"
data-headlessui-state=""
ids="[object Object]"
>
<div
class="relative flex w-full min-w-0 items-center overflow-hidden rounded-md border border-input bg-background/80 text-base text-foreground shadow-xs transition-[color,box-shadow] md:text-sm selection:bg-primary selection:text-primary-foreground [&>input]:placeholder:text-muted-foreground focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[[aria-invalid]]:border-destructive has-[[aria-invalid]]:ring-destructive/20 dark:has-[[aria-invalid]]:ring-destructive/40 [&>input]:disabled:opacity-50 h-9 [&>div]:px-2.5 [&>input]:px-3"
>
<input
aria-autocomplete="list"
aria-expanded="false"
class="flex h-full w-full outline-none disabled:cursor-not-allowed read-only:cursor-not-allowed read-only:opacity-50"
data-headlessui-state=""
data-slot="input"
id="headlessui-combobox-input-«rp»"
placehol
|
|
app/components/form/field-select/field-select.spec.tsx > should open on click:
app/components/form/field-select/field-select.spec.tsx#L94
TestingLibraryElementError: Unable to find an element with the role "option" and name "Buzz Pawdrin"
Here are the available roles:
combobox:
Name "":
<input
aria-autocomplete="list"
aria-expanded="false"
class="flex h-full w-full outline-none disabled:cursor-not-allowed read-only:cursor-not-allowed read-only:opacity-50"
data-headlessui-state=""
data-slot="input"
id="headlessui-combobox-input-«re»"
placeholder="Select..."
role="combobox"
type="text"
/>
--------------------------------------------------
button:
Name "":
<button
aria-expanded="false"
aria-haspopup="listbox"
class="relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-40 disabled:grayscale aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:disabled:opacity-20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&>span]:gap-2 hover:bg-black/5 dark:hover:bg-white/10 [a:hover_&]:bg-black/5 dark:[a:hover_&]:bg-white/10 [button:hover_&]:bg-black/5 dark:[button:hover_&]:bg-white/10 size-6 rounded-sm text-xs [&_svg:not([class*='size-'])]:size-3 -me-1.5"
data-headlessui-state=""
data-slot="button"
id="headlessui-combobox-button-«rf»"
tabindex="-1"
type="button"
/>
Name "Submit":
<button
type="submit"
/>
--------------------------------------------------
region:
Name "Notifications alt+T":
<section
aria-atomic="false"
aria-label="Notifications alt+T"
aria-live="polite"
aria-relevant="additions text"
tabindex="-1"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<form
class="flex flex-1 flex-col"
novalidate=""
>
<div
class="flex flex-col gap-1.5"
>
<label
class="flex gap-1.5 align-baseline text-sm"
for="«rb»"
>
Bearstronaut
</label>
<div
class="flex flex-1 flex-col gap-1"
>
<input
hidden=""
readonly=""
style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
type="hidden"
/>
<input
hidden=""
name="bear"
readonly=""
style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
type="hidden"
value=""
/>
<div
aria-describedby="«rb»-description"
class="relative"
data-headlessui-state=""
ids="[object Object]"
>
<div
class="relative flex w-full min-w-0 items-center overflow-hidden rounded-md border border-input bg-background/80 text-base text-foreground shadow-xs transition-[color,box-shadow] md:text-sm selection:bg-primary selection:text-primary-foreground [&>input]:placeholder:text-muted-foreground focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[[aria-invalid]]:border-destructive has-[[aria-invalid]]:ring-destructive/20 dark:has-[[aria-invalid]]:ring-destructive/40 [&>input]:disabled:opacity-50 h-9 [&>div]:px-2.5 [&>input]:px-3"
>
<input
aria-autocomplete="list"
aria-expanded="false"
class="flex h-full w-full outline-none disabled:cursor-not-allowed read-only:cursor-not-allowed read-only:opacity-50"
data-headlessui-state=""
data-slot="input"
id="headlessui-combobox-input-«re»"
placehol
|
|
app/components/form/field-select/field-select.spec.tsx > should have no a11y violations:
app/components/form/field-select/field-select.spec.tsx#L65
Error: expect(received).toHaveNoViolations(expected)
Expected the HTML found at $('#headlessui-combobox-button-«r4»') to have no violations:
<button data-slot="button" class="relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-40 disabled:grayscale aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:disabled:opacity-20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&>
Received:
"Buttons must have discernible text (button-name)"
Fix any of the following:
Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
Element's default semantics were not overridden with role="none" or role="presentation"
You can find more information on this issue here:
https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI
❯ app/components/form/field-select/field-select.spec.tsx:65:19
|