Fix for A11y - Radio buttons inaccessible for Dragon in UIKit / Theme Cosmos

General
, , , , , ,
1

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;
}