html - Tabindex is not working? -
i've been reading documentation of how apply tabindex feature in html elements , i'm trying add "empty-btn" button in html below tabbing feature goes straight social media icons instead. why this? how fix tabs on button before icons?
html
<p class="designations"> <%= profile.designations %> <button type="button" class="empty-btn" tabindex="0"> <div class="designations-popup"> <div class="popup-content"> <h5><%- theme_data.designation_pop_title %></h5> <p><%- theme_data.designation_pop_msg %></p> </div> </div> </button> </p> <% } %> <h2 itemprop="jobtitle"> <%= theme_data.job_title.replace(/(®)/ig, "<sup>$1</sup>") %> </h2> </section> <% if (profile.networks) { %> <!-- social icons --> <div class="hidden-sm hidden-xs pull-right social-icons"> <% if (profile.networks.facebook_url ) { %> <a href="<%- profile.networks.facebook_url %>" target="_blank"> <img alt="facebook logo" src="./images/facebook.png"> </a> <% } %> <% if (profile.networks.twitter_url ) { %> <a href="<%- profile.networks.twitter_url %>" target="_blank"> <img alt="twitter logo" src="./images/twitter.png"> </a> <% } %> <% if (profile.networks.linkedin_url ) { %> <a href="<%- profile.networks.linkedin_url %>" target="_blank"> <img alt="linkedin logo" src="./images/linkedin.png"> </a> <% } %> </div> <% } %>
if understand issue question more set focus on button rather tab order. since there dynamic content in page think makes sense set focus on element wish selected first. can remove tabindex=0 , leave tab ordering browser (unless want jumbled tab order).
tabindex property can assist set element's position in tabbing order not focus on particular element.
Comments
Post a Comment