fix(a11y): resolve serious accessibility issues on search page (GOO-110)

- Add aria-hidden="true" to all decorative inline SVGs (bookmark, view-mode, funnel, checkmark)
- Convert save-search popover to proper dialog: role="dialog", aria-modal, focus trap, Escape key, focus return to trigger
- Add aria-pressed on list/map/split view-mode toggle buttons
- Add aria-expanded + aria-controls on mobile filter toggle button
- Add role="status" + aria-label="Đang tải..." on Suspense fallback

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/components/design-system/__tests__/density-provider.spec.tsx

@@ -0,0 +1,97 @@
+import { act, render, renderHook, screen } from '@testing-library/react';
+import * as React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  DENSITY_CELL_PADDING,
+  DENSITY_DATA_FONT,
+  DENSITY_ROW_HEIGHT,
+  DensityProvider,
+  useDensity,
+} from '../density-provider';
+
+// jsdom (opaque origin) does not provide a usable localStorage; install a tiny in-memory shim.
+function installLocalStorage(): Storage {
+  const store: Record<string, string> = {};
+  const fake: Storage = {
+    get length() {
+      return Object.keys(store).length;
+    },
+    clear: () => {
+      for (const k of Object.keys(store)) delete store[k];
+    },
+    getItem: (k) => (k in store ? store[k]! : null),
+    key: (i) => Object.keys(store)[i] ?? null,
+    removeItem: (k) => {
+      delete store[k];
+    },
+    setItem: (k, v) => {
+      store[k] = String(v);
+    },
+  };
+  Object.defineProperty(window, 'localStorage', {
+    configurable: true,
+    value: fake,
+  });
+  return fake;
+}
+
+describe('DensityProvider', () => {
+  let storage: Storage;
+
+  beforeEach(() => {
+    storage = installLocalStorage();
+  });
+
+  afterEach(() => {
+    if (typeof storage.clear === 'function') {
+      storage.clear();
+    }
+  });
+
+  it('exposes default density "regular" via useDensity', () => {
+    const { result } = renderHook(() => useDensity(), {
+      wrapper: ({ children }) => <DensityProvider>{children}</DensityProvider>,
+    });
+    expect(result.current.density).toBe('regular');
+  });
+
+  it('honors the defaultDensity prop', () => {
+    const { result } = renderHook(() => useDensity(), {
+      wrapper: ({ children }) => (
+        <DensityProvider defaultDensity="compact">{children}</DensityProvider>
+      ),
+    });
+    expect(result.current.density).toBe('compact');
+  });
+
+  it('persists density changes to localStorage', () => {
+    const { result } = renderHook(() => useDensity(), {
+      wrapper: ({ children }) => <DensityProvider>{children}</DensityProvider>,
+    });
+    act(() => result.current.setDensity('roomy'));
+    expect(result.current.density).toBe('roomy');
+    expect(localStorage.getItem('goodgo.density')).toBe('roomy');
+  });
+
+  it('reads stored density on mount when valid', () => {
+    localStorage.setItem('goodgo.density', 'compact');
+    function Probe() {
+      const { density } = useDensity();
+      return <span data-testid="d">{density}</span>;
+    }
+    render(
+      <DensityProvider>
+        <Probe />
+      </DensityProvider>,
+    );
+    expect(screen.getByTestId('d').textContent).toBe('compact');
+  });
+
+  it('exposes row-height, padding and font tables for all densities', () => {
+    for (const mode of ['compact', 'regular', 'roomy'] as const) {
+      expect(DENSITY_ROW_HEIGHT[mode]).toBeTruthy();
+      expect(DENSITY_CELL_PADDING[mode]).toBeTruthy();
+      expect(DENSITY_DATA_FONT[mode]).toBeTruthy();
+    }
+  });
+});