search

lcdsantos / jQuery-Selectric

jQuery plugin for easy manipulation and customization of HTML selects
http://selectric.js.org/
MIT License
727 stars 157 forks source link

Add label to hidden input for accessibility #195

Open stephenmcghee opened 7 years ago

stephenmcghee commented 7 years ago

When I run my accessibility checker, Selectric fails because it is missing a form <label> for the hidden input Selectric creates. Is there a way you can add a hidden <label> to accompany the hidden input? See Image attached.

selectric-label-accessibility

Thanks

stephenmcghee commented 7 years ago

I've coded a temporary fix for this: //Add a hidden label around the selectric input for accessibility. $(".selectric-input").wrap("<label class='VisuallyHidden' aria-hidden='true'>Hidden Label</label>");

Where the class VisuallyHidden is similar to the selectric-input class in hiding the label.

hh-com commented 1 year ago

Works for me... .... onInit: function(element) { $(element).closest('.selectric-wrapper').find('.selectric-input').attr('id', element[0].text); }, ....