Discussion
Pegasystems Inc.
IN
Last activity: 5 May 2023 4:26 EDT
Fix for A11y - Radio buttons inaccessible for Dragon in UIKit / Theme Cosmos
In UiKit/Theme-cosmos, the radio buttons are not read by the Dragon Reader. We have fixed this issue in Pega Infinity '23, 8.8.2, 8.7.5, and above. For any lower versions, please make the changes below
UiKit:
In order to fix this issue in UiKit. In the application CSS file, add the below CSS.
div.radioTable span{
position: relative;
}
div[data-ctl="RadioGroup"] input[type="radio"] {
clip: unset;
z-index:1;
opacity:0;
}
Theme-Cosmos:
In order to fix this issue in Theme-Cosmos. If there are any application CSS files, please add the below CSS. If not save as the py-cosmos-custom-css into the application ruleset and add the below CSS.
.content-item > .content-inner > .field-item > .checkbox input.checkbox div[data-ctl='RadioGroup'] input[type='radio'],
.flex.content > .flex.content-item .radioTable input,
.flex.content > .flex.content-item #CT > .radioTable input{
z-index:1;
}
Note: If there are any overrides present in the application stylesheet to override the OOTB Radio button styles, please reverify whether it is displaying or not. For eg:- Instead of using UiKit radio buttons, the application team overrode to use the browser's default radio button. Then post upgrade to Pega Infinity '23, 8.8.2, and 8.7.5, please add the below CSS to make the radio button visible. This below change is necessary only for UiKit based applications and not required for theme-cosmos.
div[data-ctl='RadioGroup'] input[type='radio']{
opacity:1;
}