Accessible Facetwp dropdowns

gistfile1.txt

function fs_add_dropdown_labels() {
?>
<script>
(function($) {
    $(document).on('facetwp-loaded', function() {
        $('.facetwp-dropdown').each(function() {
            var facet_name = $(this).parent().attr('data-name');
            var facet_label = FWP.settings.labels[facet_name];
            $(this).attr('id', facet_name);
            
            if ($('.facet-label[for="' + facet_name + '"]').length < 1) {
                $(this).parent().before('<label class="facet-label" for="' + facet_name + '">' + facet_label + '</label>');
            }
        });
    });
})(jQuery);
</script>
<?php
}
add_action( 'wp_head', 'fs_add_dropdown_labels', 100 );

For accessibility reasons, we add a label with a for attribute before each dropdown. We also add an ID to each dropdown, matching the for attribute of their label. Inspired by the original documentation: https://facetwp.com/add-labels-above-each-facet/

Thank you so much!