Fix usage of tooltip in the Circular option picker. #123744
Annotations
5 errors and 2 warnings
|
Running the tests:
packages/components/src/color-palette/test/index.tsx#L37
TestingLibraryElementError: Unable to find an accessible element with the role "option" and name `/^Color:/`
Here are the accessible roles:
button:
Name "Custom color picker. The currently selected color is called "red" and has a value of "#f00".":
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="Custom color picker. The currently selected color is called \"red\" and has a value of \"#f00\"."
class="components-color-palette__custom-color-button"
style="background: rgb(255, 0, 0);"
type="button"
/>
Name "Clear":
<button
class="components-button components-circular-option-picker__clear is-next-40px-default-size is-tertiary"
type="button"
/>
--------------------------------------------------
listbox:
Name "Custom color picker.":
<div
aria-label="Custom color picker."
id="components-circular-option-picker-0"
role="listbox"
/>
--------------------------------------------------
option:
Name "red":
<button
aria-label="red"
aria-selected="true"
class="components-button components-circular-option-picker__option is-next-40px-default-size"
id="components-circular-option-picker-0-0"
role="option"
style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
type="button"
/>
Name "green":
<button
aria-label="green"
aria-selected="false"
class="components-button components-circular-option-picker__option is-next-40px-default-size"
id="components-circular-option-picker-0-1"
role="option"
style="background-color: rgb(0, 255, 0); color: rgb(0, 255, 0);"
type="button"
/>
Name "blue":
<button
aria-label="blue"
aria-selected="false"
class="components-button components-circular-option-picker__option is-next-40px-default-size"
id="components-circular-option-picker-0-2"
role="option"
style="background-color: rgb(0, 0, 255); color: rgb(0, 0, 255);"
type="button"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="components-flex components-h-stack components-v-stack css-3buooc-PolymorphicDiv-Flex-base-ItemsColumn e19lxcc00"
data-wp-c16t="true"
data-wp-component="VStack"
>
<div
class="components-dropdown"
tabindex="-1"
>
<div
class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-wrapper css-1ncearn-PolymorphicDiv-Flex-base-ItemsColumn e19lxcc00"
data-wp-c16t="true"
data-wp-component="VStack"
>
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="Custom color picker. The currently selected color is called \"red\" and has a value of \"#f00\"."
class="components-color-palette__custom-color-button"
style="background: rgb(255, 0, 0);"
type="button
|
|
Running the tests:
packages/components/src/color-palette/test/index.tsx#L37
TestingLibraryElementError: Unable to find an accessible element with the role "option" and name `/^Color:/`
Here are the accessible roles:
button:
Name "Custom color picker. The currently selected color is called "red" and has a value of "#f00".":
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="Custom color picker. The currently selected color is called \"red\" and has a value of \"#f00\"."
class="components-color-palette__custom-color-button"
style="background: rgb(255, 0, 0);"
type="button"
/>
Name "Clear":
<button
class="components-button components-circular-option-picker__clear is-next-40px-default-size is-tertiary"
type="button"
/>
--------------------------------------------------
listbox:
Name "Custom color picker.":
<div
aria-label="Custom color picker."
id="components-circular-option-picker-1"
role="listbox"
/>
--------------------------------------------------
option:
Name "red":
<button
aria-label="red"
aria-selected="true"
class="components-button components-circular-option-picker__option is-next-40px-default-size"
id="components-circular-option-picker-1-3"
role="option"
style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
type="button"
/>
Name "green":
<button
aria-label="green"
aria-selected="false"
class="components-button components-circular-option-picker__option is-next-40px-default-size"
id="components-circular-option-picker-1-4"
role="option"
style="background-color: rgb(0, 255, 0); color: rgb(0, 255, 0);"
type="button"
/>
Name "blue":
<button
aria-label="blue"
aria-selected="false"
class="components-button components-circular-option-picker__option is-next-40px-default-size"
id="components-circular-option-picker-1-5"
role="option"
style="background-color: rgb(0, 0, 255); color: rgb(0, 0, 255);"
type="button"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="components-flex components-h-stack components-v-stack css-3buooc-PolymorphicDiv-Flex-base-ItemsColumn e19lxcc00"
data-wp-c16t="true"
data-wp-component="VStack"
>
<div
class="components-dropdown"
tabindex="-1"
>
<div
class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-wrapper css-1ncearn-PolymorphicDiv-Flex-base-ItemsColumn e19lxcc00"
data-wp-c16t="true"
data-wp-component="VStack"
>
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="Custom color picker. The currently selected color is called \"red\" and has a value of \"#f00\"."
class="components-color-palette__custom-color-button"
style="background: rgb(255, 0, 0);"
type="button
|
|
Running the tests:
packages/components/src/color-palette/test/index.tsx#L37
TestingLibraryElementError: Unable to find an accessible element with the role "option" and name `/^Color:/`
Here are the accessible roles:
button:
Name "Custom color picker. The currently selected color is called "red" and has a value of "#f00".":
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="Custom color picker. The currently selected color is called \"red\" and has a value of \"#f00\"."
class="components-color-palette__custom-color-button"
style="background: rgb(255, 0, 0);"
type="button"
/>
Name "Clear":
<button
class="components-button components-circular-option-picker__clear is-next-40px-default-size is-tertiary"
type="button"
/>
--------------------------------------------------
listbox:
Name "Custom color picker.":
<div
aria-label="Custom color picker."
id="components-circular-option-picker-2"
role="listbox"
/>
--------------------------------------------------
option:
Name "red":
<button
aria-label="red"
aria-selected="true"
class="components-button components-circular-option-picker__option is-next-40px-default-size"
id="components-circular-option-picker-2-6"
role="option"
style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
type="button"
/>
Name "green":
<button
aria-label="green"
aria-selected="false"
class="components-button components-circular-option-picker__option is-next-40px-default-size"
id="components-circular-option-picker-2-7"
role="option"
style="background-color: rgb(0, 255, 0); color: rgb(0, 255, 0);"
type="button"
/>
Name "blue":
<button
aria-label="blue"
aria-selected="false"
class="components-button components-circular-option-picker__option is-next-40px-default-size"
id="components-circular-option-picker-2-8"
role="option"
style="background-color: rgb(0, 0, 255); color: rgb(0, 0, 255);"
type="button"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="components-flex components-h-stack components-v-stack css-3buooc-PolymorphicDiv-Flex-base-ItemsColumn e19lxcc00"
data-wp-c16t="true"
data-wp-component="VStack"
>
<div
class="components-dropdown"
tabindex="-1"
>
<div
class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-wrapper css-1ncearn-PolymorphicDiv-Flex-base-ItemsColumn e19lxcc00"
data-wp-c16t="true"
data-wp-component="VStack"
>
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="Custom color picker. The currently selected color is called \"red\" and has a value of \"#f00\"."
class="components-color-palette__custom-color-button"
style="background: rgb(255, 0, 0);"
type="button
|
|
Running the tests:
packages/components/src/color-palette/test/index.tsx#L37
TestingLibraryElementError: Unable to find an accessible element with the role "option" and name `/^Color:/`
Here are the accessible roles:
button:
Name "Custom color picker.":
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="Custom color picker."
class="components-color-palette__custom-color-button"
type="button"
/>
Name "Clear":
<button
aria-disabled="true"
class="components-button components-circular-option-picker__clear is-next-40px-default-size is-tertiary"
type="button"
/>
--------------------------------------------------
listbox:
Name "Custom color picker.":
<div
aria-label="Custom color picker."
id="components-circular-option-picker-9"
role="listbox"
/>
--------------------------------------------------
option:
Name "red":
<button
aria-label="red"
aria-selected="false"
class="components-button components-circular-option-picker__option is-next-40px-default-size"
id="components-circular-option-picker-9-24"
role="option"
style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
type="button"
/>
Name "green":
<button
aria-label="green"
aria-selected="false"
class="components-button components-circular-option-picker__option is-next-40px-default-size"
id="components-circular-option-picker-9-25"
role="option"
style="background-color: rgb(0, 255, 0); color: rgb(0, 255, 0);"
type="button"
/>
Name "blue":
<button
aria-label="blue"
aria-selected="false"
class="components-button components-circular-option-picker__option is-next-40px-default-size"
id="components-circular-option-picker-9-26"
role="option"
style="background-color: rgb(0, 0, 255); color: rgb(0, 0, 255);"
type="button"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div
class="components-popover__fallback-container"
/>
<div>
<div
class="components-flex components-h-stack components-v-stack css-3buooc-PolymorphicDiv-Flex-base-ItemsColumn e19lxcc00"
data-wp-c16t="true"
data-wp-component="VStack"
>
<div
class="components-dropdown"
tabindex="-1"
>
<div
class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-wrapper css-1ncearn-PolymorphicDiv-Flex-base-ItemsColumn e19lxcc00"
data-wp-c16t="true"
data-wp-component="VStack"
>
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="Custom color picker."
class="components-color-palette__custom-color-button"
type="button"
/>
<div
class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-text-wrapper css-m
|
|
Running the tests
Process completed with exit code 1.
|
|
Your workflow is using a version of actions/cache that is scheduled for deprecation, actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9. Please update your workflow to use either v3 or v4 of actions/cache to avoid interruptions. Learn more: https://github.blog/changelog/2024-12-05-notice-of-upcoming-releases-and-breaking-changes-for-github-actions/#actions-cache-v1-v2-and-actions-toolkit-cache-package-closing-down
|
|
Setup Node.js and install dependencies
Both node-version and node-version-file inputs are specified, only node-version will be used
|
Loading