Fix keyboard focus indicator for "View Details" button in Report Card manifest section (#5000)

## Summary

Adds visible focus indicators to the "View Details" button in the Report
Card's Manifest region to improve keyboard accessibility for users
navigating with keyboard-only input.

## Problem

The "View Details" button (implemented as a Shoelace `sl-details`
component) in the Report Card's Manifest section did not display a
visible focus indicator when navigated to using keyboard navigation.
This creates an accessibility barrier for keyboard-only users and users
with low vision who cannot determine which element currently has focus.

## Solution

Added CSS focus styles using the `:focus-visible` pseudo-class to ensure
the button shows a clear visual indicator when focused via keyboard
navigation:

```css
sl-details:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

sl-details::part(header):focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
```

## Changes Made

- **Added focus styles** in
`apps/pwabuilder/src/script/pages/app-report.ts` (8 lines of CSS)
- **Added test case** in `apps/pwabuilder/tests/report-card.spec.ts` to
verify focus indicator visibility
- **Updated `.gitignore`** to exclude test artifacts

## Testing

- ✅ Build passes with TypeScript compilation
- ✅ Focus indicator displays as a visible purple outline when navigating
with keyboard
- ✅ Test case verifies focus behavior programmatically
- ✅ Follows existing code patterns and WCAG 2.2 Focus Visible guidelines

## Screenshot

![Focus indicator
demonstration](https://github.com/user-attachments/assets/23e2f6bd-3366-45e2-bd0a-9007efc0dada)

The screenshot shows the "View Details" button with a visible purple
focus outline when navigated to using keyboard navigation.

## Accessibility Impact

This change ensures compliance with **WCAG 2.2 Success Criterion 2.4.7
(Focus Visible)** by providing a clear visual indication of which
interactive element has keyboard focus, enabling keyboard-only users to
successfully navigate the Report Card interface.

Fixes #4976.

> [!WARNING]
>
> <details>
> <summary>Firewall rules blocked me from connecting to one or more
addresses</summary>
>
> #### 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)
>
> If you need me to access, download, or install something from one of
these locations, you can either:
>
> - Configure [Actions setup
steps](https://gh.io/copilot/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](https://gh.io/copilot/firewall-config)
>
> </details>



<!-- START COPILOT CODING AGENT TIPS -->
---

💡 You can make Copilot smarter by setting up custom instructions,
customizing its development environment and configuring Model Context
Protocol (MCP) servers. Learn more [Copilot coding agent
tips](https://gh.io/copilot-coding-agent-tips) in the docs.

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: JudahGabriel <312936+JudahGabriel@users.noreply.github.com>

Author: Copilot

.gitignore

@@ -8,3 +8,5 @@ sl-icons/
 types/
 .env
 docs/**/_sidebar.md
+playwright-report/
+test-results/

apps/pwabuilder/playwright-report/index.html

@@ -253,6 +253,16 @@ export class AppReport extends LitElement {
           padding: 5px 20px;
         }
 
+        sl-details:focus-visible {
+          outline: 2px solid var(--primary-color);
+          outline-offset: 2px;
+        }
+
+        sl-details::part(header):focus-visible {
+          outline: 2px solid var(--primary-color);
+          outline-offset: 2px;
+        }
+
         sl-details::part(summary-icon){
           display: none;
         }

apps/pwabuilder/src/script/pages/app-report.ts

@@ -57,4 +57,41 @@ test('ensure Package For Stores button is not disabled for demo app', async ({ p
     // test manifest score
     const packageForStoresButton = page.locator('text=Package For Stores');
     await expect(await packageForStoresButton.isDisabled()).toBe(false);
+})
+
+test('ensure View Details button has visible focus indicator', async ({ page }) => {
+    // find the button with the text "Login"
+    const demoButton = page.locator('id=demo-action');
+
+    // click demo button to start new test
+    await demoButton.click();
+
+    // wait for network to be done
+    await page.waitForLoadState('networkidle');
+
+    // our url should contain /reportcard
+    await expect(page.url()).toContain('/reportcard');
+
+    // wait for tests to end
+    await page.waitForLoadState('networkidle');
+
+    // wait for manifest details to be loaded
+    await page.waitForSelector("id=mani-details");
+
+    // Get the manifest details element (the View Details button)
+    const viewDetailsButton = page.locator('id=mani-details');
+    
+    // Ensure the element is visible before focusing
+    await expect(viewDetailsButton).toBeVisible();
+    
+    // Focus the element using keyboard navigation
+    await viewDetailsButton.focus();
+
+    // Check that the element has focus
+    await expect(viewDetailsButton).toBeFocused();
+    
+    // Check that the focused element has a visible outline (focus indicator)
+    // We expect the focus styles to be applied
+    const focusedElement = page.locator('id=mani-details:focus-visible');
+    await expect(focusedElement).toHaveCSS('outline-width', '2px');
 })