Provide search feedback to the user

[oddball-lindsay]

Expected

When no search results are found, the "No results found for [input]... " content should appear below the search box as an h4:

When search results are found, "Showing x results for [input]." content should appear below the search box, but above the search results.

Actual

There is is feedback to the user, whether or not search results are found. They simply see (or don't see) any search results on the page. This is an issue especially for AT users.

Steps to Reproduce

No search results:

1. Enter "Lindsay Janelle" in the representative search
2. Select the "Search" button - no visual changes to the apge

Search results:

1. Enter "John" in the representative search
2. Search results appear below, but there is no summary displayed above the search results.

Designs

1. Empty state
2. Search with # of search results

Acceptance Criteria

• The number of search results are summarized in an h4, when there are search results returned.
• The user is provided feedback that no results are found in an h4, when no search results are returned.
• After a search is performed, focus moves to the h4 search feedback.
• The h4 search feedback should be wrapped in a live region so that the status can be announced by a screen reader.

[oddball-lindsay]

This was flagged as launch-blocking from Staging Review:

• Staging Review finding: Unclear to screen reader users when search is complete #99001
• Staging Review finding: No message displayed when search completes #98993

Please close the related Staging Review tickets when this has been addressed!

[oddball-lindsay]

Looks good, thank you! I'll close out the related Staging Review tickets too.