portfolio sort menu accessibility

Thanks as always, Ismael — Claude gave me the following to change the code you referred to:

$sort_loop .= 	"<span class='text-sep {$term->slug}_sort_sep {$show_item}'>/</span>";
$sort_loop .= 	'<button type="button" data-filter="' . $term->slug . '_sort" class="'.$term->slug.'_sort_button ' . $show_item . '" >';
$sort_loop .=		'<span class="inner_sort_button">';
$sort_loop .=			'<span>' . esc_html( trim( $term->name ) ) . '</span>';
$sort_loop .=			"<small class='avia-term-count'> " . $term_count[ $term->term_id ] . ' </small>';
$sort_loop .=		'</span>';
$sort_loop .= 	'</button>';
				}
				$allowed_terms = json_encode( $allowed_terms );
$output .=	"<div class='av-sort-by-term {$hide} ' data-av-allowed-sort='{$allowed_terms}' >";
$output .=		'<button type="button" data-filter="all_sort" class="all_sort_button active_sort">' . $first_item_html . '</button>';
$output .=		$sort_loop;
$output .=	'</div>';

That seems to have changed the links to buttons, but it broke the sorting functionality (see https://abodedev.wpengine.com/communities/). Claude says “The issue is that the JavaScript handling the masonry sorting is still looking for tags. You need to find and update the JavaScript file that handles the masonry sorting functionality.” Does this all make sense to you and if so can you point me to the other file code I need to change? Thanks again so much!

Thanks again, Ismael — I found that on line 32 and another, similar line on 213, but changing those didn’t seem to work. Then I found on('click', 'a', methods.masonry_filter) on line 279 — I changed that a to button and that seemed to complete the fix. Now I just have to style the buttons. And again, I’ll have to reinstate these changes if these files are updated in future theme updates, right?

Thanks, Ismael — do you have a recommendation re which method/strategy to use? I guess the child theme method is easier (not having to check/re-apply the customization every time the theme’s updated), but checking/re-applying the customization each time ensures other updates/improvements to the code in those files are incorporated — does that sound right / are those the key tradeoffs?

Thanks again, I worked with Claude to get this script I could drop in the child theme functions file, so I don’t have to copy any of the files to the child theme — lmk if you think it’s a problem. With the script and css below I got everything looking and working as it was, but now with “buttons”. After all that work, I’m wondering (and should’ve asked earlier): Do you even agree the sorting items as links were an accessibility issue? If it all looks good to you, feel free to close this thread.

/* JavaScript to convert sorting links to buttons */
add_action('wp_footer', 'child_masonry_links_to_buttons', 999);
function child_masonry_links_to_buttons() {
    ?>
    <script>
    jQuery(document).ready(function($) {
        // Convert all masonry sort links to buttons
        $('.av-masonry-sort a[data-filter]').each(function() {
            var $link = $(this);
            var $button = $('<button type="button"></button>')
                .attr('data-filter', $link.data('filter'))
                .attr('class', $link.attr('class'))
                .html($link.html());
            
            $link.replaceWith($button);
        });
        
        // Re-bind click events to buttons
        $('.av-masonry-sort').off('click', 'a').on('click', 'button', function() {
            var current = $(this),
                linktext = current.html(),
                selector = current.data('filter'),
                masonry = current.parents('.av-masonry').eq(0),
                container = masonry.find('.av-masonry-container').eq(0),
                links = masonry.find('.av-masonry-sort button'),
                activeCat = masonry.find('.av-current-sort-title');

            links.removeClass('active_sort');
            current.addClass('active_sort');
            container.attr('id', 'masonry_id_' + selector);

            if(activeCat.length) {
                activeCat.html(linktext);
            }

            // Trigger isotope filtering
            var filters = selector ? {filter: '.'+selector} : {};
            filters['layoutMode'] = 'packery';
            filters['packery'] = {gutter:0};
            filters['percentPosition'] = true;
            filters['itemSelector'] = "a.isotope-item, div.isotope-item";
            filters['originLeft'] = $('body').hasClass('rtl') ? false : true;

            container.isotope(filters);
            
            setTimeout(function() { $(window).trigger('debouncedresize'); }, 500);
            return false;
        });
    });
    </script>
    <?php
}

/* sorting menu styling accessible buttons */
.main_color .av-sort-by-term button {
    border: none;
    color: #fff;
    background: #0076a8;
    padding: 6px 15px 8px;
    text-transform: capitalize;
    font-size: 15px;
	margin: 3px 3px 0 0;
  	font-family: 'sarabun',Helvetica,Arial,sans-serif;
}
.main_color .av-sort-by-term button:hover {
    background: #b6bd00;
	transition: .25s;
}
.main_color .av-sort-by-term button.active_sort {
    color: #fff;
	background: #b6bd00;
}