Accessible Facetwp Pager

gistfile1.txt

// Facetwp A11Y Pager

function fs_a11y_facetwp_pager_html( $output, $params ) {

    $output = '';
    $page = $params['page'];
    $total_pages = $params['total_pages'];
    
    if ( 1 < $total_pages ) {

        $text_page      = __( 'Page', 'fwp' );
        $text_of        = __( 'of', 'fwp' );
        $next_pages      = __( 'Next pages', 'your-text-domain' );
        $previous_pages  = __( 'Previous pages', 'your-text-domain' );

        // "Page 5 of 150"
        $output .= '<span class="facetwp-pager-label">' . "$text_page $page $text_of $total_pages</span>";

        if ( 3 < $page ) {
            $output .= '<button class="facetwp-page first-page" data-page="1"><span class="screen-reader-text">'.$previous_pages.'</span> &lt;</button>';
        }
        if ( 1 < ( $page - 10 ) ) {
            $output .= '<button class="facetwp-page" data-page="' . ($page - 10) . '">' . ($page - 10) . '</button>';
        }
        for ( $i = 2; $i > 0; $i-- ) {
            if ( 0 < ( $page - $i ) ) {
                $output .= '<button class="facetwp-page" data-page="' . ($page - $i) . '">' . ($page - $i) . '</button>';
            }
        }

        // Current page
        $output .= '<button class="facetwp-page active" data-page="' . $page . '"><span class="screen-reader-text">'.$text_page.'</span> ' . $page . '</button>';

        for ( $i = 1; $i <= 2; $i++ ) {
            if ( $total_pages >= ( $page + $i ) ) {
                $output .= '<button class="facetwp-page" data-page="' . ($page + $i) . '"><span class="screen-reader-text">'.$text_page.'</span> ' . ($page + $i) . '</button>';
            }
        }
        if ( $total_pages > ( $page + 10 ) ) {
            $output .= '<button class="facetwp-page" data-page="' . ($page + 10) . '"><span class="screen-reader-text">'.$text_page.'</span> ' . ($page + 10) . '</button>';
        }
        if ( $total_pages > ( $page + 2 ) ) {
            $output .= '<button class="facetwp-page last-page" data-page="' . $total_pages . '"><span class="screen-reader-text">'.$next_pages.'</span> &gt;</button>';
        }
    }
    
    return $output;

}

add_filter( 'facetwp_pager_html', 'fs_a11y_facetwp_pager_html', 10, 2 );

For accessibility reasons, we do not want an <a> tag without a "href" attribute. We will use <button> tags instead, and some more text inside the buttons. This way, pager buttons are reachable with keyboard, and screen readers can vocalize them. Based on the Facetwp documentation here : https://facetwp.com/customizing-pagination/