Issue on choosing question type as 'rating'

Are you requesting a feature, reporting a bug or asking a question?

Reporting a bug

What is the current behavior?

• The styling for the rating type “radio field” is taking the styling class

 .sv_main .sv-visuallyhidden {
      position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;

Due to this the radio buttons are not visible.

• On trying to add custom styling it is observed that before the minRateDescription a radio button is being displayed.

<div>
   <label>
      <span>minRateDescription</span>
      <input type='radio' />
      <span>1</span>
   </label>
</div>

But the html structure that is currently being rendered is

<div>
   <label>
      <input type='radio' />
      <span>minRateDescription</span>
      <span>1</span>
   </label>
</div>

What is the expected behavior?

<div>
   <label>
      <span>minRateDescription</span>
      <input type='radio' />
      <span>1</span>
   </label>
</div>

How would you reproduce the current behavior (if this is a bug)?

The bug is reproducible by adding a question of typing rating.

Provide the test code and the tested page URL (if applicable)

Tested page URL:

Test code

const q6: Questions = {
    type: "rating",
    name: "satisfaction",
    title: "Below you will find word pairs that you can use to rate the survey. They each represent extreme opposites, between which a gradation is possible.",
    isRequired: true,
    minRateDescription: "Unsympathetic",
    maxRateDescription: "Sympathetic"
}

Specify your

• browser: chrome
• browser version: 83.0
• surveyjs platform (angular or react or jquery or knockout or vue): survey-react
• surveyjs version: 1.7.15

[tsv2013]

These markup changes can affect other users and other themes.

You can use the https://surveyjs.io/Documentation/Library?id=surveymodel#onAfterRenderQuestion event to patch the markup according your needs.

[Matwog]

Thank you 😃