Reason for tabindex attr associated with harnessBody
Hello,
We have a requirement to remove the tabindex=0 from <body> class=harnessBody to meet accessibility guidelines. Having tabindex=0 associated with the <body> sets focus on the <body> with no visible focus indicator when user presses Tab key to navigate the portal. (image attached)
I have tried to apply some code to remove the tabindex attribute or set tabindex="-1" to remove the <body> from the tab order, which runs on window.onload but the tabindex reverts back to a value of "0" once the user presses the Tab key. (code below applied to harness)
window.onload=setTabIndex();
function setTabIndex(){ $(".harnessBody").attr("tabindex", "-1"); }
- Is there a particular reason why Pega sets the <body> with tabindex="0"?
- Does anyone have any OOTB suggestions on how to remove tabindex or set "tabindex" to "-1"?
- Does anyone have any suggestion on how to edit the code so that it prevents the tabindex from reverting back to tabindex="0"?
Morgan Stanley
IN
Hi,
This article might be helpful for you when working with focus: https://collaborate.pega.com/discussion/issues-focusing-web-page-and-how-manage-it
For tabindex reverting back issue, you can try executing the code after DOM is fully loaded.
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
setTabIndex();
});
function setTabIndex(){ $(".harnessBody").attr("tabindex", "-1"); }
</script>
The above code runs the function after the page is completely loaded.
Good Luck!