Merge branch 'main' into copilot/fix-4967

JudahGabriel · web-flow · commit 9838d4588420 · 2025-07-08T09:56:09.000-07:00
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -28,7 +28,7 @@ jobs:
       run: npm install @playwright/test --save-dev
     - name: Run Playwright tests
       run: npx playwright test tests/basic.spec.ts tests/packaging.spec.ts tests/report-card.spec.ts
-    - uses: actions/upload-artifact@v3
+    - uses: actions/upload-artifact@v4
       if: always()
       with:
         name: playwright-report
diff --git a/.github/workflows/vscode-main.yml b/.github/workflows/vscode-main.yml
@@ -50,7 +50,7 @@ jobs:
           npx vsce package --out package.vsix
           
       - name: Upload
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: vsix-package
           path: package.vsix
diff --git a/.github/workflows/vscode-preview.yml b/.github/workflows/vscode-preview.yml
@@ -50,7 +50,7 @@ jobs:
           npx vsce package --out preview.vsix
           
       - name: Upload
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: vsix-package
           path: preview.vsix
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,5 @@ sl-icons/
 types/
 .env
 docs/**/_sidebar.md
+playwright-report/
+test-results/
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -5,7 +5,7 @@
     "configurations": [
         {
             "name": "Debug in VSCode",
-            "type": "edge",
+            "type": "msedge",
             "request": "launch",
             "version": "stable",
             "url": "http://localhost:8000",
diff --git a/apps/pwabuilder/playwright-report/index.html b/apps/pwabuilder/playwright-report/index.html
diff --git a/apps/pwabuilder/src/script/components/arrow-link.ts b/apps/pwabuilder/src/script/components/arrow-link.ts
@@ -35,6 +35,11 @@ export class ArrowLink extends LitElement {
         cursor: pointer;
       }
 
+      .arrow_anchor:focus-visible {
+        outline: 2px solid #000000;
+        outline-offset: 2px;
+      }
+
       .arrow_anchor:hover img {
         animation: bounce 1s;
       }
diff --git a/apps/pwabuilder/src/script/components/windows-form.ts b/apps/pwabuilder/src/script/components/windows-form.ts
@@ -103,6 +103,11 @@ export class WindowsForm extends AppPackageFormBase {
           padding: 0 10px;
         }
 
+        sl-details::part(header):focus-visible {
+          outline: 2px solid #000000;
+          outline-offset: -2px;
+        }
+
         .details-summary {
           display: flex;
           align-items: center;
diff --git a/apps/pwabuilder/src/script/pages/app-home.styles.ts b/apps/pwabuilder/src/script/pages/app-home.styles.ts
@@ -141,6 +141,7 @@ export const homeStyles = css`
     grid-area: 1 / 1 / auto / 5;
     display: flex;
     flex-direction: column;
+    width: 100%;
   }
   #input-box::part(input) {
     -webkit-text-fill-color: var(--sl-input-color);
diff --git a/apps/pwabuilder/src/script/pages/app-report.ts b/apps/pwabuilder/src/script/pages/app-report.ts
@@ -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;
         }
diff --git a/apps/pwabuilder/tests/report-card.spec.ts b/apps/pwabuilder/tests/report-card.spec.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');
 })

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`"configurations": [`
`6`	`6`	`{`
`7`	`7`	`"name": "Debug in VSCode",`
`8`		`- "type": "edge",`
	`8`	`+ "type": "msedge",`
`9`	`9`	`"request": "launch",`
`10`	`10`	`"version": "stable",`
`11`	`11`	`"url": "http://localhost:8000",`
Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,11 @@ export class ArrowLink extends LitElement {`
`35`	`35`	`cursor: pointer;`
`36`	`36`	`}`
`37`	`37`
	`38`	`+ .arrow_anchor:focus-visible {`
	`39`	`+ outline: 2px solid #000000;`
	`40`	`+ outline-offset: 2px;`
	`41`	`+ }`
	`42`	`+`
`38`	`43`	`.arrow_anchor:hover img {`
`39`	`44`	`animation: bounce 1s;`
`40`	`45`	`}`
Original file line number	Diff line number	Diff line change
@@ -141,6 +141,7 @@ export const homeStyles = css`
`141`	`141`	`grid-area: 1 / 1 / auto / 5;`
`142`	`142`	`display: flex;`
`143`	`143`	`flex-direction: column;`
	`144`	`+ width: 100%;`
`144`	`145`	`}`
`145`	`146`	`#input-box::part(input) {`
`146`	`147`	`-webkit-text-fill-color: var(--sl-input-color);`