[do not review] Use select for text visualizer format picker

[adamint]

Description

Fixes #17498

The Text Visualizer dialog now uses a FluentSelect for the format picker instead of a menu-style button. This gives the format picker standard keyboard selection behavior while preserving the available/disabled format options, fixed-format hiding, and user-selected format across parent re-renders.

User-facing usage

The Select format control now renders as a select/listbox control with options:

Unformatted
Markdown
JSON (disabled when unavailable)
XML (disabled when unavailable)

Annotated evidence captured the before state as a Select format button and the after state as a fluent-select with aria-label="Select format" and keyboard-accessible options.

Checklist

• Is this feature complete?
  • Yes. Ready to ship.
  • No. Follow-up changes expected.
• Are you including unit tests for the changes and scenario tests if relevant?
  • Yes
  • No
• Did you add public API?
  • Yes
    • If yes, did you have an API Review for it?
      • Yes
      • No
    • Did you add <remarks /> and <code /> elements on your triple slash comments?
      • Yes
      • No
  • No
• Does the change make any security assumptions or guarantees?
  • Yes
    • If yes, have you done a threat model and had a security review?
      • Yes
      • No
  • No

[github-actions]

🚀 Dogfood this PR with:

⚠️ WARNING: Do not do this without first carefully reviewing the code of this PR to satisfy yourself it is safe.

curl -fsSL https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.sh | bash -s -- 17787

Or

• Run remotely in PowerShell:

iex "& { $(irm https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.ps1) } 17787"

[adamint]

Uploaded annotated evidence artifacts here: https://github.com/adamint/aspire/tree/a11y-artifacts-20260601042635/17498

Most useful files:

• Annotated before video: https://raw.githubusercontent.com/adamint/aspire/a11y-artifacts-20260601042635/17498/annotated-before.webm
• Annotated after video: https://raw.githubusercontent.com/adamint/aspire/a11y-artifacts-20260601042635/17498/annotated-after.webm
• Before picker JSON: https://raw.githubusercontent.com/adamint/aspire/a11y-artifacts-20260601042635/17498/17498-before-fix.json
• After picker JSON: https://raw.githubusercontent.com/adamint/aspire/a11y-artifacts-20260601042635/17498/17498-after-fix.json

The before capture shows Select format as a button/menu-style control. The after capture shows a fluent-select with aria-label=\"Select format\" and keyboard-accessible options.

Draft fix PR: #17787

[adamint]

I verified this in a real browser with Playwright against main and this PR. Repro host was the dashboard mock app with TestResource plus a project path so the text visualizer action is available.

Steps: open the resource text visualizer and inspect the format picker. On main, the picker rendered as a button labeled Select format. On this PR, it renders as one fluent-select with accessible label Select format.

Proof:

{"pr":"17787","phase":"base","button":"Select format","selectCount":0}
{"pr":"17787","phase":"pr","selectCount":1,"selectTag":"FLUENT-SELECT","aria":"Select format"}

[adamint]

Adding the visual proof too; the earlier verification comment had the browser details but the proof was too JSON-heavy.

I used Chromium against seeded dashboard mock host with TestResource / TestResource child. Steps: opened the text visualizer from a resource row and inspected the format picker controls in the dialog.

main / before: Format controls: FLUENT-BUTTON: Select format; FLUENT-BUTTON: Close; FLUENT-BUTTON: Copy to clipboard

this PR / after: Format controls: FLUENT-SELECT: Select format; FLUENT-BUTTON: Close; FLUENT-BUTTON: Copy to clipboard

MP4 proof, not webm, with visible keyboard/mouse/focus trace overlay: https://raw.githubusercontent.com/adamint/aspire/cd33e79ec249a7354240cc851b921502ada33d1a/proof/a11y/17787/pr-17787-visual-proof.mp4

Contact sheet with the before/after screenshots: https://raw.githubusercontent.com/adamint/aspire/cd33e79ec249a7354240cc851b921502ada33d1a/proof/a11y/17787/pr-17787-contact-sheet.png

[adamint]

Condensed into #17929 to keep the dialog/control a11y changes together. Closing this smaller draft.