a11y: implement WAI-ARIA Tabs pattern on tab navigation#65
Merged
Annotations
10 errors and 2 warnings
|
Run tests:
src/__tests__/IssueCard.test.tsx#L265
TestingLibraryElementError: Unable to find an element with the text: 📚 Learn more. 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="issue-card severity-error"
style="border-left-color: rgb(255, 68, 68);"
>
<div
aria-expanded="true"
class="issue-header"
role="button"
tabindex="0"
>
<span
class="issue-icon indicator-dot indicator-dot--error"
/>
<div
class="issue-info"
>
<div
class="issue-title-row"
>
<h4
class="issue-title"
>
Missing Key in List
</h4>
<span
class="severity-badge"
style="background-color: rgba(255, 68, 68, 0.1); color: rgb(255, 68, 68); border: 1px solid rgb(255, 68, 68);"
>
Error
</span>
</div>
<div
class="issue-location"
>
<span
class="element-type"
>
li
</span>
<span
class="issue-component"
>
in
<strong>
UserList
</strong>
</span>
<span
class="component-path"
>
(
App → Dashboard → UserList
)
</span>
</div>
</div>
<span
class="expand-button"
>
▼
</span>
</div>
<div
class="issue-details"
>
<p
class="issue-message"
>
List items are missing key props which can cause incorrect rendering
</p>
<div
class="issue-elements"
>
<strong>
Affected Elements:
</strong>
<div
class="elements-list"
>
<div
class="element-item missing-key"
>
<span
class="el-index"
>
[
0
]
</span>
<span
class="el-type"
>
li
</span>
<span
class="el-key null"
>
key=
null
</span>
</div>
<div
class="element-item missing-key"
>
<span
class="el-index"
>
[
1
]
</span>
<span
class="el-type"
>
li
</span>
<span
class="el-key null"
>
key=
null
</span>
</div>
<div
class="element-item missing-key"
>
<span
class="el-index"
>
[
2
]
</span>
<span
class="el-type"
>
li
</span>
<span
class="el-key null"
>
key=
null
</span>
</div>
</div>
</div>
<div
class="issue-why"
>
<strong>
Why this matters:
</strong>
<p>
Keys help React identify which items have changed, are added, or removed.
</p>
</div>
<div
class="issue-suggestion"
>
<strong>
<span
class="action-badge action-badge--suggestion"
/>
Suggestion:
</strong>
<
|
|
Run tests:
src/__tests__/IssueCard.test.tsx#L256
TestingLibraryElementError: Unable to find an element with the text: 📚 Learn more. 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="issue-card severity-error"
style="border-left-color: rgb(255, 68, 68);"
>
<div
aria-expanded="true"
class="issue-header"
role="button"
tabindex="0"
>
<span
class="issue-icon indicator-dot indicator-dot--error"
/>
<div
class="issue-info"
>
<div
class="issue-title-row"
>
<h4
class="issue-title"
>
Missing Key in List
</h4>
<span
class="severity-badge"
style="background-color: rgba(255, 68, 68, 0.1); color: rgb(255, 68, 68); border: 1px solid rgb(255, 68, 68);"
>
Error
</span>
</div>
<div
class="issue-location"
>
<span
class="element-type"
>
li
</span>
<span
class="issue-component"
>
in
<strong>
UserList
</strong>
</span>
<span
class="component-path"
>
(
App → Dashboard → UserList
)
</span>
</div>
</div>
<span
class="expand-button"
>
▼
</span>
</div>
<div
class="issue-details"
>
<p
class="issue-message"
>
List items are missing key props which can cause incorrect rendering
</p>
<div
class="issue-elements"
>
<strong>
Affected Elements:
</strong>
<div
class="elements-list"
>
<div
class="element-item missing-key"
>
<span
class="el-index"
>
[
0
]
</span>
<span
class="el-type"
>
li
</span>
<span
class="el-key null"
>
key=
null
</span>
</div>
<div
class="element-item missing-key"
>
<span
class="el-index"
>
[
1
]
</span>
<span
class="el-type"
>
li
</span>
<span
class="el-key null"
>
key=
null
</span>
</div>
<div
class="element-item missing-key"
>
<span
class="el-index"
>
[
2
]
</span>
<span
class="el-type"
>
li
</span>
<span
class="el-key null"
>
key=
null
</span>
</div>
</div>
</div>
<div
class="issue-why"
>
<strong>
Why this matters:
</strong>
<p>
Keys help React identify which items have changed, are added, or removed.
</p>
</div>
<div
class="issue-suggestion"
>
<strong>
<span
class="action-badge action-badge--suggestion"
/>
Suggestion:
</strong>
<
|
|
Run tests:
src/__tests__/IssueCard.test.tsx#L197
TestingLibraryElementError: Unable to find an element with the text: 🔍 Closure Timeline:. 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="issue-card severity-error"
style="border-left-color: rgb(255, 68, 68);"
>
<div
aria-expanded="true"
class="issue-header"
role="button"
tabindex="0"
>
<span
class="issue-icon indicator-dot indicator-dot--error"
/>
<div
class="issue-info"
>
<div
class="issue-title-row"
>
<h4
class="issue-title"
>
Stale Closure Detected
</h4>
<span
class="severity-badge"
style="background-color: rgba(255, 68, 68, 0.1); color: rgb(255, 68, 68); border: 1px solid rgb(255, 68, 68);"
>
Error
</span>
</div>
<div
class="issue-location"
>
<span
class="issue-component"
>
in
<strong>
Timer
</strong>
</span>
<span
class="component-path"
>
(
App → Timer
)
</span>
</div>
</div>
<span
class="expand-button"
>
▼
</span>
</div>
<div
class="issue-details"
>
<p
class="issue-message"
>
Callback is using stale closure values
</p>
<div
class="closure-info"
>
<strong>
<span
class="action-badge action-badge--search"
/>
Closure Timeline:
</strong>
<div
class="closure-timeline"
>
<div
class="timeline-item created"
>
<span
class="timeline-badge"
>
Created
</span>
<span
class="timeline-detail"
>
Render #
1
</span>
</div>
<div
class="timeline-arrow"
>
→
</div>
<div
class="timeline-item executed"
>
<span
class="timeline-badge warning"
>
Executed
</span>
<span
class="timeline-detail"
>
Render #
10
</span>
</div>
</div>
<div
class="closure-details"
>
<div
class="closure-row"
>
<span
class="closure-label"
>
Function:
</span>
<code
class="closure-value"
>
handleTick
()
</code>
</div>
<div
class="closure-row"
>
<span
class="closure-label"
>
Type:
</span>
<span
class="closure-type type-setInterval"
>
setInterval
</span>
</div>
<div
class="closure-row"
>
<span
class="closure-label"
>
Renders behind:
</span>
<span
class="closure-stale-count"
>
9
render(s)
</span>
</div>
</div>
<div
class="captured-values
|
|
Run tests:
src/__tests__/IssueCard.test.tsx#L141
TestingLibraryElementError: Unable to find an element with the text: 💡 Suggestion:. 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="issue-card severity-error"
style="border-left-color: rgb(255, 68, 68);"
>
<div
aria-expanded="true"
class="issue-header"
role="button"
tabindex="0"
>
<span
class="issue-icon indicator-dot indicator-dot--error"
/>
<div
class="issue-info"
>
<div
class="issue-title-row"
>
<h4
class="issue-title"
>
Missing Key in List
</h4>
<span
class="severity-badge"
style="background-color: rgba(255, 68, 68, 0.1); color: rgb(255, 68, 68); border: 1px solid rgb(255, 68, 68);"
>
Error
</span>
</div>
<div
class="issue-location"
>
<span
class="element-type"
>
li
</span>
<span
class="issue-component"
>
in
<strong>
UserList
</strong>
</span>
<span
class="component-path"
>
(
App → Dashboard → UserList
)
</span>
</div>
</div>
<span
class="expand-button"
>
▼
</span>
</div>
<div
class="issue-details"
>
<p
class="issue-message"
>
List items are missing key props which can cause incorrect rendering
</p>
<div
class="issue-elements"
>
<strong>
Affected Elements:
</strong>
<div
class="elements-list"
>
<div
class="element-item missing-key"
>
<span
class="el-index"
>
[
0
]
</span>
<span
class="el-type"
>
li
</span>
<span
class="el-key null"
>
key=
null
</span>
</div>
<div
class="element-item missing-key"
>
<span
class="el-index"
>
[
1
]
</span>
<span
class="el-type"
>
li
</span>
<span
class="el-key null"
>
key=
null
</span>
</div>
<div
class="element-item missing-key"
>
<span
class="el-index"
>
[
2
]
</span>
<span
class="el-type"
>
li
</span>
<span
class="el-key null"
>
key=
null
</span>
</div>
</div>
</div>
<div
class="issue-why"
>
<strong>
Why this matters:
</strong>
<p>
Keys help React identify which items have changed, are added, or removed.
</p>
</div>
<div
class="issue-suggestion"
>
<strong>
<span
class="action-badge action-badge--suggestion"
/>
Suggestion:
</strong>
|
|
Run tests:
src/__tests__/CLSTab.test.tsx#L164
TestingLibraryElementError: Unable to find an element with the text: 💡 How to Reduce CLS. 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="tab-panel"
>
<div
class="tab-header"
>
<h2>
<span
class="section-badge section-badge--cls"
/>
Layout Shift (CLS) Monitor
</h2>
</div>
<section
class="section cls-score-section"
>
<div
class="cls-score-card"
>
<div
class="cls-score-header"
>
<span
class="cls-label"
>
Current CLS Score
</span>
<span
class="cls-value"
style="color: rgb(12, 206, 107);"
>
0.050
</span>
</div>
<div
class="cls-bar-container"
>
<div
class="cls-bar-bg"
>
<div
class="cls-bar-fill"
style="width: 10%; background-color: rgb(12, 206, 107);"
/>
<div
class="cls-threshold cls-threshold-good"
style="left: 20%;"
>
<span>
0.1
</span>
</div>
<div
class="cls-threshold cls-threshold-poor"
style="left: 50%;"
>
<span>
0.25
</span>
</div>
</div>
</div>
<div
class="cls-rating"
>
<span
class="rating-emoji status-badge status-badge--good"
/>
<span
class="rating-text"
>
Good - Meets Core Web Vitals threshold
</span>
</div>
</div>
</section>
<section
class="section"
>
<h3>
Top Shift Sources
</h3>
<div
class="contributors-table"
>
<table>
<thead>
<tr>
<th>
Element
</th>
<th>
Total Shift
</th>
<th>
Occurrences
</th>
</tr>
</thead>
<tbody>
<tr>
<td
class="element-selector"
>
<code>
IMG.hero-image
</code>
</td>
<td
class="shift-value"
>
0.0300
</td>
<td
class="occurrence-count"
>
2
</td>
</tr>
<tr>
<td
class="element-selector"
>
<code>
DIV.banner
</code>
</td>
<td
class="shift-value"
>
0.0200
</td>
<td
class="occurrence-count"
>
1
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section
class="section"
>
<h3>
Shift Timeline
</h3>
<div
class="timeline-list"
>
<div
class="timeline-entry"
>
<span
class="timeline-time"
>
4:35:27 AM
</span>
<span
class="timeline-source"
>
DIV.banner
</span>
<span
|
|
Run tests:
src/__tests__/CLSTab.test.tsx#L159
TestingLibraryElementError: Unable to find an element with the text: 💡 How to Reduce CLS. 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="tab-panel"
>
<div
class="tab-header"
>
<h2>
<span
class="section-badge section-badge--cls"
/>
Layout Shift (CLS) Monitor
</h2>
</div>
<section
class="section cls-score-section"
>
<div
class="cls-score-card"
>
<div
class="cls-score-header"
>
<span
class="cls-label"
>
Current CLS Score
</span>
<span
class="cls-value"
style="color: rgb(12, 206, 107);"
>
0.050
</span>
</div>
<div
class="cls-bar-container"
>
<div
class="cls-bar-bg"
>
<div
class="cls-bar-fill"
style="width: 10%; background-color: rgb(12, 206, 107);"
/>
<div
class="cls-threshold cls-threshold-good"
style="left: 20%;"
>
<span>
0.1
</span>
</div>
<div
class="cls-threshold cls-threshold-poor"
style="left: 50%;"
>
<span>
0.25
</span>
</div>
</div>
</div>
<div
class="cls-rating"
>
<span
class="rating-emoji status-badge status-badge--good"
/>
<span
class="rating-text"
>
Good - Meets Core Web Vitals threshold
</span>
</div>
</div>
</section>
<section
class="section"
>
<h3>
Top Shift Sources
</h3>
<div
class="contributors-table"
>
<table>
<thead>
<tr>
<th>
Element
</th>
<th>
Total Shift
</th>
<th>
Occurrences
</th>
</tr>
</thead>
<tbody>
<tr>
<td
class="element-selector"
>
<code>
IMG.hero-image
</code>
</td>
<td
class="shift-value"
>
0.0300
</td>
<td
class="occurrence-count"
>
2
</td>
</tr>
<tr>
<td
class="element-selector"
>
<code>
DIV.banner
</code>
</td>
<td
class="shift-value"
>
0.0200
</td>
<td
class="occurrence-count"
>
1
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section
class="section"
>
<h3>
Shift Timeline
</h3>
<div
class="timeline-list"
>
<div
class="timeline-entry"
>
<span
class="timeline-time"
>
4:35:27 AM
</span>
<span
class="timeline-source"
>
DIV.banner
</span>
<span
|
|
Run tests:
src/__tests__/CLSTab.test.tsx#L100
TestingLibraryElementError: Unable to find an element with the text: 🔴. 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="tab-panel"
>
<div
class="tab-header"
>
<h2>
<span
class="section-badge section-badge--cls"
/>
Layout Shift (CLS) Monitor
</h2>
</div>
<section
class="section cls-score-section"
>
<div
class="cls-score-card"
>
<div
class="cls-score-header"
>
<span
class="cls-label"
>
Current CLS Score
</span>
<span
class="cls-value"
style="color: rgb(255, 78, 66);"
>
0.350
</span>
</div>
<div
class="cls-bar-container"
>
<div
class="cls-bar-bg"
>
<div
class="cls-bar-fill"
style="width: 70%; background-color: rgb(255, 78, 66);"
/>
<div
class="cls-threshold cls-threshold-good"
style="left: 20%;"
>
<span>
0.1
</span>
</div>
<div
class="cls-threshold cls-threshold-poor"
style="left: 50%;"
>
<span>
0.25
</span>
</div>
</div>
</div>
<div
class="cls-rating"
>
<span
class="rating-emoji status-badge status-badge--poor"
/>
<span
class="rating-text"
>
Poor - Significantly impacts user experience
</span>
</div>
</div>
</section>
<section
class="section"
>
<h3>
Top Shift Sources
</h3>
<div
class="contributors-table"
>
<table>
<thead>
<tr>
<th>
Element
</th>
<th>
Total Shift
</th>
<th>
Occurrences
</th>
</tr>
</thead>
<tbody>
<tr>
<td
class="element-selector"
>
<code>
IFRAME.embed
</code>
</td>
<td
class="shift-value"
>
0.2000
</td>
<td
class="occurrence-count"
>
1
</td>
</tr>
<tr>
<td
class="element-selector"
>
<code>
DIV.ad-container
</code>
</td>
<td
class="shift-value"
>
0.1500
</td>
<td
class="occurrence-count"
>
1
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section
class="section"
>
<h3>
Shift Timeline
</h3>
<div
class="timeline-list"
>
<div
class="timeline-entry"
>
<span
class="timeline-time"
>
4:35:29 AM
</span>
<span
class="timeline-source"
>
IFRAME.embed
</span>
<span
|
|
Run tests:
src/__tests__/CLSTab.test.tsx#L94
TestingLibraryElementError: Unable to find an element with the text: 🟡. 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="tab-panel"
>
<div
class="tab-header"
>
<h2>
<span
class="section-badge section-badge--cls"
/>
Layout Shift (CLS) Monitor
</h2>
</div>
<section
class="section cls-score-section"
>
<div
class="cls-score-card"
>
<div
class="cls-score-header"
>
<span
class="cls-label"
>
Current CLS Score
</span>
<span
class="cls-value"
style="color: rgb(255, 164, 0);"
>
0.150
</span>
</div>
<div
class="cls-bar-container"
>
<div
class="cls-bar-bg"
>
<div
class="cls-bar-fill"
style="width: 30%; background-color: rgb(255, 164, 0);"
/>
<div
class="cls-threshold cls-threshold-good"
style="left: 20%;"
>
<span>
0.1
</span>
</div>
<div
class="cls-threshold cls-threshold-poor"
style="left: 50%;"
>
<span>
0.25
</span>
</div>
</div>
</div>
<div
class="cls-rating"
>
<span
class="rating-emoji status-badge status-badge--warning"
/>
<span
class="rating-text"
>
Needs Improvement - Consider optimizing
</span>
</div>
</div>
</section>
<section
class="section info-section"
>
<h3>
<span
class="action-badge action-badge--suggestion"
/>
How to Reduce CLS
</h3>
<ul
class="tips-list"
>
<li>
Add
<code>
width
</code>
and
<code>
height
</code>
attributes to images and videos
</li>
<li>
Use
<code>
aspect-ratio
</code>
CSS property for responsive media
</li>
<li>
Reserve space for ads, embeds, and iframes with
<code>
min-height
</code>
</li>
<li>
Preload fonts and use
<code>
font-display: swap
</code>
</li>
<li>
Avoid inserting content above existing content
</li>
<li>
Use CSS
<code>
transform
</code>
for animations instead of layout properties
</li>
</ul>
</section>
<div
class="empty-state"
>
<span
class="empty-state-icon empty-state-icon--chart"
/>
<p>
No layout shifts detected yet
</p>
<p
class="hint"
>
Layout shifts will be recorded as they occur.
</p>
</div>
</div>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/__tests__/CLSTab.test.tsx:94:21
|
|
Run tests:
src/__tests__/CLSTab.test.tsx#L88
TestingLibraryElementError: Unable to find an element with the text: 🟢. 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="tab-panel"
>
<div
class="tab-header"
>
<h2>
<span
class="section-badge section-badge--cls"
/>
Layout Shift (CLS) Monitor
</h2>
</div>
<section
class="section cls-score-section"
>
<div
class="cls-score-card"
>
<div
class="cls-score-header"
>
<span
class="cls-label"
>
Current CLS Score
</span>
<span
class="cls-value"
style="color: rgb(12, 206, 107);"
>
0.050
</span>
</div>
<div
class="cls-bar-container"
>
<div
class="cls-bar-bg"
>
<div
class="cls-bar-fill"
style="width: 10%; background-color: rgb(12, 206, 107);"
/>
<div
class="cls-threshold cls-threshold-good"
style="left: 20%;"
>
<span>
0.1
</span>
</div>
<div
class="cls-threshold cls-threshold-poor"
style="left: 50%;"
>
<span>
0.25
</span>
</div>
</div>
</div>
<div
class="cls-rating"
>
<span
class="rating-emoji status-badge status-badge--good"
/>
<span
class="rating-text"
>
Good - Meets Core Web Vitals threshold
</span>
</div>
</div>
</section>
<section
class="section"
>
<h3>
Top Shift Sources
</h3>
<div
class="contributors-table"
>
<table>
<thead>
<tr>
<th>
Element
</th>
<th>
Total Shift
</th>
<th>
Occurrences
</th>
</tr>
</thead>
<tbody>
<tr>
<td
class="element-selector"
>
<code>
IMG.hero-image
</code>
</td>
<td
class="shift-value"
>
0.0300
</td>
<td
class="occurrence-count"
>
2
</td>
</tr>
<tr>
<td
class="element-selector"
>
<code>
DIV.banner
</code>
</td>
<td
class="shift-value"
>
0.0200
</td>
<td
class="occurrence-count"
>
1
</td>
</tr>
</tbody>
</table>
</div>
</section>
<section
class="section"
>
<h3>
Shift Timeline
</h3>
<div
class="timeline-list"
>
<div
class="timeline-entry"
>
<span
class="timeline-time"
>
4:35:27 AM
</span>
<span
class="timeline-source"
>
DIV.banner
</span>
<span
class="
|
|
Run tests:
src/__tests__/CLSTab.test.tsx#L71
TestingLibraryElementError: Unable to find an element with the text: 📐 Layout Shift (CLS) Monitor. 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="tab-panel"
>
<div
class="tab-header"
>
<h2>
<span
class="section-badge section-badge--cls"
/>
Layout Shift (CLS) Monitor
</h2>
</div>
<section
class="section cls-score-section"
>
<div
class="cls-score-card"
>
<div
class="cls-score-header"
>
<span
class="cls-label"
>
Current CLS Score
</span>
<span
class="cls-value"
style="color: rgb(12, 206, 107);"
>
0.000
</span>
</div>
<div
class="cls-bar-container"
>
<div
class="cls-bar-bg"
>
<div
class="cls-bar-fill"
style="width: 0%; background-color: rgb(12, 206, 107);"
/>
<div
class="cls-threshold cls-threshold-good"
style="left: 20%;"
>
<span>
0.1
</span>
</div>
<div
class="cls-threshold cls-threshold-poor"
style="left: 50%;"
>
<span>
0.25
</span>
</div>
</div>
</div>
<div
class="cls-rating"
>
<span
class="rating-emoji status-badge status-badge--good"
/>
<span
class="rating-text"
>
Good - Meets Core Web Vitals threshold
</span>
</div>
</div>
</section>
<section
class="section info-section"
>
<h3>
<span
class="action-badge action-badge--suggestion"
/>
How to Reduce CLS
</h3>
<ul
class="tips-list"
>
<li>
Add
<code>
width
</code>
and
<code>
height
</code>
attributes to images and videos
</li>
<li>
Use
<code>
aspect-ratio
</code>
CSS property for responsive media
</li>
<li>
Reserve space for ads, embeds, and iframes with
<code>
min-height
</code>
</li>
<li>
Preload fonts and use
<code>
font-display: swap
</code>
</li>
<li>
Avoid inserting content above existing content
</li>
<li>
Use CSS
<code>
transform
</code>
for animations instead of layout properties
</li>
</ul>
</section>
<div
class="empty-state"
>
<span
class="empty-state-icon empty-state-icon--chart"
/>
<p>
No layout shifts detected yet
</p>
<p
class="hint"
>
Layout shifts will be recorded as they occur.
</p>
</div>
</div>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/__tests__/CLSTab.test.tsx:71:21
|
|
Complete job
Node.js 20 actions are deprecated. The following actions are running on Node.js 20 and may not work as expected: actions/checkout@v4, actions/setup-node@v4. Actions will be forced to run with Node.js 24 by default starting June 16th, 2026. Node.js 20 will be removed from the runner on September 16th, 2026. Please check if updated versions of these actions are available that support Node.js 24. To opt into Node.js 24 now, set the FORCE_JAVASCRIPT_ACTIONS_TO_NODE24=true environment variable on the runner or in your workflow file. Once Node.js 24 becomes the default, you can temporarily opt out by setting ACTIONS_ALLOW_USE_UNSECURE_NODE_VERSION=true. For more information see: https://github.blog/changelog/2025-09-19-deprecation-of-node-20-on-github-actions-runners/
|
|
Test debt warning
Pre-existing test debt detected. Some tests fail because they assert against emoji characters removed in v2.0.0. See CONTRIBUTING.md 'Known test debt' section. This does NOT block your PR — fixing one of these tests is a great first contribution.
|
background
wait
wait-all
cancel
parallel
Loading