Fix keyboard focus indicators for All Settings dropdown and Join Us button in Portals

[Copilot]

Problem

When navigating via keyboard in the PWA Builder Portals section, the 'All Settings' dropdown button and 'Join Us' button do not display visible focus indicators, making it unclear which element is currently focused. This violates WCAG 2.2 focus-visible accessibility guidelines and creates barriers for keyboard-only users and users with low vision.

Solution

Added proper :focus-visible CSS styles to both components to display clear black outlines when focused via keyboard navigation.

Changes Made

1. All Settings Dropdown (windows-form.ts):

sl-details:focus-visible::part(header) {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

2. Join Us Button (arrow-link.ts):

.arrow_anchor:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

Testing

• ✅ Verified focus indicators appear correctly when navigating with Tab key
• ✅ Tested with programmatic focus to ensure styles are applied
• ✅ Confirmed build compiles successfully without errors
• ✅ Validated TypeScript compilation passes

Accessibility Compliance

Both elements now show clearly visible black outlines (2px solid black with 2px offset) when focused using keyboard navigation, meeting WCAG 2.2 Focus Visible (SC 2.4.7) requirements.

Before/After

The test page demonstrates the fixed focus indicators working correctly:

Fixes #4975.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• googlechromelabs.github.io
  • Triggering command: node install.mjs (dns block)
• https://storage.googleapis.com/chrome-for-testing-public/127.0.6533.88/linux64/chrome-headless-shell-linux64.zip
  • Triggering command: node install.mjs (http block)
• https://storage.googleapis.com/chrome-for-testing-public/127.0.6533.88/linux64/chrome-linux64.zip
  • Triggering command: node install.mjs (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[microsoft-github-policy-service]

Thanks @Copilot for opening a Pull Request! The reviewers will test the PR and highlight if there is any conflict or changes required. If the PR is approved we will proceed to merge the pull request 🙌