Gregory's Server@jaffathecake Out of curiosity, why are you using a button to trigger the select?
A number of semantic issues with custom selects are precisely because of this pattern, most notably that for a select, you generally want a name "pick a fruit" and a value "Apple", so the user can see what the select is for and what is selected without opening the dropdown. Buttons inherently cannot do this because buttons don't have values, so using a select that is appropriately labeled gives you this for free ... but not if you use a button to make the select happen :)
|
Top-level
5 comments
@jaffathecake isn't the currently selected <option> visually distinguishable in a bog standard <select>? For reference, a screen reader will read a select as "label, combobox, current option". A button is more likely than not going to be "option, button collapsed/submenu", which loses the label, or "label, button collapsed/submenu" which loses the value. To fix this on a button you now have to cluge together the currently selected option and the button label with JS @zersiax have you tested this? Remember that the browser knows that this button is a select popover activator. @jaffathecake I have not, I am purely going on your code sample and have not had a chance to look into the specifics, it just struck me as odd from that perspective :) Do you happen to have a link to a codepen where this can be tried? No problem if not, also not intending to tell you you're wrong, just expressing a knee-jerk observation :) |
@zersiax values aren't supposed to be human readable. The button needs human readable text relating to it's action and current value. That's what this system provides.