fix keyboard navigation issues with windowTopMenu #1494
Annotations
7 errors and 1 warning
|
Run npm test:
__tests__/src/components/WindowThumbnailSettings.test.js#L23
TestingLibraryElementError: Unable to find an accessible element with the role "menuitem" and name `/Off/`
Here are the accessible roles:
presentation:
Name "":
<li
class="MuiListSubheader-root MuiListSubheader-gutters css-5qqijm-MuiListSubheader-root"
role="presentation"
/>
--------------------------------------------------
menubar:
Name "":
<ul
class="MuiList-root MuiList-padding css-1p75baz-MuiList-root-WindowViewSettings-option"
role="menubar"
tabindex="-1"
/>
--------------------------------------------------
menuitemradio:
Name "Off":
<li
aria-checked="true"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters Mui-selected Mui-focusVisible MuiMenuItem-root MuiMenuItem-gutters Mui-selected css-f9a92j-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="0"
/>
Name "Bottom":
<li
aria-checked="false"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-cmjunz-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="-1"
/>
Name "Right":
<li
aria-checked="false"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-cmjunz-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="-1"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<li
class="MuiListSubheader-root MuiListSubheader-gutters css-5qqijm-MuiListSubheader-root"
role="presentation"
>
Thumbnails
</li>
<ul
class="MuiList-root MuiList-padding css-1p75baz-MuiList-root-WindowViewSettings-option"
role="menubar"
tabindex="-1"
>
<li
aria-checked="true"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters Mui-selected Mui-focusVisible MuiMenuItem-root MuiMenuItem-gutters Mui-selected css-f9a92j-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="0"
>
<label
class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementBottom css-1c1s55e-MuiFormControlLabel-root"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-colorSecondary MuiSvgIcon-fontSizeMedium css-1hsd4a3-MuiSvgIcon-root"
data-testid="CropDinSharpIcon"
fill="currentcolor"
focusable="false"
value="off"
viewBox="0 0 24 24"
>
<path
d="M21 3H3v18h18zm-2 16H5V5h14z"
/>
</svg>
<span
class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-vvl3q8-MuiTypography-root"
>
Off
</span>
</label>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</li>
<li
aria-checked="false"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-cmjunz-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="-1"
>
<label
class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementBottom css-1c1s55e-MuiFormControlLabel-root"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1m9ymud-MuiSvgIcon-root"
fill="currentcolor"
focusable="false"
height="24"
value="far-bottom"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3,3H21V5H3Z"
transform="translate(0 16)"
/>
<path
d="M21,5H3V19H21ZM19,17H5V7H19Z"
transform="translate(0 -2)"
|
|
Run npm test:
__tests__/src/components/WindowThumbnailSettings.test.js#L29
TestingLibraryElementError: Unable to find an accessible element with the role "menuitem" and name `/Bottom/`
Here are the accessible roles:
presentation:
Name "":
<li
class="MuiListSubheader-root MuiListSubheader-gutters css-5qqijm-MuiListSubheader-root"
role="presentation"
/>
--------------------------------------------------
menubar:
Name "":
<ul
class="MuiList-root MuiList-padding css-1p75baz-MuiList-root-WindowViewSettings-option"
role="menubar"
tabindex="-1"
/>
--------------------------------------------------
menuitemradio:
Name "Off":
<li
aria-checked="false"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-cmjunz-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="-1"
/>
Name "Bottom":
<li
aria-checked="true"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters Mui-selected Mui-focusVisible MuiMenuItem-root MuiMenuItem-gutters Mui-selected css-f9a92j-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="0"
/>
Name "Right":
<li
aria-checked="false"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-cmjunz-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="-1"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<li
class="MuiListSubheader-root MuiListSubheader-gutters css-5qqijm-MuiListSubheader-root"
role="presentation"
>
Thumbnails
</li>
<ul
class="MuiList-root MuiList-padding css-1p75baz-MuiList-root-WindowViewSettings-option"
role="menubar"
tabindex="-1"
>
<li
aria-checked="false"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-cmjunz-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="-1"
>
<label
class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementBottom css-1c1s55e-MuiFormControlLabel-root"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="CropDinSharpIcon"
fill="currentcolor"
focusable="false"
value="off"
viewBox="0 0 24 24"
>
<path
d="M21 3H3v18h18zm-2 16H5V5h14z"
/>
</svg>
<span
class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-vvl3q8-MuiTypography-root"
>
Off
</span>
</label>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</li>
<li
aria-checked="true"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters Mui-selected Mui-focusVisible MuiMenuItem-root MuiMenuItem-gutters Mui-selected css-f9a92j-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="0"
>
<label
class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementBottom css-1c1s55e-MuiFormControlLabel-root"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-colorSecondary MuiSvgIcon-fontSizeMedium css-9pfmda-MuiSvgIcon-root"
fill="currentcolor"
focusable="false"
height="24"
value="far-bottom"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3,3H21V5H3Z"
transform="translate(0 16)"
/>
<path
d="M21,5H3V19H21ZM19,17H5V7H19Z"
transform="translate(0 -2)"
|
|
Run npm test:
__tests__/src/components/WindowThumbnailSettings.test.js#L35
TestingLibraryElementError: Unable to find an accessible element with the role "menuitem" and name `/Right/`
Here are the accessible roles:
presentation:
Name "":
<li
class="MuiListSubheader-root MuiListSubheader-gutters css-5qqijm-MuiListSubheader-root"
role="presentation"
/>
--------------------------------------------------
menubar:
Name "":
<ul
class="MuiList-root MuiList-padding css-1p75baz-MuiList-root-WindowViewSettings-option"
role="menubar"
tabindex="-1"
/>
--------------------------------------------------
menuitemradio:
Name "Off":
<li
aria-checked="false"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-cmjunz-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="-1"
/>
Name "Bottom":
<li
aria-checked="false"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-cmjunz-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="-1"
/>
Name "Right":
<li
aria-checked="true"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters Mui-selected Mui-focusVisible MuiMenuItem-root MuiMenuItem-gutters Mui-selected css-f9a92j-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="0"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<li
class="MuiListSubheader-root MuiListSubheader-gutters css-5qqijm-MuiListSubheader-root"
role="presentation"
>
Thumbnails
</li>
<ul
class="MuiList-root MuiList-padding css-1p75baz-MuiList-root-WindowViewSettings-option"
role="menubar"
tabindex="-1"
>
<li
aria-checked="false"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-cmjunz-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="-1"
>
<label
class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementBottom css-1c1s55e-MuiFormControlLabel-root"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="CropDinSharpIcon"
fill="currentcolor"
focusable="false"
value="off"
viewBox="0 0 24 24"
>
<path
d="M21 3H3v18h18zm-2 16H5V5h14z"
/>
</svg>
<span
class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-vvl3q8-MuiTypography-root"
>
Off
</span>
</label>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</li>
<li
aria-checked="false"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-cmjunz-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="-1"
>
<label
class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementBottom css-1c1s55e-MuiFormControlLabel-root"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1m9ymud-MuiSvgIcon-root"
fill="currentcolor"
focusable="false"
height="24"
value="far-bottom"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3,3H21V5H3Z"
transform="translate(0 16)"
/>
<path
d="M21,5H3V19H21ZM19,17H5V7H19Z"
transform="translate(0 -2)"
/>
</svg>
<span
class="M
|
|
Run npm test:
__tests__/src/components/WindowThumbnailSettings.test.js#L45
AssertionError: expected +0 to be 3 // Object.is equality
- Expected
+ Received
- 3
+ 0
❯ __tests__/src/components/WindowThumbnailSettings.test.js:45:30
|
|
Run npm test:
__tests__/src/components/WindowThumbnailSettings.test.js#L60
TestingLibraryElementError: Unable to find an accessible element with the role "menuitem" and name `/Right/`
Here are the accessible roles:
presentation:
Name "":
<li
class="MuiListSubheader-root MuiListSubheader-gutters css-5qqijm-MuiListSubheader-root"
role="presentation"
/>
--------------------------------------------------
menubar:
Name "":
<ul
class="MuiList-root MuiList-padding css-1p75baz-MuiList-root-WindowViewSettings-option"
role="menubar"
tabindex="-1"
/>
--------------------------------------------------
menuitemradio:
Name "Off":
<li
aria-checked="true"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters Mui-selected Mui-focusVisible MuiMenuItem-root MuiMenuItem-gutters Mui-selected css-f9a92j-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="0"
/>
Name "Bottom":
<li
aria-checked="false"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-cmjunz-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="-1"
/>
Name "Right":
<li
aria-checked="false"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-cmjunz-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="-1"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<li
class="MuiListSubheader-root MuiListSubheader-gutters css-5qqijm-MuiListSubheader-root"
role="presentation"
>
Thumbnails
</li>
<ul
class="MuiList-root MuiList-padding css-1p75baz-MuiList-root-WindowViewSettings-option"
role="menubar"
tabindex="-1"
>
<li
aria-checked="true"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters Mui-selected Mui-focusVisible MuiMenuItem-root MuiMenuItem-gutters Mui-selected css-f9a92j-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="0"
>
<label
class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementBottom css-1c1s55e-MuiFormControlLabel-root"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-colorSecondary MuiSvgIcon-fontSizeMedium css-1hsd4a3-MuiSvgIcon-root"
data-testid="CropDinSharpIcon"
fill="currentcolor"
focusable="false"
value="off"
viewBox="0 0 24 24"
>
<path
d="M21 3H3v18h18zm-2 16H5V5h14z"
/>
</svg>
<span
class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-vvl3q8-MuiTypography-root"
>
Off
</span>
</label>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</li>
<li
aria-checked="false"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-cmjunz-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="-1"
>
<label
class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementBottom css-1c1s55e-MuiFormControlLabel-root"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1m9ymud-MuiSvgIcon-root"
fill="currentcolor"
focusable="false"
height="24"
value="far-bottom"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3,3H21V5H3Z"
transform="translate(0 16)"
/>
<path
d="M21,5H3V19H21ZM19,17H5V7H19Z"
transform="translate(0 -2)"
|
|
Run npm test:
__tests__/src/components/WindowTopMenuButton.test.js#L36
TestingLibraryElementError: Unable to find an accessible element with the role "menuitem"
Here are the accessible roles:
menu:
Name "":
<div
class="MuiPopover-root MuiModal-root css-1i0e6f3-MuiModal-root-MuiPopover-root"
orientation="horizontal"
role="menu"
/>
--------------------------------------------------
presentation:
Name "":
<li
class="MuiListSubheader-root MuiListSubheader-gutters css-5qqijm-MuiListSubheader-root"
role="presentation"
/>
Name "":
<li
class="MuiListSubheader-root MuiListSubheader-gutters css-5qqijm-MuiListSubheader-root"
role="presentation"
/>
--------------------------------------------------
menubar:
Name "":
<ul
class="MuiList-root MuiList-padding css-1p75baz-MuiList-root-WindowViewSettings-option"
role="menubar"
tabindex="-1"
/>
Name "":
<ul
class="MuiList-root MuiList-padding css-1p75baz-MuiList-root-WindowViewSettings-option"
role="menubar"
tabindex="-1"
/>
--------------------------------------------------
menuitemradio:
Name "Single":
<li
aria-checked="true"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters Mui-selected Mui-focusVisible MuiMenuItem-root MuiMenuItem-gutters Mui-selected css-17lid5b-MuiButtonBase-root-MuiMenuItem-root-WindowViewSettings-option"
role="menuitemradio"
tabindex="0"
/>
Name "Gallery":
<li
aria-checked="false"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-jjngcl-MuiButtonBase-root-MuiMenuItem-root-WindowViewSettings-option"
role="menuitemradio"
tabindex="-1"
/>
Name "Off":
<li
aria-checked="false"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-cmjunz-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="0"
/>
Name "Bottom":
<li
aria-checked="false"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-cmjunz-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="-1"
/>
Name "Right":
<li
aria-checked="false"
class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-cmjunz-MuiButtonBase-root-MuiMenuItem-root-WindowThumbnailSettings-option"
role="menuitemradio"
tabindex="-1"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body
style="padding-right: 1024px; overflow: hidden;"
>
<div
aria-hidden="true"
>
<button
aria-haspopup="true"
aria-label="Window views & thumbnail display"
aria-owns="window-menu_xyz"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge ctrlBtnSelected css-1ln8od7-MuiButtonBase-root-MuiIconButton-root-MiradorMenuButton-root"
data-mui-internal-clone-element="true"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1m9ymud-MuiSvgIcon-root"
focusable="false"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0,0H24V24H0Z"
fill="none"
/>
<path
d="M24.852,17.981,3,18V15.945l21.852-.019Z"
transform="translate(-2 5)"
/>
<path
d="M1,4V21H22.853V4.1ZM3,19V6h8V19Zm18,0H13V6h8Z"
transform="translate(0 -2)"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
>
<span
class="css-y4cjyz-MuiTouchRipple-ripple MuiTouchRipple-ripple MuiTouchRipple-rippleVisible MuiTouchRipple-ripplePulsate"
style="width: 1px; height: 1px; top: -0.5px; left: -0.5px;"
>
<span
class="MuiTouchRipple-child MuiTouchRipple-childLeaving MuiTouchRipple-childPulsate"
|
|
Run npm test
Process completed with exit code 1.
|
|
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
Loading