feat: add functional tests #111
Conversation
…ted state management
…als tables using useEffect
…mic page visibility
…al count for apps, datasets, and workerpools
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…ockchainComputing/explorer-v2 into feature/add-assets-order
…and SchemaSearch components
… in Footer, Navbar, and AddressChip
…k Explorer link in SmartLinkGroup; add role to Tabs component
…and attributes to input and error messages
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…ecBlockchainComputing/explorer-v2 into feature/better-accessibility
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
This is the final PR Bugbot will review for you during this billing cycle
Your free Bugbot reviews will reset on January 10
Details
Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.
To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.
| left: `${indicatorStyle.left}px`, | ||
| width: `${indicatorStyle.width}px`, | ||
| }} | ||
| role="tablist" |
There was a problem hiding this comment.
Tablist role placed on wrong element
Medium Severity
The role="tablist" attribute is added to a decorative indicator <div> that visually shows the active tab selection. This div has no children and is purely for visual styling. The actual <Button> elements with role="tab" are rendered as siblings, not children of this tablist. According to ARIA specifications, tab elements must be owned by or contained within the tablist. The role="tablist" belongs on the outer container div (the one with ref={containerRef}) that actually holds the tab buttons.
| type="button" | ||
| className="inline-flex items-center gap-2" | ||
| id="logout-button" | ||
| aria-label="Logout" |
There was a problem hiding this comment.
Duplicate HTML id attribute for logout buttons
Medium Severity
Two elements are assigned id="logout-button" - one in the desktop dropdown menu (line 83) and another in the mobile navigation menu (line 137). HTML IDs must be unique within a document. Duplicate IDs can cause unpredictable behavior with document.getElementById(), CSS ID selectors, accessibility tools, and test automation frameworks that rely on unique element identification.
Additional Locations (1)
| key={label} | ||
| data-tab-index={index} | ||
| variant="link" | ||
| role="tab" |
There was a problem hiding this comment.
Tab role added without required aria-selected attribute
Medium Severity
The role="tab" attribute was added to buttons but without the required aria-selected attribute. The component tracks selection state (currentTab === index) for visual styling, but screen readers cannot determine which tab is currently selected. When using ARIA tab roles, aria-selected="true" must be set on the active tab and aria-selected="false" on inactive tabs for the widget to function correctly with assistive technology.
… are installed before checks
| onMouseEnter={handleMouseEnter} | ||
| onMouseLeave={handleMouseLeave} | ||
| className="hover:before:bg-muted active:before:bg-secondary relative z-0 -mx-1 -my-1 flex items-center gap-1 px-1 py-1 transition-colors before:absolute before:inset-0 before:-z-10 before:rounded-lg before:duration-200 active:before:scale-x-[0.98] active:before:scale-y-[0.94]" | ||
| id="copy-button" |
There was a problem hiding this comment.
Static ID on reusable component causes duplicates
Medium Severity
The CopyButton component has a hardcoded id="copy-button", but this component is reusable and rendered multiple times on the same page (e.g., via SmartLinkGroup in tables showing deals, tasks, addresses). This creates multiple elements with the same ID in the DOM, which is invalid HTML and can cause issues with getElementById(), accessibility tools, and test selectors targeting this ID.
…l and enhancing main.yml
|
|
||
| // Verify that the TASKS tab is visible | ||
| await expect(page.getByRole('tab', { name: 'TASKS' })).toBeVisible(); | ||
| await expect(page.getByRole('tab', { name: 'TASKS' })).toBeVisible(); |
There was a problem hiding this comment.
Duplicate test assertion for TASKS tab visibility
Low Severity
Both test files contain identical duplicate assertions checking for TASKS tab visibility on consecutive lines. The same expect(page.getByRole('tab', { name: 'TASKS' })).toBeVisible() appears twice in a row, which appears to be a copy-paste error that doesn't add any test value.
Additional Locations (1)
…nd Playwright tests
| : 'Search for the entered value' | ||
| } | ||
| tabIndex={0} | ||
| > |
There was a problem hiding this comment.
Layout spacing on desktop from visibility change
Low Severity
The outer div previously had sm:hidden which completely removed it from layout on desktop. This class was removed, and sm:sr-only was added only to the inner div. Since sr-only uses position: absolute, the inner content is taken out of document flow, but the outer div still renders with its mt-4 margin (or mt-10 when error). This creates unintended vertical spacing of 16-40px below the search bar on desktop screens that wasn't there before.
Note
Introduces Playwright-based end-to-end testing and runs it in CI.
@playwright/test,playwright.config.ts, andnpm testscript; ignore Playwright artifacts in.gitignoreImproves accessibility/selectors to stabilize tests and UX.
aria-labels/roles/ids/button types acrossCopyButton,Footer,ModeToggle,SmartLinkGroup,AddressChip,Navbar,Tabs,SchemaSearch, andSearcherBarWritten by Cursor Bugbot for commit ff4e3a5. This will update automatically on new commits. Configure here.