fix(a11y): mark pressed toggles with the system highlight in forced colors (#1086)

apps/web/e2e/selector-state.spec.ts

@@ -57,3 +57,27 @@ test('the compare category switcher exposes its state', async ({ page }) => {
   const group = page.getByRole('group', { name: 'Chọn danh mục đối chiếu' });
   await expect(group.getByRole('button', { pressed: true })).toHaveCount(1);
 });
+
+// Forced colours drop the colours that mark the pressed button; it must still
+// look different from the others (DOS/Rate#1086).
+for (const [path, name] of [
+  ['/leaderboard', 'Chọn ngành hàng'],
+  ['/compare', 'Chọn danh mục đối chiếu'],
+] as const) {
+  test(`the pressed category stands out in forced colors on ${path}`, async ({
+    page,
+  }) => {
+    await page.emulateMedia({ forcedColors: 'active' });
+    expect((await page.goto(path))?.status()).toBe(200);
+    const group = page.getByRole('group', { name });
+    const look = (pressed: boolean) =>
+      group
+        .getByRole('button', { pressed })
+        .first()
+        .evaluate((el) => getComputedStyle(el).backgroundColor);
+    await expect(group.getByRole('button', { pressed: false })).not.toHaveCount(
+      0
+    );
+    expect(await look(true)).not.toBe(await look(false));
+  });
+}

apps/web/src/app/style/scss/_custom.scss

@@ -1522,3 +1522,24 @@ body .input-group > .input-group-text {
     margin-right: 0 !important;
   }
 }
+
+// Forced colours replace the background and text colours that mark a pressed
+// toggle (btn-danger vs btn-outline-dark), so the selected category looked
+// like the others in Windows High Contrast. Draw every pressed control with
+// the system highlight instead (DOS/Rate#1086).
+// `html` outranks Bootstrap's !important utilities (bg-white, text-dark) on
+// children such as count badges.
+@media (forced-colors: active) {
+  html [aria-pressed='true'] {
+    forced-color-adjust: none;
+    background-color: Highlight !important;
+    border-color: Highlight !important;
+    color: HighlightText !important;
+
+    * {
+      background-color: transparent !important;
+      border-color: HighlightText !important;
+      color: HighlightText !important;
+    }
+  }
+}