[Auto-QA] DOM nesting and structure violations found

[clubanderson]

Auto-QA [UI]: DOM Structure

Detected: 2026-07-19T14:00:41.305Z | Focus: UI | Commit: 294a689 | Run: View

Findings

### Button inside button violations
These cause React DOM nesting warnings:
  - `pages/WhiteLabel.tsx:290` — potential nested button
  - `pages/WhiteLabel.tsx:305` — potential nested button
  - `pages/TeamManagement.test.tsx:39` — potential nested button
  - `components/enterprise/__tests__/EnterpriseLayout.test.tsx:46` — potential nested button
  - `components/gpu/GPUReservationsTab.tsx:141` — potential nested button
  - `components/gpu/GPUReservationsTab.tsx:146` — potential nested button
  - `components/gpu/GPUCalendarTab.tsx:131` — potential nested button
  - `components/gpu/ReservationFormModal.tsx:534` — potential nested button
  - `components/deploy/DeployConfirmDialog.tsx:284` — potential nested button
  - `components/deploy/Deploy.tsx:274` — potential nested button

### Block elements inside paragraph tags
Div/section/article cannot be inside <p>:
  - `pages/WhiteLabel.tsx:283` — block element inside <p>
  - `pages/WhiteLabel.tsx:399` — block element inside <p>
  - `pages/WhiteLabel.tsx:484` — block element inside <p>
  - `pages/WhiteLabel.tsx:489` — block element inside <p>
  - `pages/WhiteLabel.tsx:533` — block element inside <p>
  - `pages/WhiteLabel.tsx:545` — block element inside <p>
  - `pages/WhiteLabel.tsx:554` — block element inside <p>
  - `pages/WhiteLabel.tsx:599` — block element inside <p>
  - `pages/Welcome.tsx:237` — block element inside <p>
  - `pages/Welcome.tsx:297` — block element inside <p>

### List item outside list container
<li> elements must be inside <ul> or <ol>:
  - `pages/UnifiedCardTest.tsx:64` — <li> may be outside <ul>/<ol>
  - `components/stellar/CatchUpBanner.tsx:85` — <li> may be outside <ul>/<ol>
  - `components/animations/SimpleGlobe.tsx:50` — <li> may be outside <ul>/<ol>
  - `components/animations/SimpleGlobe.tsx:60` — <li> may be outside <ul>/<ol>
  - `components/drilldown/views/ArgoAppDrillDown.tsx:774` — <li> may be outside <ul>/<ol>

### Nested heading elements
Headings (h1-h6) cannot contain other headings:
  - `components/drilldown/views/PodDrillDown.tsx:248` — nested heading elements

Suggested Improvements

• Fix button-inside-button: use div with role="button" and tabIndex={0}
• Fix interactive elements inside anchor: restructure or use onClick navigation
• Fix block elements inside

  : use

  or appropriately
• Fix nested forms: refactor to single form with fieldsets
• Fix table structure: ensure proper thead/tbody/tr hierarchy
• Fix list items: ensure
• is always inside
  or
  1. Add role and tabIndex to clickable non-interactive elements for accessibility

  PR Guidance: Keep PRs small and focused. Smaller PRs have higher acceptance rates.

  ---

  This issue was automatically created by the Auto-QA workflow during UI focus day.

[github-actions]

🐝 Hi @clubanderson! I'm kubestellar-hive[bot], an automation bot for this repo.

Trusted users — org members and contributors with write access — can mention @kubestellar-hive in a comment to trigger repo automation.
On issues, that mention queues an automated fix attempt. On pull requests, it records extra context for existing automation.
This is not an interactive Q&A bot, so mentions should be treated as requests for automation rather than a conversation.

Automation may take a moment to start, and follow-up happens through workflow activity rather than chat replies.

[clubanderson]

Analysis: All Reported Violations Are False Positives

I have reviewed every reported violation by examining the actual source code. All are scanner false positives caused by naive line-based pattern matching rather than actual AST/DOM traversal.

Button inside button violations

All flagged <button> elements are inside <div> containers, not inside other <button> elements:

• WhiteLabel.tsx:290 & 305 — Tab buttons inside <div role="tablist">. No parent button element.
• TeamManagement.test.tsx:39 — Mock component button inside <div data-testid="team-list">. Test code only.
• EnterpriseLayout.test.tsx:46 — Mock component <button> inside a mock <div>. Test code only.
• GPUReservationsTab.tsx:141 & 146 — Action icon-buttons inside <div className="flex flex-wrap items-center gap-2">. No parent button.
• GPUCalendarTab.tsx:131 — "Add reservation" button inside a positionally-absolute <div>. No parent button.
• ReservationFormModal.tsx:534 — Cancel button (type="button") inside a flex <div>. No parent button.
• DeployConfirmDialog.tsx:284 — Cancel/Confirm buttons inside BaseModal.Footer — which renders a <div>, verified in src/lib/modals/BaseModal.tsx:344-348.
• Deploy.tsx:274 — Group picker button inside <div role="dialog">. No parent button.

Block elements inside paragraph tags

All 10 flagged <p> elements contain only text or inline elements (<span>, <code>). None contain <div> or other block elements. Verified line-by-line in both WhiteLabel.tsx and Welcome.tsx.

List item outside list container

• UnifiedCardTest.tsx:64 — <li> is inside <ul> opened at line 53 of the same file. Valid HTML.
• CatchUpBanner.tsx:85 — <li> is inside <ul> opened at line 73. Valid HTML.
• SimpleGlobe.tsx:50 & 60 — These are SVG <linearGradient> and <line> elements, not HTML <li> elements. The scanner matched the <line string prefix against <li. Classic false positive.
• ArgoAppDrillDown.tsx:774 — <li> is inside <ul> opened at line 761. Valid HTML.

Nested heading elements

• PodDrillDown.tsx:248 — This long inline line contains exactly one <h3> element (opens at character 436, closes at character 544). No heading is nested inside another heading.

---

Conclusion: The scanner's heuristics produced 100% false positives on this scan. No actual DOM nesting violations exist. Closing as not planned.