Support Article
UI components are highlighted due to focus on them
SA-74237
Summary
Post upgrade to Pega 8.1, the below UI components are highlighted due to focus on them causing a gray border around the components.
- Checkbox
- Radio button
- Links
- First column in a repeat grid header in a local action
Error Messages
Not Applicable
Steps to Reproduce
- Upgrade Pega 7.2 to Pega 8.1.
- Select any UI element when using an application in the browser
Root Cause
A third-party product issue: Chrome browser accessibility feature.
Blue border for all elements in Chrome OnFocus is a browser feature and is not related to the Pega 7 UI. This is an accessibility feature from Chrome. The focus style marks the selected element for users using the keyboard only.
This displays as a blue shadow in Chrome browser, and as a dotted line in Mozilla Firefox browser.
Resolution
Make the following change to the operating environment:
Include the below code in the UserWorkForm:
class:focus{ outline:0 !important}
<style>
.ie *:focus {
outline:none !important;
box-shadow: none !important;
}
</style>
Published March 12, 2019 - Updated December 2, 2021
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.