Question

1
Replies
34
Views
Close popover
Regina Siochi (ReginaS9)
Sky Solutions LLC

Sky Solutions LLC
US
View Profile
ReginaS9 Member since 2019 22 posts
Sky Solutions LLC
Posted: July 15, 2020
Last activity: July 15, 2020

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"?  
Pega Customer Service 8.3 User Experience System Architect
Close popover
Posted: 6 months ago
Close popover
Durai Sankar R (duraisankar)
Serendebyte
Senior System Architect
Serendebyte
IN
View Profile

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!
Share this page Share via LinkedIn Copying...
Copied!