<!DOCTYPE html>
<html lang="<%= I18n.locale.to_s %>" prefix="og:http://ogp.me/ns#">
  <head>
    <%= render partial: 'layouts/head_tag_content' %>
    <%= content_for(:head) %>
  </head>

  <body>
    <div class="skip-to-content">
      <%= link_to "Skip to Content", "#skip-to-content" %>
    </div>
    <%= render '/masthead' %>
    <%= content_for(:navbar) %>
    <%= content_for(:precontainer_content) %>
    <div id="content-wrapper" class="container" role="main">
      <%= render '/flash_msg' %>
      <%= render_breadcrumbs builder: Hyrax::BootstrapBreadcrumbsBuilder %>
      <% if content_for?(:page_header) %>
        <div class="row">
          <div class="col-xs-12 main-header">
            <%= yield(:page_header) %>
          </div>
        </div>
      <% end %>

        <a name="skip-to-content" id="skip-to-content"></a>
        <%= content_for?(:content) ? yield(:content) : yield %>

    </div><!-- /#content-wrapper -->
    <%= render 'shared/footer' %>
    <%= render 'shared/ajax_modal' %>
  </body>
</html>

<!DOCTYPE html>
<html lang="<%= I18n.locale.to_s %>" prefix="og:http://ogp.me/ns#">
  <head>
    <%= render partial: 'layouts/head_tag_content' %>
    <%= content_for(:head) %>
  </head>

  <body>
    <div class="skip-to-content">
      <%= link_to "Skip to Content", "#skip-to-content" %>
    </div>
    <%= render '/masthead' %>
    <%= content_for(:navbar) %>
    <%= content_for(:precontainer_content) %>
    <div id="content-wrapper" class="container" role="main">
      <%= render '/flash_msg' %>
      <%= render_breadcrumbs builder: Hyrax::BootstrapBreadcrumbsBuilder %>
      <% if content_for?(:page_header) %>
        <div class="row">
          <div class="col-xs-12 main-header">
            <%= yield(:page_header) %>
          </div>
        </div>
      <% end %>

      <a name="skip-to-content" id="skip-to-content"></a>
      <%= content_for?(:content) ? yield(:content) : yield %>
  
    </div><!-- /#content-wrapper -->
    <%= render 'shared/footer' %>
    <%= render 'shared/ajax_modal' %>
  </body>
  <script type="text/javascript">
    $( document ).ready(function() {
      $(".skip-to-content").click(function(event) {
        event.preventDefault();
        // element to focus on
        let skipTo = '#' + $(this)[0].firstElementChild.hash.split('#')[1];

        // Setting 'tabindex' to -1 takes an element out of normal 
        // tab flow but allows it to be focused via javascript
        $(skipTo).attr('tabindex', -1).on('blur focusout', function () {
          $(this).removeAttr('tabindex');
        }).focus();
      });
    });
  </script>
</html>

Make skip to content focus on main content
Make skip to content focus on main content
