feat: implement issue #429 — SonarCloud: miscellaneous findings

deploy/index.html

@@ -184,7 +184,7 @@
       }
       .status-info {
         background: #e8f0fe;
-        color: #1a73e8;
+        color: #1765cc;
       }
       .status-ok {
         background: #e6f4ea;

deploy/tests/ui.spec.js

@@ -274,7 +274,7 @@
   }) => {
     await signIn(page)
     // Default mock returns empty files array
     await page.waitForTimeout(500)
     await expect(page.locator('#step3-card')).toBeHidden()
   })
 
@@ -1290,6 +1290,37 @@
     await expect(page.locator('#status-msg.status-error')).toBeVisible()
   })
 
+  test('status-info banner meets WCAG AA contrast (>= 4.5:1)', async ({
+    page,
+  }) => {
+    const contrast = await page.evaluate(() => {
+      const el = document.createElement('div')
+      el.className = 'status-msg status-info'
+      el.textContent = 'sample'
+      document.body.appendChild(el)
+      const cs = getComputedStyle(el)
+      const fg = cs.color
+      const bg = cs.backgroundColor
+      el.remove()
+
+      const channels = (s) =>
+        ((s || '').match(/\d+(\.\d+)?/g) || []).map(Number)
+      const luminance = ([r, g, b]) => {
+        const lin = [r, g, b].map((v) => {
+          v /= 255
+          return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4)
+        })
+        return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2]
+      }
+      const l1 = luminance(channels(fg))
+      const l2 = luminance(channels(bg))
+      const lighter = Math.max(l1, l2)
+      const darker = Math.min(l1, l2)
+      return (lighter + 0.05) / (darker + 0.05)
+    })
+    expect(contrast).toBeGreaterThanOrEqual(4.5)
+  })
+
   test('successful deploy shows status-ok class', async ({ page }) => {
     await mockSuccessfulDeploy(page)
     await signIn(page)

gas-installer/Index.html

@@ -168,7 +168,7 @@
       }
       .status-info {
         background: #e8f0fe;
-        color: #1a73e8;
+        color: #1765cc;
       }
       .status-ok {
         background: #e6f4ea;

gas-installer/tests/ui.spec.js

@@ -205,6 +205,37 @@ test.describe('gas-installer Index.html', () => {
     await expect(page.locator('#status-msg.status-info')).toBeVisible()
   })
 
+  test('status-info banner meets WCAG AA contrast (>= 4.5:1)', async ({
+    page,
+  }) => {
+    const contrast = await page.evaluate(() => {
+      const el = document.createElement('div')
+      el.className = 'status-msg status-info'
+      el.textContent = 'sample'
+      document.body.appendChild(el)
+      const cs = getComputedStyle(el)
+      const fg = cs.color
+      const bg = cs.backgroundColor
+      el.remove()
+
+      const channels = (s) =>
+        ((s || '').match(/\d+(\.\d+)?/g) || []).map(Number)
+      const luminance = ([r, g, b]) => {
+        const lin = [r, g, b].map((v) => {
+          v /= 255
+          return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4)
+        })
+        return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2]
+      }
+      const l1 = luminance(channels(fg))
+      const l2 = luminance(channels(bg))
+      const lighter = Math.max(l1, l2)
+      const darker = Math.min(l1, l2)
+      return (lighter + 0.05) / (darker + 0.05)
+    })
+    expect(contrast).toBeGreaterThanOrEqual(4.5)
+  })
+
   test('showStatus ok applies status-ok class', async ({ page }) => {
     await page.locator('#script-gmail').click()
     await page.fill('#project-title', 'My Project')