Fix/2736 error container in pattern marked as hidden but has a focusable element

[precious-onyenaucheya-ons]

What is the context of this PR?

fixes #2736
Removed aria-hidden from list warning element because it has a focusable child element. The aria-hidden is set (within div element with role=status) only when the list warning element is created.

The autosuggest results(ie title and list of results) has also been removed from the html content whenever there is an error.

Now the screen reader reads the message just once. The screen reader also reads out the instructions on how to interact with it.

How to review

For all components and patterns that use the auto suggest, check if the aria-hidden tag has been removed from the list element with the focusable child element

[netlify]

✅ Deploy Preview for ons-design-system-preview ready!

Name	Link
🔨 Latest commit	e5250e1
🔍 Latest deploy log	https://app.netlify.com/sites/ons-design-system-preview/deploys/6511616819e11e0008ef9791
😎 Deploy Preview	https://deploy-preview-2801--ons-design-system-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[rmccar]

From the explanation in the issue its not completely clear exactly what needs to be done, maybe we need to confirm with Emily if possible but I think that its also suggesting we move the live region roles too etc too

[rmccar]

Ive tested this with voiceover and comparing it to what is currently in the service manual after this change it now reads out what is in the error message twice, which I don't think is something we want.
I have also noticed that in the service manual it reads out the ways to interact with it twice which is something we might want to look into whether that is something that needs to be fixed too.

[rmccar]

In all the new screenshots that have just been added it highlights there is an extra thick line at the bottom of the error box. I think this may be because you have changed the list element to be a div. Also because of this change you now have a redundant unordered list with no list items in the html.
The more I look into this the more I think this solution isn't a change we want to make. Visually and aria hiding the status means it is no longer used at all so is there any point in having it at all? But also the message it reads out from the status makes much more sense when using a screenreader than the one we have now because it is meant to be a replacement for the one with the link.
Personally I think this needs more thought and discussion on what the solution for this should be and if that solution is better than what we already have. This is a bigger issue to fix than what it first seems.

[rmccar]

Has this been tested with the API?

[rmccar]

Few more minor comments