When I tab my own website (using tabindex=“0”), after the first couple of tabs, I can't see what ite

Solved
Highlighted
Pathfinder
83 3 10

I used `tabindex="0"` to tab elements on my website (https://www.techeroo.com). It successfully jumps from one navigation item to another in the header, but after it reaches the cart icon, it disappears for three-four tabs. Then it reappears. Can you please check it out?

Thanks!

0 Likes
Highlighted
Excursionist
25 6 5

The tabs that disappear are actually going through the mobile navigation. You will need tabindex="-1" on the A elements if you want to skip them. If you need tab indexing for the mobile navigation, consider using JavaScript to adjust the tabindex attributes when it goes into mobile view (perhaps based on window size) or use only one set of top navigation links that changes to mobile view via CSS media queries.

Hope that helps!

0 Likes
Highlighted
Pathfinder
83 3 10

@Winbox Can you please do it for me? My website is techerooco.myshopify.com. Thanks!!

0 Likes
Highlighted
Excursionist
25 6 5

You need to modify your theme code in order to do this. Try to find the liquid template that has the mobile navigation and do a search for "header-navigation-link". It should be around there.

If you need assistance, you can always hire a Shopify Expert.

0 Likes
Highlighted
Pathfinder
83 3 10

@Winbox Can you please help me do it? Thanks!

0 Likes
Highlighted
Excursionist
25 6 5

Sorry! I am not a Shopify expert so I can't access your store and assist you directly.

0 Likes
Highlighted
Pathfinder
83 3 10

I can add you as a staff account.

0 Likes
Highlighted
Pathfinder
83 3 10

@Winbox wrote:

The tabs that disappear are actually going through the mobile navigation. You will need tabindex="-1" on the A elements if you want to skip them. If you need tab indexing for the mobile navigation, consider using JavaScript to adjust the tabindex attributes when it goes into mobile view (perhaps based on window size) or use only one set of top navigation links that changes to mobile view via CSS media queries.

Hope that helps!

@Winbox @oscprofessional @KetanKumar I have a file called navigation.liquid. Here's what's in my file:

 

 

 

{%- comment -%}
  @param navigation_menu {drop}
    Drop of menu to use for the navigation
{%- endcomment -%}

<nav class="navigation">
  <ul class="header-navigation-list clearfix">
    {% for link in linklists[navigation_menu].links %}
      {% assign has-dropdown = false %}
      {% if linklists[link.handle] and linklists[link.handle].links.size > 0 %}
        {% assign has-dropdown = true %}
      {% endif %}
      <li class="header-navigation-list-item{% if has-dropdown %} has-dropdown{% endif %}" tabindex="-1">
        <a
          class="header-navigation-link primary-link {% if link.active %}header-navigation-current{% endif %}"
          href="{{ link.url }}"
          tabindex="0"
          {% if has-dropdown %}data-has-dropdown{% endif %}
        >
          {{ link.title }}
        </a>
        {% if has-dropdown %}
          {% if showArrows %}
            <a class="icon icon-angle-down header-navigation-list-arrow" tabindex="0" data-has-dropdown></a>
          {% endif %}
          <ul class="header-navigation-list secondary-list clearfix" data-is-dropdown>
            {% for link in linklists[link.handle].links %}
              {% assign has-dropdown = false %}
              {% if linklists[link.handle] and linklists[link.handle].links.size > 0 %}
                {% assign has-dropdown = true %}
              {% endif %}
              <li class="header-navigation-list-item secondary-list-item">
                <a class="header-navigation-link secondary-link" href="{{ link.url }}" tabindex="0">
                  {{ link.title }}
                </a>
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</nav>

 

 

 

 

I'm wondering if someone can help me implement what @Winbox wrote. Either adding JavaScript or creating one navigation is fine as long as it displays the same. Thanks!

0 Likes
Highlighted
Excursionist
25 6 5

Hey, thanks for sharing your code! This appears to be the main navigation.

Can you find and share the one for your mobile navigation? Try searching for "header-drawer". That's where your mobile navigation should start. Inside it, you'll find an A element. Just change its tabindex value from "0" to "-1" and that should do the trick.

<div class="header-drawer" tabindex="-1" data-header-drawer>

 

0 Likes
Highlighted
Pathfinder
83 3 10

@Winbox I found it in general-header.liquid (see below for header code), but unfortunately, it was already -1.

 

 

{% comment %}
  Changing `show_search` to `true` enables the Search in the header
{% endcomment %}
{% assign show_search = false %}

{% comment %}
  Removed the settings_schema option to change header,
    - header_navigation_location can be either header, or drawer.
{% endcomment %}
{% assign header_navigation_location = 'header' %}

{%- capture additional_classes -%}
  header

  {%- if header_navigation_location == 'drawer' -%}
    collapsed-navigation
  {%- endif -%}

  {% if section.settings.header_sticky %}
    sticky-header
  {% endif %}
{%- endcapture -%}

{% assign default_logo = section.settings.header_logo %}
{% assign menu = section.settings.menu %}
{% assign alternate_logo = section.settings.header_logo_alternate %}


<div
  class="{{ additional_classes | strip_newlines }}"
  {% if section.settings.header_sticky %}
    data-sticky-header
  {% endif %}
  data-main-header="{{ header_navigation_location }}"
  data-section-id="{{ section.id }}"
  data-section-type="header">
  <div class="main-header-wrapper">
      
  	<div class="main-header" role="banner" data-header-content="">
      <h1 class="branding regular-logo-in-drawer has-logo">
        <a class="branding-logo-link" href="/"><img srcset="//cdn.shopify.com/s/files/1/0279/8577/2609/t/16/assets/Techeroo_Logo.png 3.75x 750w" src="//cdn.shopify.com/s/files/1/0279/8577/2609/t/16/assets/Techeroo_Logo.png?v=1600952333 200w" loading="lazy" class="branding-logo-image logo-regular" alt="Techeroo Logo" title="Techeroo"></a>
      </h1>
        
 
      
      
      
      {% if show_search %}
        <div class="header-search-wrapper">
          <form class="header-search-form" action="/search" method="get">
            <input class="header-search-input" name="q" type="text" placeholder="{{ 'general.general.search_placeholder' | t }}" value="">
          </form>
        </div>
      {% endif %}
      <div class="header-tools">
        {% if header_navigation_location == 'header' %}
          {%
            include 'navigation',
            showArrows: false,
            navigation_menu: menu
          %}
        {% endif %}
        <div class="header-actions">
          <div class="header-actions-list">
            <div class="header-actions-list-item header-currency-switcher currency-switcher coin-container"></div>
            {% if settings.show-currency-switcher %}
              <div class="header-actions-list-item header-currency-switcher currency-switcher">
                {% include "currency-selector" %}
              </div>
            {% endif %}
            {% if show_search %}
              <a class="header-actions-list-item header-search-toggle icon-search" href="#" data-search-toggle></a>
            {% endif %}
            {% if section.settings.show_cart %}
              <a class="header-actions-list-item icon-cart header-cart-link" href="/cart"  aria-label="Cart" tabindex="0">
                <span class="header-cart-count {% if cart.item_count > 0 %}active{% endif%}">{{ cart.item_count }}</span>
              </a>
            {% endif %}
            {% if header_navigation_location == 'header' %}
              {% if shop.customer_accounts_enabled %}
                <a class="header-actions-list-item header-account-link icon-head" href="/account" aria-label="Your Account" tabindex="0">

            </a>
              {% endif %}
            {% endif %}
            <a class="header-actions-list-item drawer-toggle" data-drawer-toggle tabindex="0" href="#">
              <span class="icon-menu"></span>
              <span class="icon-cross"></span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

    
    
    

    
    
    
    
    
    
    
    
    
    
 
  <div class="header-drawer" tabindex="-1" data-header-drawer>
    {%
      include 'navigation',
      showArrows: true,
      navigation_menu: menu
    %}
    <div class="coin-container"></div>
    {% if settings.show-currency-switcher %}
      <div class="drawer-currency-switcher currency-switcher">
        {% include "currency-selector" %}
      </div>
    {% endif %}
    {% if shop.customer_accounts_enabled %}
      <a href="/account" class="drawer-account-link button">{{ 'general.general.my_account' | t }}</a>
    {% endif %}
    {% if section.settings.drawer_social_icons %}
      <div class="drawer-social-icons">
        {% assign social_media_accounts = "facebook|twitter|google|pinterest|instagram|vimeo|youtube|rss" | split: "|" %}
        {% for account in social_media_accounts %}
          {% capture url %}social_{{ account }}_url{% endcapture %}
          {% if settings[url] != blank %}
            <a
              class="drawer-social-icon-{{ account }}"
              href="{{ settings[url] | escape }}"
              target="_blank">
              {{ account | capitalize }}
            </a>
          {% endif %}
        {% endfor %}
      </div>
    {% endif %}
  </div>
</div>

{% schema %}
{
  "name": "Header",
  "settings": [
    {
      "type": "link_list",
      "id": "menu",
      "label": "Menu",
      "default": "main-menu"
    },
    {
      "type": "checkbox",
      "id": "header_sticky",
      "label": "Enable fixed header",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_cart",
      "label": "Show cart",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "drawer_social_icons",
      "label": "Enable social icons in collapsed navigation",
      "default": false
    },
    {
      "type": "header",
      "content": "Logo"
    },
    {
      "type": "image_picker",
      "id": "header_logo",
      "label": "Logo image",
      "info": "400 x 200px .png recommended"
    },
    {
      "type": "image_picker",
      "id": "header_logo_alternate",
      "label": "Inverted logo image",
      "info": "400 x 200px .png recommended"
    }
  ]
}
{% endschema %}

 

 

0 Likes