Stories/af/9601 replacement variables suggestions speak

[afercia]

Summary

This PR can be summarized in the following changelog entry:

• Snippet editor: Improve the replacement variable suggestions accessibility

Relevant technical choices:

• given the way this component re-renders, things are a bit more complicated than expected
• when typing % to search for a replacement variable, both onSearchChange and onChange run the latter calls serializeContent which I guess fully re-renders the component because at that point the number of replacementVariables in the state is the initial ones from the props /Cc @atimmer
• basically it is not possible to use componentDidUpdate()
• there's the need to get the count of the filtered replacement variables after the state is updated and before the re-renders happen (which updates the state again, resetting it)
• not ideal, but haven't found other ways to do it, any feedback welcome

Test instructions

• run the standalone example (yarn start then go to http://localhost:3333/)
• in the title and description fields, search for the replacement variables typing % etc.
• observe in the DOM the div with id #a11y-speak-assertive gets a message with the correct number of search results
• verify singular/plural forms (1 result, 2 results...)
• verify there's a correct message when there are no results

Fixes Yoast/wordpress-seo#9601

[boblinthorst]

CR: ok 👍
Acceptance: ok 👍