​This article is about the side-affects of recent updates from chrome (version >= 83). Chrome introduced certain enhancements to improve certain form-level elements and their accessibility. As a result of this, Pega customers have been facing issues related to focus styles in their applications. So,

1. What are the chrome updates?

You can go through this blog for a detailed explanation of the updates. Our primary concern here is the focus style (or accessibility) changes introduced through this version. The default outline styles have been changed, for mac OS this is a blue colour (a variant of blue) and for windows, this comes as a black outline. This also makes sure on a darker background, outline is visible. See below:

2. How are Pega apps affected by this?

As most of you are aware, Pega by default provides focus styles for all the auto-generated controls. This makes sure focus styles are consistent across all browsers and Operating systems. Now with the latest version of Chrome, especially on windows machine user would see inconsistencies in focus styles between elements (the black border around an element). 

3. But you just said Pega adds its own styles for focus styles, in what scenarios do we see this inconsistency?

Yes though Pega adds its own standard focus styles across applications, it is more to known scenarios like auto-generated controls or the components that Pega provides OOTB. Apart from these cases, users could see focus styles for the following kind of scenarios:

1.  For any non-autogenerated controls the customer has created
2.  If in the skin control format, if a user sets the element state to be "Default" (there will be 3 options Auto/Default/Custom, "Auto" being Pega standard behaviour, "Default" defaulting browser behaviour)

4. So what is the plan to fix the issue?

Below is the local fix customers can apply and Pega would not be providing hotfix for browser updates. Add below styles in one of your application skin's included stylesheets

.chrome *:focus{
   outline: none;
}

5. What would be the known side-effects of this local fix?

The default setting for control format: The focus styles of certain controls may not work as intended (as explained above, when control's focus is being set to "Default"). You can fix this by changing the setting to "Auto". 

Actions set on Icons: Whenever actions are set on "icon" control, please use the button with an icon for such cases with "Icon" as button format, this is more semantic, accessible and gives a consistent focus style.

Custom code: For any custom code using non-auto generated form controls, need to fix their focus styling explicitly(this is always a good practice)

6. Does this affect any other browser?

The above local fix is applied only for chromium(both google chrome and Microsoft edge) browsers, not for all browsers.

Hope this article helps in fixing chrome specific focus styles inconsistencies, if there are any other concerns around this article please feel free to post your questions here.

​