How to avoid tabbing on the popup

BhavinSanghani

I am using InfoTemplate class in my application to show popup on the map. Let's say popup is open on the map. Now, if I try to navigate using tab key then cursor stops at Zoom To link.

If I want to avoid tabbing on this popup then how can I do that? e.g if you open following example in the browser and navigate using tab key then it will show cursor on Zoom To link when the control comes there. May be I need to set tabIndex="-1" on that link, but not sure how can I do that.

Formatter Function

ChrisSergent

According to the W3C you can set a tabIndex for the following:

Modulo platform conventions, it is suggested that for the following elements, the tabindex focus flag be set:

• <A href="http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element" style="color: inherit; background: transparent;" rel="nofollow noopener noreferrer">a</A> elements that have an <A href="http://www.w3.org/TR/html5/links.html#attr-hyperlink-href" style="color: inherit; background: transparent;" rel="nofollow noopener noreferrer">href</A> attribute
• <A href="http://www.w3.org/TR/html5/document-metadata.html#the-link-element" style="color: inherit; background: transparent;" rel="nofollow noopener noreferrer">link</A> elements that have an <A href="http://www.w3.org/TR/html5/document-metadata.html#attr-link-href" style="color: inherit; background: transparent;" rel="nofollow noopener noreferrer">href</A> attribute
• <A href="http://www.w3.org/TR/html5/forms.html#the-button-element" style="color: inherit; background: transparent;" rel="nofollow noopener noreferrer">button</A> elements
• <A href="http://www.w3.org/TR/html5/forms.html#the-input-element" style="color: inherit; background: transparent;" rel="nofollow noopener noreferrer">input</A> elements whose <A href="http://www.w3.org/TR/html5/forms.html#attr-input-type" style="color: inherit; background: transparent;" rel="nofollow noopener noreferrer">type</A> attribute are not in the Hidden state
• <A href="http://www.w3.org/TR/html5/forms.html#the-select-element" style="color: inherit; background: transparent;" rel="nofollow noopener noreferrer">select</A> elements
• <A href="http://www.w3.org/TR/html5/forms.html#the-textarea-element" style="color: inherit; background: transparent;" rel="nofollow noopener noreferrer">textarea</A> elements

If this is your only link on the page, you could use the a element and write:

<SPAN class="pln" style="color: #000000;">document</SPAN><SPAN class="pun" style="color: #000000;">.</SPAN><SPAN class="pln" style="color: #000000;">getElementByTagName</SPAN><SPAN class="pun" style="color: #000000;">(</SPAN><SPAN class="str" style="color: #800000;">"a"</SPAN><SPAN class="pun" style="color: #000000;">).</SPAN><SPAN class="pln" style="color: #000000;">tabIndex </SPAN><SPAN class="pun" style="color: #000000;">=</SPAN><SPAN class="pln" style="color: #000000;"> </SPAN><SPAN style="color: #800000;">-1</SPAN><SPAN class="pun" style="color: #000000;">;</SPAN>

to skip it.

If that does not work, you could try getting element by class name which in this case is actionList, so it would be:

document.getElementsByClassName("actionList").tabIndex = -1;

There may be a different way to write this if you are using AMD, but I am not sure.

Worst case scenario, you could host the JavaScript API locally and name then manually add tabIndex = -1.