feat(search): pin the results toolbar and float the map button on phones

The List/Map switch was a small grey control beside the results heading,
and the filters were plain dropdowns labelled "All Phases" and "Advanced".
Both scrolled away with the first result.

Search, filters and the List/Map switch now share one card pinned under
the header. Distance, phase and school type are pill controls in the row;
"Advanced" becomes "More filters" and counts only what it hides. The
switch is filled brand teal and says which view is on (aria-pressed).

On phones the search folds to a one-line summary once made, the filter
pills scroll sideways, and a floating Map/List button sits above the tab
bar in place of the toolbar switch. The selected pin's card now stacks
under that button instead of covering the tab bar.

Switching view from far down the list scrolls back to the top of the
results, and each switch is tracked as results_view_changed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

nextjs-app/__tests__/components/FilterBarSuggest.test.tsx

@@ -32,9 +32,9 @@ afterEach(() => { global.fetch = realFetch; });
 describe('FilterBar autosuggest', () => {
   it('is a combobox only when the flag is on', () => {
     const { rerender } = render(<FilterBar filters={FILTERS} autosuggest={false} />);
-    expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+    expect(screen.queryByRole('combobox', { name: 'School name or postcode' })).not.toBeInTheDocument();
     rerender(<FilterBar filters={FILTERS} autosuggest />);
-    expect(screen.getByRole('combobox')).toBeInTheDocument();
+    expect(screen.getByRole('combobox', { name: 'School name or postcode' })).toBeInTheDocument();
   });
 
   it('makes no request while the flag is off', async () => {
@@ -47,7 +47,7 @@ describe('FilterBar autosuggest', () => {
 
   it('shows suggestions and navigates when one is chosen', async () => {
     render(<FilterBar filters={FILTERS} autosuggest />);
-    await userEvent.type(screen.getByRole('combobox'), 'brecknock');
+    await userEvent.type(screen.getByRole('combobox', { name: 'School name or postcode' }), 'brecknock');
     const option = await screen.findByRole('option', { name: /Brecknock/ });
     await userEvent.click(option);
     expect(push).toHaveBeenCalledWith(
@@ -61,7 +61,7 @@ describe('FilterBar autosuggest', () => {
     // "NW1" is not a postcode, so a request for it is correct behaviour. Only
     // the settled value is the assertion, so set it in one go.
     render(<FilterBar filters={FILTERS} autosuggest />);
-    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'NW1 1AA' } });
+    fireEvent.change(screen.getByRole('combobox', { name: 'School name or postcode' }), { target: { value: 'NW1 1AA' } });
     await new Promise((r) => setTimeout(r, 300));   // past the 200ms debounce
     expect(global.fetch).not.toHaveBeenCalled();
   });
@@ -69,7 +69,7 @@ describe('FilterBar autosuggest', () => {
   it('Enter with no active option still submits the free-text search', async () => {
     // The existing behaviour is preserved, not replaced.
     render(<FilterBar filters={FILTERS} autosuggest />);
-    const input = screen.getByRole('combobox');
+    const input = screen.getByRole('combobox', { name: 'School name or postcode' });
     await userEvent.type(input, 'brecknock{Enter}');
     // updateURL pushes inside startTransition, so the call is not synchronous.
     await waitFor(() => expect(push).toHaveBeenCalledWith(
@@ -90,7 +90,7 @@ describe('FilterBar autosuggest does not reopen over results', () => {
     searchParams = new URLSearchParams('search=brecknock');
     render(<FilterBar filters={FILTERS} autosuggest />);
 
-    expect(screen.getByRole('combobox')).toHaveValue('brecknock');
+    expect(screen.getByRole('combobox', { name: 'School name or postcode' })).toHaveValue('brecknock');
     await new Promise((r) => setTimeout(r, 300));   // past the 200ms debounce
     expect(global.fetch).not.toHaveBeenCalled();
     expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
@@ -98,7 +98,7 @@ describe('FilterBar autosuggest does not reopen over results', () => {
 
   it('closes the dropdown when the search is submitted', async () => {
     render(<FilterBar filters={FILTERS} autosuggest />);
-    const input = screen.getByRole('combobox');
+    const input = screen.getByRole('combobox', { name: 'School name or postcode' });
 
     await userEvent.type(input, 'brecknock');
     expect(await screen.findByRole('listbox')).toBeInTheDocument();

nextjs-app/__tests__/components/ResultsToolbar.test.tsx

@@ -0,0 +1,130 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { HomeView } from '@/components/HomeView';
+import { FilterBar } from '@/components/FilterBar';
+import { fetchSchools } from '@/lib/api';
+import { track } from '@/lib/analytics';
+import { primaryFixture } from '../support/schoolFixtures';
+import type { SchoolsResponse } from '@/lib/types';
+
+/*
+ * The results toolbar (option B of the 2026-09-30 results-controls mockups):
+ * search, filters and the List/Map switch pinned under the header, with a
+ * floating List/Map button standing in for the switch on phones. Layout is CSS
+ * and not visible to jsdom; these pin the behaviour and the accessible names
+ * the E2E journeys rely on.
+ */
+
+let params = new URLSearchParams('postcode=SW196AR&radius=1');
+const push = jest.fn();
+jest.mock('next/navigation', () => ({
+  useSearchParams: () => params,
+  usePathname: () => '/',
+  useRouter: () => ({ push, replace: jest.fn(), prefetch: jest.fn() }),
+}));
+jest.mock('@/context/ComparisonContext', () => ({
+  useComparisonContext: () => ({ addSchool: jest.fn(), removeSchool: jest.fn(), selectedSchools: [] }),
+}));
+jest.mock('@/lib/api', () => ({
+  fetchSchools: jest.fn(),
+  fetchNationalAverages: jest.fn(async () => ({})),
+  fetchLAaverages: jest.fn(async () => ({ secondary: { attainment_8_by_la: {} } })),
+}));
+jest.mock('@/lib/analytics', () => ({ track: jest.fn() }));
+jest.mock('@/components/SchoolMap', () => ({ SchoolMap: () => <div data-testid="map" /> }));
+
+const filters = {
+  local_authorities: ['Wandsworth'], school_types: ['Community school'], years: [],
+  phases: ['Primary', 'Secondary'], genders: [], admissions_policies: [],
+};
+
+function results(): SchoolsResponse {
+  return { schools: [{ ...primaryFixture.schoolInfo, school_name: 'Southmead Primary School' }],
+    total: 1, page: 1, page_size: 25, total_pages: 1 };
+}
+
+beforeEach(() => {
+  params = new URLSearchParams('postcode=SW196AR&radius=1');
+  push.mockClear();
+  jest.mocked(track).mockClear();
+  jest.mocked(fetchSchools).mockReset().mockResolvedValue(results());
+});
+
+describe('the List/Map switch', () => {
+  it('lives in the toolbar with the filters and says which view is on', () => {
+    render(<HomeView initialSchools={results()} filters={filters} />);
+    const view = screen.getByRole('group', { name: 'Results view' });
+    expect(view.closest('div[class*="resultsToolbar"]')).not.toBeNull();
+    expect(screen.getByRole('button', { name: 'List' })).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('button', { name: 'Map' })).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('has a floating twin that flips between map and list', async () => {
+    render(<HomeView initialSchools={results()} filters={filters} />);
+    await act(async () => fireEvent.click(screen.getByRole('button', { name: 'Show map' })));
+    expect(screen.getByTestId('map')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Map' })).toHaveAttribute('aria-pressed', 'true');
+    expect(track).toHaveBeenCalledWith('results_view_changed', { view: 'map', via: 'floating' });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Show list' }));
+    expect(screen.queryByTestId('map')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Show map' })).toBeInTheDocument();
+  });
+
+  it('does not track a click on the view already showing', () => {
+    render(<HomeView initialSchools={results()} filters={filters} />);
+    fireEvent.click(screen.getByRole('button', { name: 'List' }));
+    expect(track).not.toHaveBeenCalledWith('results_view_changed', expect.anything());
+  });
+
+  it('is absent from a name search, which has no map', () => {
+    params = new URLSearchParams('search=southmead');
+    render(<HomeView initialSchools={results()} filters={filters} />);
+    expect(screen.queryByRole('group', { name: 'Results view' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Show map' })).not.toBeInTheDocument();
+  });
+});
+
+describe('the toolbar filters', () => {
+  it('keeps distance, phase and school type in the row, not behind More filters', () => {
+    render(<FilterBar filters={filters} />);
+    const row = screen.getByRole('group', { name: 'Filters' });
+    for (const name of ['Distance', 'Phase', 'School type']) {
+      expect(row).toContainElement(screen.getByRole('combobox', { name }));
+    }
+    expect(screen.getByRole('combobox', { name: 'Distance' })).toHaveDisplayValue('Within 1 mile');
+    expect(screen.queryByRole('combobox', { name: 'Local authority' })).not.toBeInTheDocument();
+  });
+
+  it('counts only what More filters hides', () => {
+    params = new URLSearchParams('postcode=SW196AR&radius=1&school_type=Community+school&local_authority=Wandsworth');
+    render(<FilterBar filters={filters} />);
+    expect(screen.getByRole('button', { name: /More filters \(1\)/ })).toBeInTheDocument();
+  });
+});
+
+describe('the folded search', () => {
+  it('summarises the search and unfolds on tap', () => {
+    render(<FilterBar filters={filters} />);
+    const summary = screen.getByRole('button', { name: 'Edit search: SW196AR, within 1 mile' });
+    fireEvent.click(summary);
+    expect(screen.queryByRole('button', { name: /Edit search/ })).not.toBeInTheDocument();
+  });
+
+  it('folds again once the edited search is submitted', () => {
+    render(<FilterBar filters={filters} />);
+    fireEvent.click(screen.getByRole('button', { name: /Edit search/ }));
+    const input = screen.getByRole('searchbox', { name: 'School name or postcode' });
+    fireEvent.change(input, { target: { value: 'SW19 1AA' } });
+    fireEvent.submit(input.closest('form')!);
+    expect(screen.getByRole('button', { name: /Edit search/ })).toBeInTheDocument();
+  });
+
+  it('never appears in the hero, or before anything has been searched', () => {
+    const { unmount } = render(<FilterBar filters={filters} isHero />);
+    expect(screen.queryByRole('button', { name: /Edit search/ })).not.toBeInTheDocument();
+    unmount();
+    params = new URLSearchParams('local_authority=Wandsworth');
+    render(<FilterBar filters={filters} />);
+    expect(screen.queryByRole('button', { name: /Edit search/ })).not.toBeInTheDocument();
+  });
+});