feat(MethodChip): responsive fixes and a11y improvements (GrantFox FW… - #829
Merged
greatest0fallt1me merged 3 commits intoJul 29, 2026
Annotations
10 errors and 1 warning
|
Run tests:
src/utils/format.ts#L33
TypeError: Cannot read properties of undefined (reading 'toFixed')
❯ Module.formatPrice src/utils/format.ts:33:16
❯ ApiCard src/components/ApiCard.tsx:907:19
❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18
❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13
❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16
❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14
❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12
❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5
❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26473:7
❯ recoverFromConcurrentError node_modules/react-dom/cjs/react-dom.development.js:25889:20
|
|
Run tests:
src/ApiUsage.test.tsx#L92
AssertionError: expected +0 to be 5 // Object.is equality
- Expected
+ Received
- 5
+ 0
❯ src/ApiUsage.test.tsx:92:31
|
|
Run tests:
src/ApiUsage.test.tsx#L62
TestingLibraryElementError: Unable to find an accessible element with the role "navigation" and name `/breadcrumb/i`
There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole
Ignored nodes: comments, script, style
<body>
<div>
<div
aria-busy="true"
aria-label="API usage loading shell"
class="api-usage-page"
>
<div
aria-hidden="true"
style="display: flex; gap: 8px; margin-bottom: 24px;"
>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 80px; height: 16px;"
/>
<span
style="color: var(--text-secondary);"
>
/
</span>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 160px; height: 16px;"
/>
</div>
<div
aria-hidden="true"
class="api-header"
style="margin-bottom: 24px;"
>
<div
class="api-header-info"
style="display: flex; gap: 16px; align-items: center;"
>
<div
class="api-logo"
>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 56px; height: 56px; border-radius: 12px;"
/>
</div>
<div
style="display: grid; gap: 8px; flex: 1 1 0%;"
>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 40%; height: 28px;"
/>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 60%; height: 16px;"
/>
</div>
</div>
<div
class="api-header-actions"
style="display: flex; gap: 12px;"
>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 150px; height: 36px; border-radius: 8px;"
/>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 90px; height: 36px; border-radius: 8px;"
/>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 110px; height: 36px; border-radius: 8px;"
/>
</div>
</div>
<div
aria-hidden="true"
class="surface api-key-section"
style="margin-bottom: 24px;"
>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 100px; height: 20px; margin-bottom: 16px;"
/>
<div
class="api-key-card"
style="padding: 20px;"
>
<div
class="api-key-display"
style="display: flex; gap: 12px; align-items: center;"
>
<div
class="key-input-group"
style="flex: 1 1 0%;"
>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 100%; height: 38px; border-radius: 8px;"
/>
</div>
<div
class="key-actions"
style="display: flex; gap: 12px;"
>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 80px; height: 38px; border-radius: 8px;"
|
|
Run tests:
src/ApiUsage.test.tsx#L49
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name `/Reset Filters/i`
There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole
Ignored nodes: comments, script, style
<body>
<div>
<div
aria-busy="true"
aria-label="API usage loading shell"
class="api-usage-page"
>
<div
aria-hidden="true"
style="display: flex; gap: 8px; margin-bottom: 24px;"
>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 80px; height: 16px;"
/>
<span
style="color: var(--text-secondary);"
>
/
</span>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 160px; height: 16px;"
/>
</div>
<div
aria-hidden="true"
class="api-header"
style="margin-bottom: 24px;"
>
<div
class="api-header-info"
style="display: flex; gap: 16px; align-items: center;"
>
<div
class="api-logo"
>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 56px; height: 56px; border-radius: 12px;"
/>
</div>
<div
style="display: grid; gap: 8px; flex: 1 1 0%;"
>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 40%; height: 28px;"
/>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 60%; height: 16px;"
/>
</div>
</div>
<div
class="api-header-actions"
style="display: flex; gap: 12px;"
>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 150px; height: 36px; border-radius: 8px;"
/>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 90px; height: 36px; border-radius: 8px;"
/>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 110px; height: 36px; border-radius: 8px;"
/>
</div>
</div>
<div
aria-hidden="true"
class="surface api-key-section"
style="margin-bottom: 24px;"
>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 100px; height: 20px; margin-bottom: 16px;"
/>
<div
class="api-key-card"
style="padding: 20px;"
>
<div
class="api-key-display"
style="display: flex; gap: 12px; align-items: center;"
>
<div
class="key-input-group"
style="flex: 1 1 0%;"
>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 100%; height: 38px; border-radius: 8px;"
/>
</div>
<div
class="key-actions"
style="display: flex; gap: 12px;"
>
<div
aria-hidden="true"
class="skeleton skeleton--stellar"
role="presentation"
style="width: 80px; height: 38px; border-radius: 8px;"
|
|
Run tests:
src/components/EmptyState.tsx#L837
TypeError: handleCopy is not a function
❯ onClick src/components/EmptyState.tsx:837:28
❯ HTMLUnknownElement.callCallback node_modules/react-dom/cjs/react-dom.development.js:4164:14
❯ HTMLUnknownElement.callTheUserObjectsOperation node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30
❯ innerInvokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25
❯ invokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3
❯ HTMLUnknownElementImpl._dispatch node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9
❯ HTMLUnknownElementImpl.dispatchEvent node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17
❯ HTMLUnknownElement.dispatchEvent node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34
❯ Object.invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:4213:16
❯ invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:4277:31
This error originated in "src/components/EmptyState.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
The latest test that might've caused the error is "copies the default message when no custom message is provided". It might mean one of the following:
- The error was thrown, while Vitest was running this test.
- If the error occurred after the test had been completed, this was the last documented test before it was thrown.
|
|
Run tests:
src/components/EmptyState.tsx#L837
TypeError: handleCopy is not a function
❯ onClick src/components/EmptyState.tsx:837:28
❯ HTMLUnknownElement.callCallback node_modules/react-dom/cjs/react-dom.development.js:4164:14
❯ HTMLUnknownElement.callTheUserObjectsOperation node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30
❯ innerInvokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25
❯ invokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3
❯ HTMLUnknownElementImpl._dispatch node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9
❯ HTMLUnknownElementImpl.dispatchEvent node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17
❯ HTMLUnknownElement.dispatchEvent node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34
❯ Object.invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:4213:16
❯ invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:4277:31
This error originated in "src/components/EmptyState.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
The latest test that might've caused the error is "copies the resolved message (message prop takes precedence over description)". It might mean one of the following:
- The error was thrown, while Vitest was running this test.
- If the error occurred after the test had been completed, this was the last documented test before it was thrown.
|
|
Run tests:
src/components/EmptyState.tsx#L837
TypeError: handleCopy is not a function
❯ onClick src/components/EmptyState.tsx:837:28
❯ HTMLUnknownElement.callCallback node_modules/react-dom/cjs/react-dom.development.js:4164:14
❯ HTMLUnknownElement.callTheUserObjectsOperation node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30
❯ innerInvokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25
❯ invokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3
❯ HTMLUnknownElementImpl._dispatch node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9
❯ HTMLUnknownElementImpl.dispatchEvent node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17
❯ HTMLUnknownElement.dispatchEvent node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34
❯ Object.invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:4213:16
❯ invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:4277:31
This error originated in "src/components/EmptyState.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
The latest test that might've caused the error is "reverts 'Copied' feedback after 2 seconds". It might mean one of the following:
- The error was thrown, while Vitest was running this test.
- If the error occurred after the test had been completed, this was the last documented test before it was thrown.
|
|
Run tests:
src/components/EmptyState.tsx#L837
TypeError: handleCopy is not a function
❯ onClick src/components/EmptyState.tsx:837:28
❯ HTMLUnknownElement.callCallback node_modules/react-dom/cjs/react-dom.development.js:4164:14
❯ HTMLUnknownElement.callTheUserObjectsOperation node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30
❯ innerInvokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25
❯ invokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3
❯ HTMLUnknownElementImpl._dispatch node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9
❯ HTMLUnknownElementImpl.dispatchEvent node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17
❯ HTMLUnknownElement.dispatchEvent node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34
❯ Object.invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:4213:16
❯ invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:4277:31
This error originated in "src/components/EmptyState.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
The latest test that might've caused the error is "announces copy success via aria-live region". It might mean one of the following:
- The error was thrown, while Vitest was running this test.
- If the error occurred after the test had been completed, this was the last documented test before it was thrown.
|
|
Run tests:
src/components/EmptyState.tsx#L837
TypeError: handleCopy is not a function
❯ onClick src/components/EmptyState.tsx:837:28
❯ HTMLUnknownElement.callCallback node_modules/react-dom/cjs/react-dom.development.js:4164:14
❯ HTMLUnknownElement.callTheUserObjectsOperation node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30
❯ innerInvokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25
❯ invokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3
❯ HTMLUnknownElementImpl._dispatch node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9
❯ HTMLUnknownElementImpl.dispatchEvent node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17
❯ HTMLUnknownElement.dispatchEvent node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34
❯ Object.invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:4213:16
❯ invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:4277:31
This error originated in "src/components/EmptyState.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
The latest test that might've caused the error is "shows 'Copied' feedback after clicking". It might mean one of the following:
- The error was thrown, while Vitest was running this test.
- If the error occurred after the test had been completed, this was the last documented test before it was thrown.
|
|
Run tests:
src/components/EmptyState.tsx#L837
TypeError: handleCopy is not a function
❯ onClick src/components/EmptyState.tsx:837:28
❯ HTMLUnknownElement.callCallback node_modules/react-dom/cjs/react-dom.development.js:4164:14
❯ HTMLUnknownElement.callTheUserObjectsOperation node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30
❯ innerInvokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25
❯ invokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3
❯ HTMLUnknownElementImpl._dispatch node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9
❯ HTMLUnknownElementImpl.dispatchEvent node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17
❯ HTMLUnknownElement.dispatchEvent node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34
❯ Object.invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:4213:16
❯ invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:4277:31
This error originated in "src/components/EmptyState.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
The latest test that might've caused the error is "copies the message text to clipboard on click". It might mean one of the following:
- The error was thrown, while Vitest was running this test.
- If the error occurred after the test had been completed, this was the last documented test before it was thrown.
|
|
Complete job
Node.js 20 is deprecated. The following actions target Node.js 20 but are being forced to run on Node.js 24: actions/checkout@v4, actions/setup-node@v4. For more information see: https://github.blog/changelog/2025-09-19-deprecation-of-node-20-on-github-actions-runners/
|
background
wait
wait-all
cancel
parallel
Loading