Menu without theme doesn't have indicator for refinement

no theme:

theme:

What if we used strong to indicate that something is refined, as well as maybe something in text (especially for non-sighted users, worst case a aria-label would work, but would prefer visible text)

[sarahdayan]

From a purely behavioral, semantic, and accessible perspective, radio buttons make a lot of sense for menu items.

If InstantSearch was to work without JavaScript (e.g., with a <form> around it and a submit element), we would likely go for either a radiogroup or a listbox. These are accessible by default (no need to manage aria-* attributes ourselves) and provide strong visual cues on which item is selected when there are no styles.

We can always hide the radio buttons in our CSS and keep on bolding the associated label: https://codepen.io/sarahdayanalgolia/pen/KKejJre

I tested the pen above on Firefox, Chrome and Safari, and it seems to work everywhere.

[samouss]

Agree with @Haroenv, even without the style we should have a hint that shows (visually & semantically) that something is currently refined. When I did the migration of IS.css I wasn’t sure that the widget was working without the styling.