FacetWP - accessibility support

functions.php

<?php

add_filter( 'facetwp_assets', function( $assets ) {
    $assets['accessibility.js'] = FACETWP_URL . '/assets/js/src/accessibility.js';
    return $assets;
});

Thanks :)

I added this to make spacebar and enter key commands work

(function($) {
    $(document).on('facetwp-loaded', function() {
        $('.facetwp-checkbox').each(function() {
            $(this).attr('role', 'checkbox');
            $(this).attr('aria-checked', $(this).hasClass('checked') ? 'true' : 'false');
            $(this).attr('tabindex', 0);

            $(this).bind( 'keydown', function( e ) {
                if( e.keyCode == 32 || e.keyCode == 13 ) {
                    e.stopPropagation();
                    e.preventDefault();

                    $(this).click();
                }
            } );
        });
    });
})(jQuery);

It loses focus after selection, but might be able to fix that with a bit more work.

Thanks :)

I added this to make spacebar and enter key commands work

(function($) {
    $(document).on('facetwp-loaded', function() {
        $('.facetwp-checkbox').each(function() {
            $(this).attr('role', 'checkbox');
            $(this).attr('aria-checked', $(this).hasClass('checked') ? 'true' : 'false');
            $(this).attr('tabindex', 0);

            $(this).bind( 'keydown', function( e ) {
                if( e.keyCode == 32 || e.keyCode == 13 ) {
                    e.stopPropagation();
                    e.preventDefault();

                    $(this).click();
                }
            } );
        });
    });
})(jQuery);

It loses focus after selection, but might be able to fix that with a bit more work.

Hacky, but I think it works. In Chrome 54 on macOS 10.11.5 El Capitan

'LG' is a global var I using for project anyways.

(function($) {
    $(document).on('facetwp-loaded', function() {
        $('.facetwp-checkbox').each(function() {
            $(this).attr('role', 'checkbox');
            $(this).attr('aria-checked', $(this).hasClass('checked') ? 'true' : 'false');
            $(this).attr('tabindex', 0);

            $(this).bind( 'keydown', function( e ) {
                if( e.keyCode == 32 || e.keyCode == 13 ) {
                    e.stopPropagation();
                    e.preventDefault();

                    LG.LAST_FACETWP_CHECKED = $(this).data( 'value' );

                    $(this).click();
                }
            } );
        });

        if ( LG.LAST_FACETWP_CHECKED !== null ) {
            $( '[data-value="' + LG.LAST_FACETWP_CHECKED + '"]' ).focus();
        }
    });
})(jQuery);

Hacky, but I think it works. In Chrome 54 on macOS 10.11.5 El Capitan

'LG' is a global var I using for project anyways.

(function($) {
    $(document).on('facetwp-loaded', function() {
        $('.facetwp-checkbox').each(function() {
            $(this).attr('role', 'checkbox');
            $(this).attr('aria-checked', $(this).hasClass('checked') ? 'true' : 'false');
            $(this).attr('tabindex', 0);

            $(this).bind( 'keydown', function( e ) {
                if( e.keyCode == 32 || e.keyCode == 13 ) {
                    e.stopPropagation();
                    e.preventDefault();

                    LG.LAST_FACETWP_CHECKED = $(this).data( 'value' );

                    $(this).click();
                }
            } );
        });

        if ( LG.LAST_FACETWP_CHECKED !== null ) {
            $( '[data-value="' + LG.LAST_FACETWP_CHECKED + '"]' ).focus();
        }
    });
})(jQuery);

This adds support for pagers on 'enter' key:

(function($) {
    $(document).on('facetwp-loaded', function() {
        $('.facetwp-checkbox').each(function() {
            $(this).attr('role', 'checkbox');
            $(this).attr('aria-checked', $(this).hasClass('checked') ? 'true' : 'false');
            $(this).attr('tabindex', 0);

            $(this).bind( 'keydown', function( e ) {
                if( e.keyCode == 32 || e.keyCode == 13 ) {
                    e.stopPropagation();
                    e.preventDefault();

                    LG.LAST_FACETWP_CHECKED = $(this).data( 'value' );

                    $(this).click();
                }
            } );
        });


        $('.facetwp-page').each(function() {
            $(this).attr('tabindex', 0);
            $(this).bind( 'keydown', function( e ) {

                if( e.keyCode == 13 ) {
                    e.stopPropagation();
                    e.preventDefault();

                    $(this).click();
                }
            } );
        } );

        if ( LG.LAST_FACETWP_CHECKED !== null ) {
            $( '[data-value="' + LG.LAST_FACETWP_CHECKED + '"]' ).focus();
        }
    });
})(jQuery);

This adds support for pagers on 'enter' key:

(function($) {
    $(document).on('facetwp-loaded', function() {
        $('.facetwp-checkbox').each(function() {
            $(this).attr('role', 'checkbox');
            $(this).attr('aria-checked', $(this).hasClass('checked') ? 'true' : 'false');
            $(this).attr('tabindex', 0);

            $(this).bind( 'keydown', function( e ) {
                if( e.keyCode == 32 || e.keyCode == 13 ) {
                    e.stopPropagation();
                    e.preventDefault();

                    LG.LAST_FACETWP_CHECKED = $(this).data( 'value' );

                    $(this).click();
                }
            } );
        });


        $('.facetwp-page').each(function() {
            $(this).attr('tabindex', 0);
            $(this).bind( 'keydown', function( e ) {

                if( e.keyCode == 13 ) {
                    e.stopPropagation();
                    e.preventDefault();

                    $(this).click();
                }
            } );
        } );

        if ( LG.LAST_FACETWP_CHECKED !== null ) {
            $( '[data-value="' + LG.LAST_FACETWP_CHECKED + '"]' ).focus();
        }
    });
})(jQuery);