Skip to content

[do not review] Restore focus after Resources view option selection - #17776

Closed
Adam Ratzman (adamint) wants to merge 3 commits into
microsoft:mainfrom
adamint:adamint/a11y-17656
Closed

[do not review] Restore focus after Resources view option selection#17776
Adam Ratzman (adamint) wants to merge 3 commits into
microsoft:mainfrom
adamint:adamint/a11y-17656

Conversation

@adamint

@adamint Adam Ratzman (adamint) commented Jun 1, 2026

Copy link
Copy Markdown
Member

Description

Fixes #17656

The Resources page View options menu now returns keyboard focus to the View options button after a menu item is selected. Previously selecting an item could leave focus on <body>, which made keyboard and screen reader users lose their place after the dynamic menu interaction.

The focus restoration is opt-in on Aspire menu components and is enabled only for the Resources View options menu. Other menus keep their existing behavior so item handlers that intentionally move focus, such as chat model selection or dialogs, are not overridden.

User-facing usage

After selecting a View options item such as Collapse child resources, focus remains on the View options button instead of moving out of the page. After-fix Playwright evidence captured:

{
  "selectedItemText": "Collapse child resources",
  "after": {
    "tagName": "FLUENT-BUTTON",
    "ariaLabel": "View options",
    "isBody": false
  }
}

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

@adamint
Restore focus after Resources view option selection
0d8962e 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@github-actions

github-actions Bot commented Jun 1, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

🚀 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 -- 17776

Or

  • Run remotely in PowerShell:
iex "& { $(irm https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.ps1) } 17776"

@adamint

Adam Ratzman (adamint) commented Jun 1, 2026

Copy link
Copy Markdown
Member Author

Evidence artifacts for #17656 are uploaded here: https://github.com/adamint/aspire/tree/a11y-artifacts-20260601042635/17656

After-fix evidence shows selecting Collapse child resources leaves focus on the FLUENT-BUTTON with ariaLabel: View options and isBody: false.

Useful files:

@adamint Adam Ratzman (adamint) mentioned this pull request Jun 1, 2026
Closed
@adamint

Adam Ratzman (adamint) commented Jun 1, 2026

Copy link
Copy Markdown
Member Author

Correction: I replaced the earlier videos with annotated evidence that visibly shows the active element before/after selecting the menu item.

Updated artifact folder: https://github.com/adamint/aspire/tree/a11y-artifacts-20260601042635/17656

Most useful files:

The annotated before capture shows focus falls to BODY after selecting Collapse child resources. The annotated after capture shows focus remains on the FLUENT-BUTTON with ariaLabel: View options.

@github-actions

github-actions Bot commented Jun 1, 2026

Copy link
Copy Markdown
Contributor

Re-running the failed jobs in the CI workflow for this pull request because 1 job was identified as retry-safe transient failures in the CI run attempt.
GitHub was asked to rerun all failed jobs for that attempt, and the rerun is being tracked in the rerun attempt.
The job links below point to the failed attempt jobs that matched the retry-safe transient failure rules.

@github-actions github-actions Bot mentioned this pull request Jun 1, 2026
Open
@adamint

Adam Ratzman (adamint) commented Jun 2, 2026

Copy link
Copy Markdown
Member Author

I verified this in a real browser with Playwright against main and this PR. Repro host was the dashboard mock app with TestResource plus TestResource child, then Resources > View options.

Steps: open View options, activate a menu item, then wait for the popup to close and check document.activeElement. On main, focus stayed/reset inside the dismissed menu item. On this PR, focus returns to the View options button.

Proof:

{"pr":"17776","phase":"base","active":"Collapse child resources"}
{"pr":"17776","phase":"pr","active":"View options"}

@adamint

Adam Ratzman (adamint) commented Jun 2, 2026 •
edited
Loading

Copy link
Copy Markdown
Member Author

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 Resources, clicked View options, selected a menu item, and checked where focus landed.

main / before: After selecting a menu item, focus is on: IntegrationTestApplication Resources Console Structured Traces Metricswarning Endpoint is unsecuredU

this PR / after: After selecting a menu item, focus is on: View options

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

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

before/after accessibility proof for PR #17776

@adamint
Cover resources menu focus restoration wiring
ce58792 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@adamint Adam Ratzman (adamint) changed the title Restore focus after Resources view option selection [do not review] Restore focus after Resources view option selection Jun 2, 2026
@adamint
Close menu through bound open state
4f29bd4 
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@adamint Adam Ratzman (adamint) mentioned this pull request Jun 4, 2026
Merged
14 tasks
@adamint

Adam Ratzman (adamint) commented Jun 4, 2026

Copy link
Copy Markdown
Member Author

Condensed into #17926 to keep the related Resources a11y changes together. Closing this smaller draft.

@microsoft-github-policy-service microsoft-github-policy-service Bot added this to the 13.5 milestone Jun 4, 2026
@adamint Adam Ratzman (adamint) self-assigned this Jun 4, 2026
@github-actions github-actions Bot locked and limited conversation to collaborators Jul 5, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@JamesNK James Newton-King (JamesNK) Awaiting requested review from JamesNK JamesNK will be requested when the pull request is marked ready for review JamesNK is a code owner
Copilot code review Copilot
Copilot will automatically review once the pull request is marked ready for review

Assignees

@adamint Adam Ratzman (adamint)

Labels

area-dashboard

Projects

None yet

Milestone

13.5

Development

Successfully merging this pull request may close these issues.

Keyboard focus moves out of page after selecting menu item from View options:A11y_Aspire Dashboard_Resources_Keyboard

1 participant

@adamint