Tab Index : Scroll to top

[dshakya]

Hi,

The Scroll to Top button that can be activated from Theme options do not get a Tab index. This makes it impossible for people to access it using keyboard navigation for accessibility purpose.

Is it possible to add a tabindex for this element?

Thanks again.

[thai]

Hi @dshakya,

It’s possible. Make sure you’ve already setup a child theme.

After that add the following code under functions.php file locates in your child theme:

function x_scroll_top_anchor() {

    if ( x_get_option( 'x_footer_scroll_top_display' ) == '1' ) : ?>

      <a class="x-scroll-top <?php echo x_get_option( 'x_footer_scroll_top_position' ); ?> fade" title="<?php esc_attr_e( 'Back to Top', '__x__' ); ?>">
        <i class="x-icon-angle-up" data-x-icon-s="&#xf106;"></i>
      </a>

      <script>

      jQuery(document).ready(function($) {

        var windowObj            = $(window);
        var body                 = $('body');
        var bodyOffsetBottom     = windowObj.scrollBottom();             // 1
        var bodyHeightAdjustment = body.height() - bodyOffsetBottom;     // 2
        var bodyHeightAdjusted   = body.height() - bodyHeightAdjustment; // 3
        var scrollTopAnchor      = $('.x-scroll-top');

        function sizingUpdate(){
          var bodyOffsetTop = windowObj.scrollTop();
          if ( bodyOffsetTop > ( bodyHeightAdjusted * <?php echo x_get_option( 'x_footer_scroll_top_display_unit' ) / 100; ?> ) ) {
            scrollTopAnchor.addClass('in');
          } else {
            scrollTopAnchor.removeClass('in');
          }
        }

        windowObj.bind('scroll', sizingUpdate).resize(sizingUpdate);
        sizingUpdate();

        scrollTopAnchor.click(function(){
          $('html, body').animate({ scrollTop: 0 }, 850, 'xEaseInOutExpo');
          return false;
        });

      });

      </script>

    <?php endif;

}
add_action( 'x_after_site_end', 'x_scroll_top_anchor' );

Then you can easily edit the HTML code of scroll to top button.

For more information about tabindex attribute, please take a look at this:

https://www.w3schools.com/tags/att_tabindex.asp

Regards!

[dshakya]

Thanks @thai

This works and now it gets a focus but for some reason - pressing the enter key or the space key does not scroll the page to the top.

[thai]

Hi @dshakya,

You need to add the following JS code:

scrollTopAnchor.on('keypress', function(e) {
    if(e.which === 13) {
      $(this).trigger('click');
    }
});

After this code:

scrollTopAnchor.click(function(){
          $('html, body').animate({ scrollTop: 0 }, 850, 'xEaseInOutExpo');
          return false;
        });

For more information, please take a look at this:

Initiate click on div using tab and enter

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Hope that helps and thank you for understanding.

[dshakya]

Thank you so much for you help. Much appreciated.

[thai]

You’re most welcome