Use role-based locators instead of Algolia CSS classes

Replace .aa-DetachedSearchButton and .aa-Input with ARIA role
locators (getByRole('button'), getByRole('searchbox')). These are
resilient to Algolia autocomplete class name changes and follow
Playwright best practices used elsewhere in the test suite.

Co-Authored-By: Claude Opus 4.6 <[email protected]>

Author: cderv

tests/integration/playwright/tests/html-search-highlight.spec.ts

@@ -22,12 +22,12 @@ test('Search highlights cleared when query changes', async ({ page }) => {
 
   await expect(marks.first()).toBeVisible({ timeout: 5000 });
 
-  // Open the detached search overlay
-  await page.locator('.aa-DetachedSearchButton').click();
-  const input = page.locator('.aa-Input');
+  // Open the search overlay and type a different query
+  await page.locator('#quarto-search').getByRole('button').click();
+  const input = page.getByRole('searchbox');
   await expect(input).toBeVisible({ timeout: 2000 });
 
-  // Type a different query — triggers onStateChange which clears marks
+  // Typing a different query triggers onStateChange which clears marks
   await input.fill('different');
   await expect(page.locator('main mark')).toHaveCount(0, { timeout: 2000 });
 });