Tools panel: Synced the visible label and accessible name #123723
Annotations
4 errors and 2 warnings
|
Running the tests:
packages/components/src/tools-panel/test/index.tsx#L37
TestingLibraryElementError: Unable to find an accessible element with the role "menuitemcheckbox" and name "Show Nested Control 2"
Here are the accessible roles:
menu:
Name "Panel header options":
<div
aria-label="Panel header options"
aria-orientation="vertical"
class="css-1lfy0sm-DropdownMenu components-dropdown-menu__menu"
role="menu"
/>
--------------------------------------------------
group:
Name "Panel header":
<div
aria-labelledby="components-menu-group-label-26"
role="group"
/>
Name "":
<div
role="group"
/>
--------------------------------------------------
menuitem:
Name "Reset Nested Control 1":
<button
aria-label="Reset Nested Control 1"
class="components-button components-menu-item__button css-1jj9dk-DefaultControlsItem is-next-40px-default-size"
role="menuitem"
type="button"
/>
Name "Reset all":
<button
aria-disabled="false"
class="components-button components-menu-item__button is-next-40px-default-size is-tertiary"
role="menuitem"
type="button"
/>
--------------------------------------------------
menuitemcheckbox:
Name "Nested Control 2":
<button
aria-checked="false"
aria-label="Nested Control 2"
class="components-button components-menu-item__button is-next-40px-default-size"
role="menuitemcheckbox"
type="button"
/>
--------------------------------------------------heading:
Name "Panel header":
<h2
class="components-truncate components-text components-heading css-9z19te-PolymorphicDiv-Text-sx-Base-block-ToolsPanelHeading e19lxcc00"
data-wp-c16t="true"
data-wp-component="Heading"
/>
--------------------------------------------------
button:
Name "Panel header options":
<button
aria-expanded="true"
aria-haspopup="true"
aria-label="Panel header options"
class="components-button components-dropdown-menu__toggle is-opened is-small has-icon"
type="button"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<p
class="a11y-speak-intro-text"
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;"
>
Example hidden and reset to default
</div>
<div
aria-atomic="true"
aria-live="polite"
aria-relevant="additions text"
class="a11y-speak-region"
id="a11y-speak-polite"
style=�
|
|
Running the tests:
packages/components/src/tools-panel/test/index.tsx#L37
TestingLibraryElementError: Unable to find an accessible element with the role "menuitemcheckbox" and name "Show Nested Control 2"
Here are the accessible roles:
menu:
Name "Panel header options":
<div
aria-label="Panel header options"
aria-orientation="vertical"
class="css-1lfy0sm-DropdownMenu components-dropdown-menu__menu"
role="menu"
/>
--------------------------------------------------
group:
Name "Panel header":
<div
aria-labelledby="components-menu-group-label-28"
role="group"
/>
Name "":
<div
role="group"
/>
--------------------------------------------------
menuitem:
Name "Reset Nested Control 1":
<button
aria-label="Reset Nested Control 1"
class="components-button components-menu-item__button css-1jj9dk-DefaultControlsItem is-next-40px-default-size"
role="menuitem"
type="button"
/>
Name "Reset all":
<button
aria-disabled="false"
class="components-button components-menu-item__button is-next-40px-default-size is-tertiary"
role="menuitem"
type="button"
/>
--------------------------------------------------
menuitemcheckbox:
Name "Nested Control 2":
<button
aria-checked="false"
aria-label="Nested Control 2"
class="components-button components-menu-item__button is-next-40px-default-size"
role="menuitemcheckbox"
type="button"
/>
--------------------------------------------------heading:
Name "Panel header":
<h2
class="components-truncate components-text components-heading css-9z19te-PolymorphicDiv-Text-sx-Base-block-ToolsPanelHeading e19lxcc00"
data-wp-c16t="true"
data-wp-component="Heading"
/>
--------------------------------------------------
button:
Name "Panel header options":
<button
aria-expanded="true"
aria-haspopup="true"
aria-label="Panel header options"
class="components-button components-dropdown-menu__toggle is-opened is-small has-icon"
type="button"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<p
class="a11y-speak-intro-text"
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;"
>
Example hidden and reset to default
</div>
<div
aria-atomic="true"
aria-live="polite"
aria-relevant="additions text"
class="a11y-speak-region"
id="a11y-speak-polite"
style=�
|
|
Running the tests:
packages/components/src/tools-panel/test/index.tsx#L37
TestingLibraryElementError: Unable to find an accessible element with the role "menuitemcheckbox" and name "Show Alt"
Here are the accessible roles:
menu:
Name "Panel header options":
<div
aria-label="Panel header options"
aria-orientation="vertical"
class="css-1lfy0sm-DropdownMenu components-dropdown-menu__menu"
role="menu"
/>
--------------------------------------------------
group:
Name "Panel header":
<div
aria-labelledby="components-menu-group-label-36"
role="group"
/>
Name "":
<div
role="group"
/>
--------------------------------------------------
menuitemcheckbox:
Name "Alt":
<button
aria-checked="false"
aria-label="Alt"
class="components-button components-menu-item__button is-next-40px-default-size"
role="menuitemcheckbox"
type="button"
/>
--------------------------------------------------
menuitem:
Name "Reset all":
<button
aria-disabled="true"
class="components-button components-menu-item__button is-next-40px-default-size is-tertiary"
role="menuitem"
type="button"
/>
--------------------------------------------------heading:
Name "Panel header":
<h2
class="components-truncate components-text components-heading css-9z19te-PolymorphicDiv-Text-sx-Base-block-ToolsPanelHeading e19lxcc00"
data-wp-c16t="true"
data-wp-component="Heading"
/>
--------------------------------------------------
button:
Name "Panel header options":
<button
aria-describedby="components-button__description-82"
aria-expanded="true"
aria-haspopup="true"
aria-label="Panel header options"
class="components-button components-dropdown-menu__toggle is-opened is-small has-icon"
type="button"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<p
class="a11y-speak-intro-text"
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;"
>
Alt is now visible
</div>
<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
class="components-popover__fallback-container"
�
|
|
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