Gravatar for chris.williams@readwatchcreate.com

Question by chris williams, Feb 14, 2017 8:31 PM

search box and aria-label

For accessibiility reasons I need to add an aria-label to the input of the search box component but all i have access to is the div. Is there a property I can use to set it?

eg. I need this:

<input spellcheck="false" form="coveo-dummy-form" placeholder="Search">

top be:

<input spellcheck="false" form="coveo-dummy-form" placeholder="Search" aria-label="search">
1 Reply
Gravatar for flguillemette@coveo.com

Answer by François Lachance-Guillemette, Feb 15, 2017 7:59 AM

I don't this there is anything OOTB to do this.

You could hook a handler on the afterInitialization event and add it using JavaScript:

var searchInterface = document.getElementById("YOUR_SEARCH_INTERFACE_ID");
searchInterface.addEventListener("afterInitialization", function(options) {
    let input = searchInterface.querySelector(".CoveoSearchbox input, .CoveoOmnibox input");
    input.setAttribute("aria-label", "something");
});

Would this work for you?

Ask a question