🐛 Fix DOM nesting and accessibility violations (Auto-QA)

[Copilot]

Auto-QA detected several HTML content-model violations and missing accessibility attributes across the UI. These cause React DOM nesting warnings and screen-reader/keyboard-navigation issues.

---

📝 Summary of Changes

Fixes block elements inside <button> phrasing-content model, removes unannotated clickable <div>s, and marks backdrop overlays as aria-hidden.

---

Changes Made

• AlertRuleEditor.tsx — Replace <p> and <div> block elements inside <button> (condition-type selectors and AI-diagnosis toggle) with <span className="block …"> to satisfy the HTML phrasing-content model
• Deploy.tsx — Same <div>→<span className="block"> fix inside group-picker buttons; add aria-hidden="true" to modal backdrop; add role="presentation" to stop-propagation modal container
• ClusterGrid.tsx — Remove onClick={e => e.stopPropagation()} from non-interactive wrapper <div> (child buttons already call e.stopPropagation() in handleAction); add role="presentation"
• ClusterAssignmentPanel.tsx — Add aria-hidden="true" to click-outside backdrop overlay
• PayloadCard.tsx — Add aria-hidden="true" to click-outside backdrop overlay

Pattern fixed in AlertRuleEditor and Deploy:

// Before — <p>/<div> violates button's phrasing-content model
<button onClick={…}>
  <div className="flex items-center gap-2">
    <Bot />
    <div>
      <span>AI Diagnosis</span>
      <p className="text-xs …">Auto-diagnose with AI</p>  {/* ❌ block in button */}
    </div>
  </div>
</button>

// After — all inline via <span>
<button onClick={…}>
  <span className="flex items-center gap-2">
    <Bot />
    <span>
      <span className="block text-sm font-medium …">AI Diagnosis</span>
      <span className="block text-xs …">Auto-diagnose with AI</span>
    </span>
  </span>
</button>

Many other violations flagged by Auto-QA were static-analysis false positives (string-only <p> content, SVG elements misidentified as <li>, JS template-string HTML in FlightPlanBlueprint.tsx). No code changes needed for those.

---

Checklist

• I used a coding agent (Claude Code, Copilot, Gemini, or Codex) to generate/review this code
• I have reviewed the project's contribution guidelines
• New cards target console-marketplace, not this repo
• isDemoData is wired correctly (cards show Demo badge when using demo data)
• I have written unit tests for the changes (if applicable)
• I have tested the changes locally and ensured they work as expected
• All commits are signed with DCO (git commit -s)

---

Screenshots or Logs (if applicable)

N/A — structural/accessibility fixes with no visual change.

---

👀 Reviewer Notes

The false-positive violations (Tour, Onboarding, CardHistory, PageErrorBoundary, BlueprintDefs, FlightPlanBlueprint, etc.) were confirmed to have correct DOM structure; only the five files listed above contained genuine violations.

---

📱 Kick off Copilot coding agent tasks wherever you are with GitHub Mobile, available on iOS and Android.

[netlify]

✅ Deploy Preview for kubestellarconsole ready!

Name	Link
🔨 Latest commit	74b14a2
🔍 Latest deploy log	https://app.netlify.com/projects/kubestellarconsole/deploys/69cbf19091aa790008a28953
😎 Deploy Preview	https://deploy-preview-3908.console-deploy-preview.kubestellar.io
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

👋 Hey @Copilot — thanks for opening this PR!

🤖 This project is developed exclusively using AI coding assistants.

Please do not attempt to code anything for this project manually.
All contributions should be authored using an AI coding tool such as:

• Claude Code (Opus 4.5 / 4.6) — recommended
• GitHub Copilot
• Cursor
• Other AI coding assistants

This ensures consistency in code style, architecture patterns, test coverage,
and commit quality across the entire codebase.

---

This is an automated message.

[github-actions]

❌ PR Title Verification Failed

Your PR title does not follow the required format.

Current title: Fix DOM nesting and accessibility violations (Auto-QA)

Required Format

PR titles must start with one of these emoji prefixes:

Emoji	Meaning
⚠️	Breaking change
✨	Non-breaking feature
🐛	Patch fix / Bug fix
📖	Documentation
🚀	Release
🌱	Infra/Tests/Other

How to Fix

Edit your PR title to start with the appropriate emoji. For example:

• ✨ Add new feature for user authentication
• 🐛 Fix crash when loading empty config
• 📖 Update installation guide

You can edit the title by clicking the Edit button next to your PR title.

---

This comment was automatically posted by the PR Title Verifier workflow.

[Copilot]

Copilot wasn't able to review any files in this pull request.

[kubestellar-prow]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please ask for approval from clubanderson. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[github-actions]

Thank you for your contribution! Your PR has been merged.

Check out what's new:

• KubeStellar Console — Live multi-cluster dashboard
• Marketplace — Community extensions
• Knowledge Base — Troubleshooting and how-tos

Stay connected: Slack #kubestellar-dev | Multi-Cluster Survey