Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Accessible Facetwp dropdowns
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 );
@anybodesign
Copy link
Author

anybodesign commented May 15, 2018

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/

@askwpgirl
Copy link

askwpgirl commented Feb 17, 2021

Thank you so much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment