Add label to search bar component for accessibility

[ailbhebyrne]

What problem is this solving?

Search bar component fails accessibility testing:

• user interface component doesn't have an accessible name.
• aria-labelledby attribute refers to a missing element.

Added a label element and CSS to hide the label on the screen.
Also edited the SearchBar snapshot to include the HTML added by the label to ensure the 'should match snapshot' test still passes.

How to test it?

• Inspect search bar
• View label within searchBarInnerContainer div

Workspace

Screenshots or example usage:

[vtex-io-ci-cd]

Hi! I'm VTEX IO CI/CD Bot and I'll be helping you to publish your app! 🤖

Please select which version do you want to release:

• Patch (backwards-compatible bug fixes)

• Minor (backwards-compatible functionality)

• Major (incompatible API changes)

And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.

• No thanks, I would rather do it manually 😞

[vtex-io-docs-bot]

Beep boop 🤖

I noticed you didn't make any changes at the docs/ folder

• There's nothing new to document 🤔
• I'll do it later 😞

In order to keep track, I'll create an issue if you decide now is not a good time

• I just updated 🎉🎉

[vmourac-vtex]

@ailbhebyrne thanks for the PR. Looks good to me. Will approve the PR once you update the CHANGELOG.md with a summary of your changes

[vtex-io-ci-cd]

Your PR has been merged! App is being published. 🚀
Version 3.178.1 → 3.178.2

After the publishing process has been completed (check #vtex-io-releases) and doing A/B tests with the new version, you can deploy your release by running:

vtex deploy vtex.store-components@3.178.2

After that your app will be updated on all accounts.

For more information on the deployment process check the docs. 📖