From ed99a2cf5d0b4e087ab032818e4ac8bab050fbb8 Mon Sep 17 00:00:00 2001
From: Sarah Tucker <sarah.tucker@raspberrypi.org>
Date: Thu, 20 Aug 2026 12:05:27 +0100
Subject: [PATCH] Report a failed v3 search in the red error style
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

An empty search in v3 now reads as an error rather than a grey panel
title: the field border goes red and the standard error message, "No
results found", sits under the field, above "Use my current location".

The options panel still follows, now headed "Try searching another way",
so the error states the problem and the panel offers the ways on. It
covers both failure paths — the address search and a failed landmark or
Plus Code search.

Behind a new noResultsAsError prop, so only v3 changes.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/components/PlacesSearch.tsx      | 32 +++++++++++++++++++++++++---
 src/steps/FindVenueSearchFirstV3.tsx |  3 ++-
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/components/PlacesSearch.tsx b/src/components/PlacesSearch.tsx
index 7650505..e34c337 100644
--- a/src/components/PlacesSearch.tsx
+++ b/src/components/PlacesSearch.tsx
@@ -47,6 +47,14 @@ interface PlacesSearchProps {
    * introduction. The panel opened by "Can't see your address?" keeps its own.
    */
   noResultsTitle?: string
+  /**
+   * Report an empty search in the app's error style: a red border on the field
+   * and the standard red error message under it, above "Use my current location".
+   * The options panel still follows, headed by noResultsTitle — so the error says
+   * what went wrong and the panel offers the ways on. Pairs with
+   * enableFallbackOptions / modeFallbackOptions, which own the panel itself.
+   */
+  noResultsAsError?: boolean
   /**
    * Lift the "Enter coordinates" row out of the fallback panel to sit under the
    * search field, so it is offered up front rather than only after a failure.
@@ -147,6 +155,7 @@ export const PlacesSearch = forwardRef<PlacesSearchHandle, PlacesSearchProps>(
   enableFallbackOptions,
   optionsAsAccordions,
   noResultsTitle,
+  noResultsAsError,
   coordsRowBelowSearch,
   label = 'Search for the address',
   hint = (
@@ -603,6 +612,10 @@ export const PlacesSearch = forwardRef<PlacesSearchHandle, PlacesSearchProps>(
     ((landmarkAsMode && searchMode === 'landmark') ||
       (plusCodeAsMode && searchMode === 'pluscode'))
 
+  // An empty search reported as an error rather than a grey panel title: the
+  // field goes red and the message sits under it, wherever the search was run.
+  const showNoResultsError = !!noResultsAsError && noResults
+
   return (
     <div className="field">
       <div className="label-wrapper">
@@ -653,7 +666,9 @@ export const PlacesSearch = forwardRef<PlacesSearchHandle, PlacesSearchProps>(
         <div className="places" ref={containerRef}>
           <div
             className={`places-box${
-              (noResults && !enableFallbackOptions) || (modeSearchFailed && !modeFallbackOptions)
+              (noResults && !enableFallbackOptions) ||
+              (modeSearchFailed && !modeFallbackOptions) ||
+              showNoResultsError
                 ? ' error'
                 : ''
             }`}
@@ -779,6 +794,15 @@ export const PlacesSearch = forwardRef<PlacesSearchHandle, PlacesSearchProps>(
         </div>
       )}
       {searchMode === 'pluscode' && !plusCodeAsMode && plusCodeHelp}
+      {/* Directly under the field it belongs to, above "Use my current location". */}
+      {showNoResultsError && (
+        <div className="error-message" role="alert">
+          <span className="icon">
+            <ErrorIcon />
+          </span>
+          <span>No results found</span>
+        </div>
+      )}
       {searchMode === 'address' && (
         <button
           type="button"
@@ -819,7 +843,9 @@ export const PlacesSearch = forwardRef<PlacesSearchHandle, PlacesSearchProps>(
         </div>
       )}
       {modeSearchFailed && modeFallbackOptions && (
-        <div className="no-results" role="status">
+        // The error message above announces the failure; the panel heads the ways
+        // on, so it doesn't take a live region of its own.
+        <div className="no-results" role={showNoResultsError ? undefined : 'status'}>
           <p className="no-results-title no-results-title-only">
             {noResultsTitle ?? 'Your search didn’t return any results'}
           </p>
@@ -829,7 +855,7 @@ export const PlacesSearch = forwardRef<PlacesSearchHandle, PlacesSearchProps>(
       {(noResults || showOptions) && enableFallbackOptions && searchMode === 'address' && (
         <div
           className={`no-results${coordsRowBelowSearch ? ' no-results-tight' : ''}`}
-          role="status"
+          role={showNoResultsError ? undefined : 'status'}
         >
           <p
             className={`no-results-title${
diff --git a/src/steps/FindVenueSearchFirstV3.tsx b/src/steps/FindVenueSearchFirstV3.tsx
index 24b1526..f5167ce 100644
--- a/src/steps/FindVenueSearchFirstV3.tsx
+++ b/src/steps/FindVenueSearchFirstV3.tsx
@@ -139,7 +139,8 @@ export function FindVenueSearchFirstV3({
               countryCode={countryCodeForCountry(data.country)}
               enableFallbackOptions
               optionsAsAccordions
-              noResultsTitle="No results. Try searching a different way"
+              noResultsAsError
+              noResultsTitle="Try searching another way"
               label="Search for your venue"
               hint="Search by address, place, or Plus Code"
               coordsLabel="Enter coordinates"