Skip to content

Instantly share code, notes, and snippets.

@mgibbs189
Created November 1, 2016 18:34
Show Gist options
  • Save mgibbs189/36e1dd9fbd0c42e0fa9e9911d5b44cb7 to your computer and use it in GitHub Desktop.
Save mgibbs189/36e1dd9fbd0c42e0fa9e9911d5b44cb7 to your computer and use it in GitHub Desktop.
FacetWP - accessibility support
<?php
add_filter( 'facetwp_assets', function( $assets ) {
$assets['accessibility.js'] = FACETWP_URL . '/assets/js/src/accessibility.js';
return $assets;
});
@caseydriscoll
Copy link

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
Copy link

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