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

To fix the issue where radio buttons are not accessible to Dragon in UIKit or Theme Cosmos, update the application CSS so the radio inputs are properly detectable by assistive tools. For UIKit, set the radio input to be visible to accessibility tools by adjusting opacity and removing clipping, ensuring input[type="radio"] is not fully hidden. For Theme Cosmos, update the CSS to raise the z-index and ensure radio inputs inside data-ctl='RadioGroup' are not blocked by styling layers. Also verify that no custom overrides are forcing browser default radio styling, as that can break accessibility behavior after upgrade. These changes ensure the radio buttons remain visually consistent while being readable by Dragon and other screen readers.