Instantly share code, notes, and snippets.

Embed
What would you like to do?
FacetWP - accessibility support
<?php
add_filter( 'facetwp_assets', function( $assets ) {
$assets['accessibility.js'] = FACETWP_URL . '/assets/js/src/accessibility.js';
return $assets;
});
@caseydriscoll

This comment has been minimized.

Show comment
Hide comment
@caseydriscoll

caseydriscoll Nov 1, 2016

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.

caseydriscoll commented Nov 1, 2016

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.

@caseydriscoll

This comment has been minimized.

Show comment
Hide comment
@caseydriscoll

caseydriscoll Nov 1, 2016

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);

caseydriscoll commented Nov 1, 2016

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);
@caseydriscoll

This comment has been minimized.

Show comment
Hide comment
@caseydriscoll

caseydriscoll Nov 1, 2016

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);

caseydriscoll commented Nov 1, 2016

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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment