Tech Hunt

Achieving Cyclic focus behaviour:
As part of accessibility requirement for component like popup we need to set the cyclic focus behavior. Cyclic focus for a component like popup means a popup can lose focus only when it gets closed by any event or user action. Tabbing on popup should move focus inside the popup only.
A div or span tag can be added to the end of popup and can assign a tabindex=0 to make sure the end element always receives focus. When end elements receives the focus, focus needs to be set back to the popup header or wherever it was set when It was opened first time.
<div id=”popup” >
<div id=”header” ></div>
<div id=”popup_content”>
….
</div>
<span id=”endElement” tabindex=”0″ onfocus=”–set focus to header—” ></span> //firefox supports setting focus on div or span
</div>