Update components and Cypress test

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