I consulted the previous community posts around Aria labels, and while very helpful for context, address the issue of adding Aria labels to elements that do have hbs files. I was wondering what the approach would be for something like the Yext logo in the search bar that does not have a hbs file in Code Editor.
The closest I could find was the yext-logo.hbs, but this controls the logo in the footer of the experience. Since the logo is within the search bar, is this a change that a client themselves would need to update on their end?
Out of curiosity, did you receive this accessibility feedback from a client? If so did they provide an explanation around why the search button needs a separate aria label? Given that it’s a button associated with an input, it should be clear to screen readers, but we’re always open to feedback here!
In order to change the structure a component’s default hbs template, you’ll need to override said template. We generally recommend doing this sparingly and only when necessary, since you’ll lose any updates for that component when you upgrade your JS version.
High level, you’ll be taking advantage of the SDK’s template attribute (documented here). First, you’ll need to create a handlebars partial for the search bar and add the aria label. Next, you’ll override the component’s script partial and reference your handlebars partial in the template attribute.
You can learn more about how to do this in this module. If you have additional questions, a developer should be able to help you out!