OnClick on Tab button in keyboard not highlighting all the buttons or hyperlink in a DOM

  aem, css, html, javascript, jquery

There is a requirement here is when we click on Tab Button then on a browser it should highlight all the hyperlink ToolTip and button,
for for me in some case while clicking om tab key it is skipping some part of DOM and skipping some part of button.
How to achieve this

`<div class="tech-section" id="specs-1-0-0">
<div class="row heading-row">
    <div class="col-xs-12 col-sm-8 col-md-8 col-lg-9 col-xl-9">
        <h3>Essentials</h3>
    </div>

    <div class="hidden-xs col-sm-4 col-md-4 col-lg-3 col-xl-3 export-container">
        <a class="export-link" role="button" data-user-exit="SingleExport">Export Specifications
            <span class="fa-arrow-right"></span></a>
        </div>

    </div>

    <div class="row tech-section-row">
        <div class="col-xs-6 col-lg-6 tech-label">
        Collection
        </div>
        <div class="col-xs-6 col-lg-6 tech-data">
             9 Series
        </div>
    </div>

    <div class="row tech-section-row">
        <div class="col-xs-6 col-lg-6 tech-label">
        Code Name
        </div>
        <div class="col-xs-6 col-lg-6 tech-data">
            <a href="https://something.html">Mansion Beach</a>
        </div>
    </div>

    <div class="row tech-section-row">
        <div class="col-xs-6 col-lg-6 tech-label">
            Capacity
        </div>
        <div class="col-xs-6 col-lg-6 tech-data">
            1.5 TB
        </div>
    </div>

    <div class="row tech-section-row">
        <div class="col-xs-6 col-lg-6 tech-label">
        Status
        </div>
        <div class="col-xs-6 col-lg-6 tech-data">
            Launched
        </div>
    </div>
    <div class="row tech-section-row">
        <div class="col-xs-6 col-lg-6 tech-label">
            Launch Date
            <button class="btn-tooltip-trigger view-modal info-modal" data-toggle="modal" data-target=".upe-modal" data-title="Launch Date" data-description="The date the product was first introduced." data-search-title="Find products with  Launch Date" data-search-href="" data-search-icon="true">
                <span class="fa-tooltip"></span>
            </button>
        </div>
        <div class="col-xs-6 col-lg-6 tech-data">
            Q3'18
        </div>
    </div>

    <div class="row tech-section-row">
        <div class="col-xs-6 col-lg-6 tech-label">
            Lithography Type
        </div>
        <div class="col-xs-6 col-lg-6 tech-data">
            3D 
        </div>
    </div>
</div>`

like that we have some page: Now when I click on Tab on a page then starting from header it is highlighting all the parts now when it comes to the above loop while clicking Tab key it highlight the line <a href="https://something.html">Mansion Beach</a> but when again click on tab it moves out of this and goes to footer

instead it should also highlight Launch Date i.e. we can see in the bottom there is a button that is
<button class="btn-tooltip-trigger view-modal info-modal" data-toggle="modal" data-target=".upe-modal" data-title="Launch Date" data-description="The date the product was first introduced." data-search-title="Find products with Launch Date" data-search-href="" data-search-icon="true"> <span class="fa-tooltip"></span> </button>

But it is not highlighting.

Can anyone help me with the concept like how this "tab key press" works and also how to resolve the above problem

Source: Ask Javascript Questions

LEAVE A COMMENT