Update components and Cypress test

website/cypress/e2e/tasks/random.cy.ts

@@ -44,12 +44,44 @@ describe("handles random tasks", () => {
                 break;
               }
               case "label-task": {
-                // Clicking on the slider will set the value to about the middle where it clicks
-                cy.get('[aria-roledescription="slider"]').first().click();
+                cy.get('[data-cy="label-group-item"]')
+                  .first()
+                  .invoke("attr", "data-label-type")
+                  .then((label_type) => {
+                    const parent = cy
+                      .get('[data-cy="label-group-item"]')
+                      .first();
+                    cy.log("Label type", label_type);
 
-                cy.get('[data-cy="review"]').click();
+                    switch (label_type) {
+                      case "slider": {
+                        // Clicking on the slider will set the value to about the middle where it clicks
+                        parent
+                          .get('[aria-roledescription="slider"]')
+                          .first()
+                          .click();
 
-                cy.get('[data-cy="submit"]').click();
+                        cy.get('[data-cy="review"]').click();
+
+                        cy.get('[data-cy="submit"]').click();
+
+                        break;
+                      }
+                      case "radio": {
+                        // Clicking on the slider will set the value to about the middle where it clicks
+                        parent
+                          .get('[aria-roledescription="radio-button"]')
+                          .last()
+                          .click();
+
+                        cy.get('[data-cy="review"]').click();
+
+                        cy.get('[data-cy="submit"]').click();
+
+                        break;
+                      }
+                    }
+                  });
 
                 break;
               }

website/src/components/Survey/LabelRadioGroup.tsx

@@ -60,7 +60,7 @@ const LabelRadioItem = (props: LabelRadioItemProps) => {
   const labelTextClass = colorMode === "light" ? `text-${colors.light.text}` : `text-${colors.dark.text}`;
 
   return (
-    <Box>
+    <Box data-cy="label-group-item" data-label-type="radio">
       <label className="text-sm" htmlFor={id}>
         {/* TODO: display real text instead of just the id */}
         <span className={labelTextClass}>{props.labelId}</span>
@@ -68,6 +68,7 @@ const LabelRadioItem = (props: LabelRadioItemProps) => {
       <Flex direction="row" gap={6} justify="center">
         {props.states.map((item, idx) => (
           <Button
+            aria-roledescription="radio-button"
             colorScheme={item.value === props.labelValue && props.interactionFlag ? item.colorScheme || "blue" : "gray"}
             isDisabled={!props.isEditable}
             size="lg"

website/src/components/Survey/LabelSliderGroup.tsx

@@ -1,4 +1,4 @@
-import { Grid, Slider, SliderFilledTrack, SliderThumb, SliderTrack, useColorMode } from "@chakra-ui/react";
+import { Box, Grid, Slider, SliderFilledTrack, SliderThumb, SliderTrack, useColorMode } from "@chakra-ui/react";
 import { useId, useState } from "react";
 import { colors } from "styles/Theme/colors";
 
@@ -44,7 +44,7 @@ function CheckboxSliderItem(props: {
   const labelTextClass = colorMode === "light" ? `text-${colors.light.text}` : `text-${colors.dark.text}`;
 
   return (
-    <>
+    <Box data-cy="label-group-item" data-label-type="slider">
       <label className="text-sm" htmlFor={id}>
         {/* TODO: display real text instead of just the id */}
         <span className={labelTextClass}>{props.labelId}</span>
@@ -60,6 +60,6 @@ function CheckboxSliderItem(props: {
           <SliderThumb />
         </SliderTrack>
       </Slider>
-    </>
+    </Box>
   );
 }