fix(ui-pagination): fix Pagination sometimes displaying non li elements in lists, fix key errors too
#4260
matyasfpr-validation.yml
on: pull_request
Lint commit msg + code
4m 30s
Vitest unit tests
5m 55s
Cypress component tests
7m 13s
Legacy unit tests
4m 36s
Annotations
8 errors and 4 warnings
|
packages/ui-pagination/src/Pagination/__new-tests__/Pagination.test.tsx > <Pagination /> > should meet a11y standards > by default:
packages/ui-pagination/src/Pagination/__new-tests__/Pagination.test.tsx#L133
AssertionError: expected Error: [list] rule violation:
Fix all of … to be true // Object.is equality
- Expected:
true
+ Received:
[Error: [list] rule violation:
Fix all of the following:
List element has direct children that are not allowed: ul:
<ul dir="ltr" class="css-1qa09os-view--inlineBlock">
<ul> and <ol> must only directly contain <li>, <script> or <template> elements https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI
]
❯ packages/ui-pagination/src/Pagination/__new-tests__/Pagination.test.tsx:133:24
|
|
packages/ui-pagination/src/Pagination/__new-tests__/Pagination.test.tsx > <Pagination /> > should meet a11y standards > by default with more pages:
packages/ui-pagination/src/Pagination/__new-tests__/Pagination.test.tsx#L143
AssertionError: expected Error: [list] rule violation:
Fix all of … to be true // Object.is equality
- Expected:
true
+ Received:
[Error: [list] rule violation:
Fix all of the following:
List element has direct children that are not allowed: ul:
<ul dir="ltr" class="css-1qa09os-view--inlineBlock">
<ul> and <ol> must only directly contain <li>, <script> or <template> elements https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI
]
❯ packages/ui-pagination/src/Pagination/__new-tests__/Pagination.test.tsx:143:24
|
|
packages/ui-pagination/src/Pagination/__new-tests__/Pagination.test.tsx > <Pagination /> > should meet a11y standards > with first/last arrows:
packages/ui-pagination/src/Pagination/__new-tests__/Pagination.test.tsx#L160
AssertionError: expected Error: [list] rule violation:
Fix all of … to be true // Object.is equality
- Expected:
true
+ Received:
[Error: [list] rule violation:
Fix all of the following:
List element has direct children that are not allowed: ul:
<ul dir="ltr" class="css-1qa09os-view--inlineBlock">
<ul> and <ol> must only directly contain <li>, <script> or <template> elements https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI
]
❯ packages/ui-pagination/src/Pagination/__new-tests__/Pagination.test.tsx:160:24
|
|
packages/ui-pagination/src/Pagination/__new-tests__/Pagination.test.tsx > <Pagination /> > should meet a11y standards > with disabled arrows:
packages/ui-pagination/src/Pagination/__new-tests__/Pagination.test.tsx#L178
AssertionError: expected Error: [list] rule violation:
Fix all of … to be true // Object.is equality
- Expected:
true
+ Received:
[Error: [list] rule violation:
Fix all of the following:
List element has direct children that are not allowed: ul:
<ul dir="ltr" class="css-1qa09os-view--inlineBlock">
<ul> and <ol> must only directly contain <li>, <script> or <template> elements https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI
]
❯ packages/ui-pagination/src/Pagination/__new-tests__/Pagination.test.tsx:178:24
|
|
packages/ui-pagination/src/Pagination/__new-tests__/Pagination.test.tsx > <Pagination /> > should truncate pages to context:
packages/ui-pagination/src/Pagination/__new-tests__/Pagination.test.tsx#L226
TestingLibraryElementError: Unable to find an element with the text: …, which matches selector '[aria-hidden="true"]'. 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>
<div
class="css-s88qpp-view-pagination"
dir="ltr"
role="navigation"
>
<span
class="css-1bhmvnf-view--inlineBlock-pagination__pages"
dir="ltr"
>
<span
class="css-1ihz85b-position"
data-position="Popover_0"
>
<button
aria-describedby="Tooltip_0"
class="css-1h1s81r-view--inlineBlock-baseButton"
cursor="pointer"
data-direction="prev"
data-popover-trigger="true"
data-position-target="Popover_0"
dir="ltr"
type="button"
>
<span
class="css-sw26ng-baseButton__content"
>
<span
class="css-qi8ml9-baseButton__childrenLayout"
>
<span
class="css-5udsuu-baseButton__iconOnly"
>
<span
class="css-31gkb3-baseButton__iconSVG"
>
<svg
aria-hidden="true"
class="css-1xnn9jb-inlineSVG-svgIcon"
focusable="false"
height="1em"
name="IconArrowOpenStart"
role="presentation"
rotate="0"
style="width: 1em; height: 1em;"
viewBox="0 0 1920 1920"
width="1em"
>
<g
role="presentation"
>
<path
d="m1352.005.012 176.13 176.13-783.864 783.989 783.864 783.74L1352.005 1920 391.887 960.13z"
fill-rule="evenodd"
/>
</g>
</svg>
</span>
<span
class="css-r9cwls-screenReaderContent"
>
Prev
</span>
</span>
</span>
</span>
</button>
</span>
<ul
class="css-1qa09os-view--inlineBlock"
dir="ltr"
>
<li
style="all: unset;"
>
<button
class="css-1565x1p-view--inlineBlock-baseButton"
cursor="pointer"
dir="ltr"
type="button"
>
<span
class="css-aznpko-baseButton__content"
>
<span
class="css-11xkk0o-baseButton__children"
>
#
0
</span>
</span>
</button>
</li>
<li
aria-hidden="true"
style="all: unset;"
>
...
</li>
<li
style="all: unset;"
>
<button
class="css-1565x1p-view--inlineBlock-baseButton"
cursor="pointer"
dir="ltr"
type="button"
>
<span
class="css-aznpko-baseButton__content"
>
<span
class="css-11xkk0o-baseButton__children"
>
#
2
</span>
</span>
</button>
</li>
<li
style="all: unset;"
>
<button
aria-current="page"
class="css-1ynfy43-view--inlineBlock-baseButton"
cursor="pointer"
dir="ltr"
type="button"
>
<span
|
|
packages/ui-pagination/src/Pagination/__new-tests__/Pagination.test.tsx > <Pagination /> > should truncate start:
packages/ui-pagination/src/Pagination/__new-tests__/Pagination.test.tsx#L248
TestingLibraryElementError: Unable to find an element with the text: …, which matches selector '[aria-hidden="true"]'. 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>
<div
class="css-s88qpp-view-pagination"
dir="ltr"
role="navigation"
>
<span
class="css-1bhmvnf-view--inlineBlock-pagination__pages"
dir="ltr"
>
<span
class="css-1ihz85b-position"
data-position="Popover_2"
>
<button
aria-describedby="Tooltip_2"
class="css-1h1s81r-view--inlineBlock-baseButton"
cursor="pointer"
data-direction="prev"
data-popover-trigger="true"
data-position-target="Popover_2"
dir="ltr"
type="button"
>
<span
class="css-sw26ng-baseButton__content"
>
<span
class="css-qi8ml9-baseButton__childrenLayout"
>
<span
class="css-5udsuu-baseButton__iconOnly"
>
<span
class="css-31gkb3-baseButton__iconSVG"
>
<svg
aria-hidden="true"
class="css-1xnn9jb-inlineSVG-svgIcon"
focusable="false"
height="1em"
name="IconArrowOpenStart"
role="presentation"
rotate="0"
style="width: 1em; height: 1em;"
viewBox="0 0 1920 1920"
width="1em"
>
<g
role="presentation"
>
<path
d="m1352.005.012 176.13 176.13-783.864 783.989 783.864 783.74L1352.005 1920 391.887 960.13z"
fill-rule="evenodd"
/>
</g>
</svg>
</span>
<span
class="css-r9cwls-screenReaderContent"
>
Prev
</span>
</span>
</span>
</span>
</button>
</span>
<ul
class="css-1qa09os-view--inlineBlock"
dir="ltr"
>
<li
style="all: unset;"
>
<button
class="css-1565x1p-view--inlineBlock-baseButton"
cursor="pointer"
dir="ltr"
type="button"
>
<span
class="css-aznpko-baseButton__content"
>
<span
class="css-11xkk0o-baseButton__children"
>
#
0
</span>
</span>
</button>
</li>
<li
aria-hidden="true"
style="all: unset;"
>
...
</li>
<li
style="all: unset;"
>
<button
class="css-1565x1p-view--inlineBlock-baseButton"
cursor="pointer"
dir="ltr"
type="button"
>
<span
class="css-aznpko-baseButton__content"
>
<span
class="css-11xkk0o-baseButton__children"
>
#
5
</span>
</span>
</button>
</li>
<li
style="all: unset;"
>
<button
class="css-1565x1p-view--inlineBlock-baseButton"
cursor="pointer"
dir="ltr"
type="button"
>
<span
class="css-aznpko-baseButto
|
|
packages/ui-pagination/src/Pagination/__new-tests__/Pagination.test.tsx > <Pagination /> > should truncate end:
packages/ui-pagination/src/Pagination/__new-tests__/Pagination.test.tsx#L270
TestingLibraryElementError: Unable to find an element with the text: …, which matches selector '[aria-hidden="true"]'. 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>
<div
class="css-s88qpp-view-pagination"
dir="ltr"
role="navigation"
>
<span
class="css-1bhmvnf-view--inlineBlock-pagination__pages"
dir="ltr"
>
<ul
class="css-1qa09os-view--inlineBlock"
dir="ltr"
>
<li
style="all: unset;"
>
<button
aria-current="page"
class="css-1ynfy43-view--inlineBlock-baseButton"
cursor="pointer"
dir="ltr"
type="button"
>
<span
class="css-tacv27-baseButton__content"
>
<span
class="css-11xkk0o-baseButton__children"
>
#
0
</span>
</span>
</button>
</li>
<li
style="all: unset;"
>
<button
class="css-1565x1p-view--inlineBlock-baseButton"
cursor="pointer"
dir="ltr"
type="button"
>
<span
class="css-aznpko-baseButton__content"
>
<span
class="css-11xkk0o-baseButton__children"
>
#
1
</span>
</span>
</button>
</li>
<li
style="all: unset;"
>
<button
class="css-1565x1p-view--inlineBlock-baseButton"
cursor="pointer"
dir="ltr"
type="button"
>
<span
class="css-aznpko-baseButton__content"
>
<span
class="css-11xkk0o-baseButton__children"
>
#
2
</span>
</span>
</button>
</li>
<li
style="all: unset;"
>
<button
class="css-1565x1p-view--inlineBlock-baseButton"
cursor="pointer"
dir="ltr"
type="button"
>
<span
class="css-aznpko-baseButton__content"
>
<span
class="css-11xkk0o-baseButton__children"
>
#
3
</span>
</span>
</button>
</li>
<li
aria-hidden="true"
style="all: unset;"
>
...
</li>
<li
style="all: unset;"
>
<button
class="css-1565x1p-view--inlineBlock-baseButton"
cursor="pointer"
dir="ltr"
type="button"
>
<span
class="css-aznpko-baseButton__content"
>
<span
class="css-11xkk0o-baseButton__children"
>
#
5
</span>
</span>
</button>
</li>
</ul>
<span
class="css-1ihz85b-position"
data-position="Popover_3"
>
<button
aria-describedby="Tooltip_3"
class="css-1h1s81r-view--inlineBlock-baseButton"
cursor="pointer"
data-direction="next"
data-popover-trigger="true"
data-position-target="Popover_3"
dir="ltr"
type="button"
>
<span
class="css-sw26ng-baseButton__content"
>
<span
|
|
Vitest unit tests
Process completed with exit code 1.
|
|
Lint commit msg + code
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Legacy unit tests
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Vitest unit tests
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Cypress component tests
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|