How to pass `aria-label` or `id` into React InstantSearch components (a11y)

What’s the proper way to pass either an id or aria-label into the component to have it appear on the component’s HTML?

For accessibility, I’m trying to either add aria labels to my widgets, or associate an existing label with the input by passing an ID (either will get the job done).

<label className="refinement-label" for="foo">Foo</label>
  aria-label="Aria Name" // doesn't appear on the HTML select tag
  id="foo"               // doesn't appear on the HTML select tag
  translations={{ seeAllOption: 'All' }}

Related side note: It would also be nice to be able to pass a title HTML attribute into the ToggleRefinement widgets, for example in cases where the label is an acronym because it’s too long to write out, but providing a title attribute with the full version would be helpful to end users.

Hi @jbb,

With the widgets provided out-of-the-box, you can’t easily add any attributes. The approach we advocate for those use cases is the usage of the connectors (HOCs). You’re in full control of what is rendered. You can find an example of connectMenu inside the doc.

Hope that helps!

It’s not critical for me, but is best practice for the web.

Please take it as feedback to improve react-instantsearch because it’s an easy-to-improve thing to pass common props like aria-label (and title for some widgets), that shouldn’t require a connector to build it from scratch. Regarding aria-label, devs can run the Google Lighthouse extension for Chrome on a page that contains Algolia react-instantsearch widgets to see all the acessibility (A11y) recommendations (which usually are just “use a label for x input”). Thanks.

1 Like