In dialog box, there is one input search box and one close button. On tab click both elements are focusable and readable by NVDA but shift+tab not allowing me to focus inside an search box but instead moving to an outer div and then the close button.
It is salseforce project, LWC components are used and there are different components for input searchbar and close button.
I have used tabindex=”-1″ for dialog box parent div and tabindex=”0″ for input searchbox and close button.
To trap focus I have used below javascript code in close button component.
handleFocusOut(event) {
const modal = this.template.querySelector(`[data-id="articleModal"]`);
var related = event.relatedTarget;
var dataindexval = related.getAttribute('data-index')
if (dataindexval == '0') {
// If focus is leaving, bring it back to the modal
this.template.querySelector('.searchBox').focus();
//event.preventDefault();
}
else {
if (dataindexval == '1') {
// If focus is leaving, bring it back to the modal
this.template.querySelector('.closeWrap').focus();
}
}
}