fix(web): polish social UI and prevent doubled shared audio

apps/web/e2e/mini-social.spec.ts

@@ -1,8 +1,9 @@
+import axe from 'axe-core';
 import { expect, test } from '@playwright/test';
 
-for (const width of [1280, 1920]) {
-  test(`mini chat keeps the page and draft at ${width}px`, async ({ page }, info) => {
-    await page.setViewportSize({ width, height: 900 });
+for (const { width, height, light } of [{ width: 1280, height: 900, light: false }, { width: 1920, height: 900, light: false }, { width: 1024, height: 600, light: false }, { width: 1280, height: 720, light: true }]) {
+  test(`mini chat keeps the page and draft at ${width}x${height} ${light ? 'light' : 'dark'}`,  async ({ page }, info) => {
+    await page.setViewportSize({ width, height });
     await page.addInitScript(() => localStorage.setItem('pipu.locale', 'ru'));
     await page.goto('/login');
     await page.getByLabel('Логин', { exact: true }).fill('alice');
@@ -15,11 +16,13 @@ for (const width of [1280, 1920]) {
       await expect(page.getByRole('button', { name: 'Остров', exact: true })).toHaveAttribute('aria-pressed', 'true');
       await page.getByRole('link', { name: 'Главная', exact: true }).first().click();
     }
+    if (light) await page.evaluate(() => { document.documentElement.dataset.theme = 'light'; });
     const dock = page.getByRole('complementary', { name: 'Друзья и чат', exact: true });
     const toggle = dock.getByRole('button', { name: 'Друзья и чат', exact: true });
     await toggle.click();
     const panel = dock.getByRole('region', { name: 'Друзья и общение', exact: true });
     await panel.getByRole('textbox', { name: 'Найти диалог', exact: true }).fill('moderator');
+    await expect(panel.getByRole('textbox', { name: 'Найти диалог', exact: true })).toHaveCSS('outline-style', 'none');
     await panel.getByRole('button', { name: /moderator/ }).click();
     const composer = panel.getByRole('textbox', { name: 'Сообщение', exact: true });
     await composer.fill('Черновик из мини-чата');
@@ -40,6 +43,17 @@ for (const width of [1280, 1920]) {
     expect(panelBox.x).toBeGreaterThanOrEqual(width - 640);
     expect(panelBox.y).toBeGreaterThanOrEqual(60);
     expect(panelBox.y + panelBox.height).toBeLessThan(playerBox.y);
+    await panel.evaluate(async element => {
+      await Promise.all(element.getAnimations({ subtree: true })
+        .filter(animation => animation.effect?.getTiming().iterations !== Infinity)
+        .map(animation => animation.finished.catch(() => undefined)));
+    });
+    await page.addScriptTag({ content: axe.source });
+    const violations = await page.evaluate(async (selector) => {
+      const result = await (window as unknown as { axe: typeof axe }).axe.run(document.querySelector(selector)!, { runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa'] } });
+      return result.violations.map(violation => ({ id: violation.id, nodes: violation.nodes.map(node => ({ target: node.target, summary: node.failureSummary })) }));
+    }, '[id="mini-social-panel"]');
+    expect(violations).toEqual([]);
     await page.screenshot({ path: info.outputPath('mini-chat.png'), fullPage: true });
     await composer.fill('Продолжить в полном чате');
     await composer.press('Escape');
@@ -48,7 +62,7 @@ for (const width of [1280, 1920]) {
     await expect(composer).toHaveValue('Продолжить в полном чате');
     await page.setViewportSize({ width: 800, height: 900 });
     await expect(dock).toHaveCount(0);
-    await page.setViewportSize({ width, height: 900 });
+    await page.setViewportSize({ width, height });
     await expect(composer).toHaveValue('Продолжить в полном чате');
     await panel.getByRole('button', { name: 'Открыть раздел', exact: true }).click();
     await expect(page).toHaveURL(/\/friends\?/);