Fix usage of tooltip in the Circular option picker. #123744
Triggered via pull request
January 10, 2025 15:14
afercia
Status
Cancelled
Total duration
5m 38s
Artifacts
–
unit-test.yml
on: pull_request
Compute previous WordPress version
1s
Build JavaScript assets for PHP unit tests
5m 17s
PHP coding standards
24s
Mobile
4m 5s
Matrix: unit-js-date
Matrix: unit-js
Matrix: test-php
PHP
0s
Annotations
25 errors and 26 warnings
|
JavaScript (Node.js 22) 4/4:
packages/components/src/alignment-matrix-control/test/index.tsx#L115
Error: expect(element).toHaveFocus()
Expected element with focus:
<span class="css-17mjk8t-Cell e1r95csn1" id="alignment-matrix-control-13-bottom-center" role="gridcell" tabindex="-1"><div class="components-visually-hidden css-161q9d5-PolymorphicDiv e19lxcc00" data-wp-c16t="true" data-wp-component="VisuallyHidden" style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;">bottom center</div><span class="css-1jz015p-Point e1r95csn0" role="presentation" /></span>
Received element with focus:
<span aria-describedby="tooltip-120" class="css-17mjk8t-Cell e1r95csn1" data-active-item="true" data-focus-visible="true" id="alignment-matrix-control-13-center-left" role="gridcell" tabindex="0"><div class="components-visually-hidden css-161q9d5-PolymorphicDiv e19lxcc00" data-wp-c16t="true" data-wp-component="VisuallyHidden" style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;">center left</div><span class="css-1jz015p-Point e1r95csn0" role="presentation" /></span>
at toHaveFocus (/home/runner/work/gutenberg/gutenberg/packages/components/src/alignment-matrix-control/test/index.tsx:115:35)
|
|
JavaScript (Node.js 22) 4/4
Process completed with exit code 1.
|
|
JavaScript (Node.js 20) 3/4:
packages/block-editor/src/components/colors-gradients/test/control.js#L37
TestingLibraryElementError: Unable to find a label with the text of: /^Color:/
Ignored nodes: comments, script, style
<body>
<p
class="a11y-speak-intro-text"
hidden="hidden"
id="a11y-speak-intro-text"
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
>
Notifications
</p>
<div
aria-atomic="true"
aria-live="assertive"
aria-relevant="additions text"
class="a11y-speak-region"
id="a11y-speak-assertive"
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
/>
<div
aria-atomic="true"
aria-live="polite"
aria-relevant="additions text"
class="a11y-speak-region"
id="a11y-speak-polite"
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
/>
<div>
<div
class="components-base-control block-editor-color-gradient-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
>
<div
class="components-base-control__field css-yj91it-StyledField ej5x27r3"
>
<fieldset
class="block-editor-color-gradient-control__fieldset"
>
<div
class="components-flex components-h-stack components-v-stack css-1ri2mma-PolymorphicDiv-Flex-base-ItemsColumn e19lxcc00"
data-wp-c16t="true"
data-wp-component="VStack"
>
<legend>
<div
class="block-editor-color-gradient-control__color-indicator"
>
<span
class="components-base-control__label css-1met6ge-StyledVisualLabel-baseLabelTypography-labelStyles ej5x27r0"
>
Test Color Gradient
</span>
</div>
</legend>
<div
class="block-editor-color-gradient-control__panel"
>
<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-hasp
|
|
JavaScript (Node.js 20) 3/4
Process completed with exit code 1.
|
|
JavaScript (Node.js 22) 3/4:
packages/block-editor/src/components/colors-gradients/test/control.js#L37
TestingLibraryElementError: Unable to find a label with the text of: /^Color:/
Ignored nodes: comments, script, style
<body>
<p
class="a11y-speak-intro-text"
hidden="hidden"
id="a11y-speak-intro-text"
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
>
Notifications
</p>
<div
aria-atomic="true"
aria-live="assertive"
aria-relevant="additions text"
class="a11y-speak-region"
id="a11y-speak-assertive"
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
/>
<div
aria-atomic="true"
aria-live="polite"
aria-relevant="additions text"
class="a11y-speak-region"
id="a11y-speak-polite"
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
/>
<div>
<div
class="components-base-control block-editor-color-gradient-control css-ij2po-Wrapper-boxSizingReset ej5x27r4"
>
<div
class="components-base-control__field css-yj91it-StyledField ej5x27r3"
>
<fieldset
class="block-editor-color-gradient-control__fieldset"
>
<div
class="components-flex components-h-stack components-v-stack css-1ri2mma-PolymorphicDiv-Flex-base-ItemsColumn e19lxcc00"
data-wp-c16t="true"
data-wp-component="VStack"
>
<legend>
<div
class="block-editor-color-gradient-control__color-indicator"
>
<span
class="components-base-control__label css-1met6ge-StyledVisualLabel-baseLabelTypography-labelStyles ej5x27r0"
>
Test Color Gradient
</span>
</div>
</legend>
<div
class="block-editor-color-gradient-control__panel"
>
<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-hasp
|
|
JavaScript (Node.js 22) 3/4
Process completed with exit code 1.
|
|
JavaScript (Node.js 22) 2/4:
packages/components/src/palette-edit/test/index.tsx#L37
TestingLibraryElementError: Unable to find a label with the text of: Color: Primary
Ignored nodes: comments, script, style
<body>
<div
class="components-popover__fallback-container"
/>
<div>
<div
class="e1lpqc902 css-p5g8ep-PolymorphicDiv-PaletteEditStyles e19lxcc00"
>
<div
class="components-flex components-h-stack css-1hwd9hm-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
data-wp-c16t="true"
data-wp-component="HStack"
>
<h2
class="components-truncate components-text components-heading e1lpqc905 css-139bgvg-PolymorphicDiv-Text-sx-Base-block-PaletteHeading e19lxcc00"
data-wp-c16t="true"
data-wp-component="Heading"
>
Test label
</h2>
<div
class="e1lpqc904 css-1w89x8y-PolymorphicDiv-PaletteActionsContainer e19lxcc00"
>
<button
aria-label="Add color"
aria-pressed="false"
class="components-button is-small has-icon"
type="button"
>
<svg
aria-hidden="true"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"
/>
</svg>
</button>
<div
class="components-dropdown components-dropdown-menu"
tabindex="-1"
>
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="Color options"
class="components-button components-dropdown-menu__toggle is-small has-icon"
type="button"
>
<svg
aria-hidden="true"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class="e1lpqc903 css-4242aj-PolymorphicDiv-PaletteEditContents e19lxcc00"
>
<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-circular-option-picker"
>
<div
aria-label="Custom color picker."
id="components-circular-option-picker-9"
role="listbox"
>
|
|
JavaScript (Node.js 22) 2/4:
packages/block-editor/src/components/color-palette/test/control.js#L38
Error: expect(received).toMatchSnapshot()
Snapshot name: `ColorPaletteControl matches the snapshot 1`
- Snapshot - 1
+ Received + 1
@@ -212,11 +212,11 @@
>
<div
class="components-circular-option-picker__option-wrapper"
>
<button
- aria-label="Color: red"
+ aria-label="red"
aria-selected="true"
class="components-button components-circular-option-picker__option is-next-40px-default-size"
data-active-item="true"
id="components-circular-option-picker-0-0"
role="option"
at Object.toMatchSnapshot (/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/color-palette/test/control.js:38:23)
|
|
JavaScript (Node.js 22) 2/4
Process completed with exit code 1.
|
|
JavaScript (Node.js 20) 1/4:
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
|
|
JavaScript (Node.js 20) 1/4:
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
|
|
JavaScript (Node.js 20) 1/4:
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
|
|
JavaScript (Node.js 20) 1/4:
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
|
|
JavaScript (Node.js 20) 1/4
Process completed with exit code 1.
|
|
JavaScript (Node.js 20) 2/4:
packages/components/src/palette-edit/test/index.tsx#L37
TestingLibraryElementError: Unable to find a label with the text of: Color: Primary
Ignored nodes: comments, script, style
<body>
<div
class="components-popover__fallback-container"
/>
<div>
<div
class="e1lpqc902 css-p5g8ep-PolymorphicDiv-PaletteEditStyles e19lxcc00"
>
<div
class="components-flex components-h-stack css-1hwd9hm-PolymorphicDiv-Flex-base-ItemsRow e19lxcc00"
data-wp-c16t="true"
data-wp-component="HStack"
>
<h2
class="components-truncate components-text components-heading e1lpqc905 css-139bgvg-PolymorphicDiv-Text-sx-Base-block-PaletteHeading e19lxcc00"
data-wp-c16t="true"
data-wp-component="Heading"
>
Test label
</h2>
<div
class="e1lpqc904 css-1w89x8y-PolymorphicDiv-PaletteActionsContainer e19lxcc00"
>
<button
aria-label="Add color"
aria-pressed="false"
class="components-button is-small has-icon"
type="button"
>
<svg
aria-hidden="true"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 12.5V17.5H12.5V12.5H17.5V11H12.5V6H11V11H6V12.5H11Z"
/>
</svg>
</button>
<div
class="components-dropdown components-dropdown-menu"
tabindex="-1"
>
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="Color options"
class="components-button components-dropdown-menu__toggle is-small has-icon"
type="button"
>
<svg
aria-hidden="true"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class="e1lpqc903 css-4242aj-PolymorphicDiv-PaletteEditContents e19lxcc00"
>
<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-circular-option-picker"
>
<div
aria-label="Custom color picker."
id="components-circular-option-picker-9"
role="listbox"
>
|
|
JavaScript (Node.js 20) 2/4:
packages/block-editor/src/components/color-palette/test/control.js#L38
Error: expect(received).toMatchSnapshot()
Snapshot name: `ColorPaletteControl matches the snapshot 1`
- Snapshot - 1
+ Received + 1
@@ -212,11 +212,11 @@
>
<div
class="components-circular-option-picker__option-wrapper"
>
<button
- aria-label="Color: red"
+ aria-label="red"
aria-selected="true"
class="components-button components-circular-option-picker__option is-next-40px-default-size"
data-active-item="true"
id="components-circular-option-picker-0-0"
role="option"
at Object.toMatchSnapshot (/home/runner/work/gutenberg/gutenberg/packages/block-editor/src/components/color-palette/test/control.js:38:23)
|
|
JavaScript (Node.js 20) 2/4
Process completed with exit code 1.
|
|
JavaScript (Node.js 22) 1/4:
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
|
|
JavaScript (Node.js 22) 1/4:
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
|
|
JavaScript (Node.js 22) 1/4:
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
|
|
JavaScript (Node.js 22) 1/4:
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
|
|
JavaScript (Node.js 22) 1/4
Process completed with exit code 1.
|
|
Build JavaScript assets for PHP unit tests
Canceling since a higher priority waiting request for 'Unit Tests-fix/circular-option-picker-tooltip-incorrect-usage' exists
|
|
Build JavaScript assets for PHP unit tests
The operation was canceled.
|
|
PHP
Process completed with exit code 1.
|
|
Mobile
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
|
|
Build JavaScript assets for PHP unit tests
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
|
|
JavaScript (Node.js 20) 4/4
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
|
|
JavaScript (Node.js 20) 1/4
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
|
|
JavaScript Date Tests (Node.js 22)
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
|
|
JavaScript (Node.js 20) 3/4
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
|
|
Compute previous WordPress version
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
JavaScript (Node.js 22) 4/4
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
|
|
JavaScript (Node.js 22) 1/4
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
|
|
JavaScript Date Tests (Node.js 20)
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
|
|
JavaScript (Node.js 22) 3/4
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
|
|
JavaScript (Node.js 22) 2/4
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
|
|
JavaScript (Node.js 20) 2/4
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
|
|
PHP coding standards
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
JavaScript Date Tests (Node.js 22)
Both node-version and node-version-file inputs are specified, only node-version will be used
|
|
JavaScript Date Tests (Node.js 20)
Both node-version and node-version-file inputs are specified, only node-version will be used
|
|
JavaScript (Node.js 20) 4/4
Both node-version and node-version-file inputs are specified, only node-version will be used
|
|
JavaScript (Node.js 22) 4/4
Both node-version and node-version-file inputs are specified, only node-version will be used
|
|
JavaScript (Node.js 20) 3/4
Both node-version and node-version-file inputs are specified, only node-version will be used
|
|
JavaScript (Node.js 22) 3/4
Both node-version and node-version-file inputs are specified, only node-version will be used
|
|
JavaScript (Node.js 22) 2/4
Both node-version and node-version-file inputs are specified, only node-version will be used
|
|
JavaScript (Node.js 20) 1/4
Both node-version and node-version-file inputs are specified, only node-version will be used
|
|
JavaScript (Node.js 20) 2/4
Both node-version and node-version-file inputs are specified, only node-version will be used
|
|
JavaScript (Node.js 22) 1/4
Both node-version and node-version-file inputs are specified, only node-version will be used
|
|
Mobile
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
PHP
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|