fix(searchbar): screen readers correctly announce the cancel button text

[liamdebeasi]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue Number: #21013

What is the new behavior?

• Added aria-hidden to the search outline icon since it is purely decorative
• Added aria-hidden to the div that contains the cancel icon/text. Since either text or an icon is displayed, I didn't think it made sense to add special logic to each one. I added an aria-label to the parent button that defaults to the value of cancelButtonText. There is no breaking change because cancelButtonText defaults to "Cancel", which is what the aria-label value was hardcoded to previously.

Does this introduce a breaking change?

• Yes
• No

Other information

[terrancle]

Hello,

To be able to translate the aria-label = "Reset" button as well as the aria-label = "Search text" into several languages, could you add properties?
For example resetButtonText, as well as searchText?
In fact, I wish I could do like cancelButtonText which now works great for VoiceOver!