From f5f907a8834ce67fd17c6444a14bb99d3772c292 Mon Sep 17 00:00:00 2001
From: Martina Bustacchini <41484878+deodorhunter@users.noreply.github.com>
Date: Mon, 4 Mar 2024 15:57:10 +0100
Subject: [PATCH] fix: a11y for feedback section (#560)

* fix: a11y for customer satisfaction section, still small problem with sr announcements

* fix: fix some more automated tests issues

* fix: changed some logic on satisfaction change, added autofocus on back to first step selected answer

* chore: update release.md and translations

---------

Co-authored-by: Piero Nicolli <pnicolli@users.noreply.github.com>
---
 RELEASE.md                                    |   1 +
 locales/de/LC_MESSAGES/volto.po               |   5 +
 locales/en/LC_MESSAGES/volto.po               |   5 +
 locales/es/LC_MESSAGES/volto.po               |   5 +
 locales/fr/LC_MESSAGES/volto.po               |   5 +
 locales/it/LC_MESSAGES/volto.po               |   5 +
 locales/volto.pot                             |   5 +
 .../CustomerSatisfaction/FeedbackForm.jsx     | 149 ++++++++++++-----
 .../Steps/AnswersStep.jsx                     |  14 +-
 .../Steps/CommentsStep.jsx                    |   8 +-
 .../Steps/Commons/Rating.jsx                  | 153 ++++++++----------
 .../components/FeedbackForm/Steps/Commons.jsx |  18 ++-
 .../Components/_customerSatisfaction.scss     |  51 +++++-
 13 files changed, 277 insertions(+), 147 deletions(-)

diff --git a/RELEASE.md b/RELEASE.md
index 31b235ce1..ff03c492a 100644
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -56,6 +56,7 @@
 - L'icona per aprire il menu in mobile è ora visibile anche quando l'header del sito è bianca.
 - La descrizione nelle card per i punti di contatto non mostrano più tutte le iniziali in maiuscolo.
 - Il colore dei link nel menu mobile è ora accessibile per tutti i temi.
+- Migliorata l'accessibilità della sezione dedicata al feedback utente per tutti i contenuti del sito
 - Rimosso il title dall'immagine di apertura dei contenuti
 - Rimosso attributo title dall'immagine delle card: card con immagine, persona, blocco link completo, contenuto in evidenza, gallery a griglia, in evidenza
 - Migliorata l'accessibilità del menu in versione mobile.
diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po
index 66db76294..c2ed42f41 100644
--- a/locales/de/LC_MESSAGES/volto.po
+++ b/locales/de/LC_MESSAGES/volto.po
@@ -2071,6 +2071,11 @@ msgstr ""
 msgid "feedback_sent"
 msgstr ""
 
+#: components/ItaliaTheme/CustomerSatisfaction/FeedbackForm
+# defaultMessage: Valuta da 1 a 5 stelle
+msgid "feedback_stars"
+msgstr ""
+
 #: components/ItaliaTheme/CustomerSatisfaction/FeedbackForm
 # defaultMessage: I ran into technical problems
 msgid "feedback_technical_problems"
diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po
index cb59baad6..34241408e 100644
--- a/locales/en/LC_MESSAGES/volto.po
+++ b/locales/en/LC_MESSAGES/volto.po
@@ -2056,6 +2056,11 @@ msgstr ""
 msgid "feedback_sent"
 msgstr ""
 
+#: components/ItaliaTheme/CustomerSatisfaction/FeedbackForm
+# defaultMessage: Valuta da 1 a 5 stelle
+msgid "feedback_stars"
+msgstr "Rate from 1 to 5 stars"
+
 #: components/ItaliaTheme/CustomerSatisfaction/FeedbackForm
 # defaultMessage: I ran into technical problems
 msgid "feedback_technical_problems"
diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po
index 8d7c6a2b0..342b7f0ff 100644
--- a/locales/es/LC_MESSAGES/volto.po
+++ b/locales/es/LC_MESSAGES/volto.po
@@ -2065,6 +2065,11 @@ msgstr ""
 msgid "feedback_sent"
 msgstr ""
 
+#: components/ItaliaTheme/CustomerSatisfaction/FeedbackForm
+# defaultMessage: Valuta da 1 a 5 stelle
+msgid "feedback_stars"
+msgstr ""
+
 #: components/ItaliaTheme/CustomerSatisfaction/FeedbackForm
 # defaultMessage: I ran into technical problems
 msgid "feedback_technical_problems"
diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po
index a0ea1f11f..61c9a7bf9 100644
--- a/locales/fr/LC_MESSAGES/volto.po
+++ b/locales/fr/LC_MESSAGES/volto.po
@@ -2073,6 +2073,11 @@ msgstr ""
 msgid "feedback_sent"
 msgstr ""
 
+#: components/ItaliaTheme/CustomerSatisfaction/FeedbackForm
+# defaultMessage: Valuta da 1 a 5 stelle
+msgid "feedback_stars"
+msgstr ""
+
 #: components/ItaliaTheme/CustomerSatisfaction/FeedbackForm
 # defaultMessage: I ran into technical problems
 msgid "feedback_technical_problems"
diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po
index b1da0afda..de8c40594 100644
--- a/locales/it/LC_MESSAGES/volto.po
+++ b/locales/it/LC_MESSAGES/volto.po
@@ -2056,6 +2056,11 @@ msgstr "Altro"
 msgid "feedback_sent"
 msgstr "Il tuo feedback è stato inviato!"
 
+#: components/ItaliaTheme/CustomerSatisfaction/FeedbackForm
+# defaultMessage: Valuta da 1 a 5 stelle
+msgid "feedback_stars"
+msgstr ""
+
 #: components/ItaliaTheme/CustomerSatisfaction/FeedbackForm
 # defaultMessage: I ran into technical problems
 msgid "feedback_technical_problems"
diff --git a/locales/volto.pot b/locales/volto.pot
index b9a0fdaa9..a91fa9b7f 100644
--- a/locales/volto.pot
+++ b/locales/volto.pot
@@ -2058,6 +2058,11 @@ msgstr ""
 msgid "feedback_sent"
 msgstr ""
 
+#: components/ItaliaTheme/CustomerSatisfaction/FeedbackForm
+# defaultMessage: Valuta da 1 a 5 stelle
+msgid "feedback_stars"
+msgstr ""
+
 #: components/ItaliaTheme/CustomerSatisfaction/FeedbackForm
 # defaultMessage: I ran into technical problems
 msgid "feedback_technical_problems"
diff --git a/src/components/ItaliaTheme/CustomerSatisfaction/FeedbackForm.jsx b/src/components/ItaliaTheme/CustomerSatisfaction/FeedbackForm.jsx
index cbf73ecd1..6ab1b3741 100644
--- a/src/components/ItaliaTheme/CustomerSatisfaction/FeedbackForm.jsx
+++ b/src/components/ItaliaTheme/CustomerSatisfaction/FeedbackForm.jsx
@@ -1,4 +1,10 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useLayoutEffect,
+  useCallback,
+  useMemo,
+} from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { useIntl, defineMessages } from 'react-intl';
@@ -9,7 +15,6 @@ import {
   Col,
   Spinner,
   Card,
-  Button,
   CardHeader,
   CardBody,
 } from 'design-react-kit';
@@ -25,7 +30,7 @@ import {
 import cx from 'classnames';
 import AnswersStep from './Steps/AnswersStep';
 import CommentsStep from './Steps/CommentsStep';
-import Rating from './Steps/Commons/Rating';
+import RTRating from './Steps/Commons/Rating';
 import { PropTypes } from 'prop-types';
 
 const messages = defineMessages({
@@ -111,6 +116,10 @@ const messages = defineMessages({
     id: 'feedback_other_positive',
     defaultMessage: 'Other',
   },
+  feedback: {
+    id: 'feedback_stars',
+    defaultMessage: 'Valuta da 1 a 5 stelle',
+  },
   error: {
     id: 'feedback_error',
     defaultMessage: 'Error',
@@ -134,12 +143,11 @@ const FeedbackForm = ({ contentType, pathname }) => {
     ? window.env.RAZZLE_HONEYPOT_FIELD
     : process.env.RAZZLE_HONEYPOT_FIELD;
 
-  const numberOfSteps = useMemo(() => getNumberOfSteps(), []);
+  const numberOfSteps = getNumberOfSteps();
 
   const changeSatisfaction = (e) => {
     setSatisfaction(e);
   };
-
   const updateFormData = (field, value) => {
     if (field === 'comment') {
       if (value?.length > 200) setInvalidForm(true);
@@ -154,12 +162,17 @@ const FeedbackForm = ({ contentType, pathname }) => {
       [field]: value,
     });
   };
-
   const getFormFieldValue = (field) => formData?.[field] ?? undefined;
 
-  const nextStep = () => setStep(step + 1);
+  const nextStep = () => {
+    if (!invalidForm) setStep(step + 1);
+  };
 
-  const prevStep = () => setStep(step - 1);
+  const prevStep = () => {
+    if (!invalidForm && step !== 0) {
+      setStep(step - 1);
+    }
+  };
 
   useEffect(() => {
     setValidToken(null);
@@ -171,6 +184,12 @@ const FeedbackForm = ({ contentType, pathname }) => {
   }, [path]);
 
   useEffect(() => {
+    const currentVote = getFormFieldValue('vote');
+    if (
+      (currentVote > threshold && satisfaction < threshold) ||
+      (currentVote < threshold && satisfaction > threshold)
+    )
+      updateFormData('answer', null);
     updateFormData('vote', satisfaction ?? null);
     setStep(0);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -182,6 +201,25 @@ const FeedbackForm = ({ contentType, pathname }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fieldHoney]);
 
+  // Motivazioni del focus programmatico
+  //  - su alcuni browser viene dichiarato "object replacement character" ai rerender di react
+  //    che sono inevitabili mentre il focus rimane sul bottone ma non viene detto
+  //  - replichiamo 1:1 il comportamento del secondo step, quando vai avanti hai autofocus sulla
+  //    textarea per i commenti
+  //  - essendo annunciato ora il titolo dello step, l'utente sr sa comunque benissimo dove si trova,
+  //    anzi, il flow di compilazione del form kb+sr e' molto piu' agevole
+  useEffect(() => {
+    if (step === 0 && getFormFieldValue('answer')) {
+      const selectedAnswer = document.getElementById(
+        `${
+          satisfaction > threshold ? 'positive' : 'negative'
+        }-${getFormFieldValue('answer')}`,
+      );
+      selectedAnswer.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [step]);
+
   const onVerifyCaptcha = useCallback(
     (token) => {
       if (satisfaction !== null && !validToken) {
@@ -198,6 +236,7 @@ const FeedbackForm = ({ contentType, pathname }) => {
   };
 
   const sendFormData = () => {
+    if (invalidForm) return;
     setStep(2);
     const data = {
       ...formData,
@@ -220,7 +259,7 @@ const FeedbackForm = ({ contentType, pathname }) => {
   }
 
   return (
-    <div className="bg-primary customer-satisfaction">
+    <section className="bg-primary customer-satisfaction">
       <Container>
         <Row className="d-flex justify-content-center bg-primary">
           <Col className="col-12 col-lg-6">
@@ -252,15 +291,31 @@ const FeedbackForm = ({ contentType, pathname }) => {
                           : intl.formatMessage(messages.title)}
                       </h2>
                       <div className="rating-container mb-0">
-                        <Rating
+                        <RTRating
                           name="satisfaction"
                           value={satisfaction}
+                          // Qui l'implementazione di design react kit sta su con gli stecchini, rifatta
                           inputs={[
-                            'star1b',
-                            'star2b',
-                            'star3b',
-                            'star4b',
-                            'star5b',
+                            {
+                              name: 'star1b',
+                              value: 1,
+                            },
+                            {
+                              name: 'star2b',
+                              value: 2,
+                            },
+                            {
+                              name: 'star3b',
+                              value: 3,
+                            },
+                            {
+                              name: 'star4b',
+                              value: 4,
+                            },
+                            {
+                              name: 'star5b',
+                              value: 5,
+                            },
                           ]}
                           aria-controls={
                             satisfaction > threshold
@@ -269,7 +324,7 @@ const FeedbackForm = ({ contentType, pathname }) => {
                           }
                           className="volto-feedback-rating mb-0"
                           onChangeRating={changeSatisfaction}
-                          legend=" "
+                          legend={intl.formatMessage(messages.feedback)}
                           wrapperClassName={'rating'}
                         />
                       </div>
@@ -300,47 +355,61 @@ const FeedbackForm = ({ contentType, pathname }) => {
                       />
                       <div
                         className={cx(
-                          'form-step-actions d-flex flex-nowrap w100 justify-content-center button-shadow',
+                          'form-step-actions flex-nowrap w100 justify-content-center button-shadow',
                           {
-                            'pt-4': satisfaction !== null,
+                            'pt-4 d-flex': satisfaction,
+                            'd-none': !satisfaction,
                           },
                         )}
-                        aria-hidden={satisfaction === null}
+                        aria-hidden={!satisfaction}
                       >
-                        <Button
-                          className="prev-action"
-                          disabled={!!(step - 1)}
-                          onClick={prevStep}
+                        {/* Bug bottoni del kit. Disabled e' settato anche se compare la prop aria-disabled,
+                        quando lo scopo sarebbe continuare a poter usufruire dei focus anche in screen reader.
+                        Per i vedenti, la classe dimmed fa il suo lavoro e disabilita i click/input utente */}
+                        <button
                           type="button"
-                          outline
-                          color="primary"
+                          onClick={prevStep}
+                          disabled={false}
+                          className={cx(
+                            'me-4 fw-bold btn btn-outline-primary',
+                            {
+                              disabled: step === 0,
+                            },
+                          )}
+                          aria-disabled={!(!invalidForm && step !== 0)}
                         >
                           {intl.formatMessage(messages.prev)}
-                        </Button>
+                        </button>
+
                         {step !== numberOfSteps - 1 && (
-                          <Button
-                            color="primary"
-                            onClick={nextStep}
-                            className="next-action fw-bold"
-                            disabled={invalidForm}
+                          <button
                             type="button"
+                            onClick={nextStep}
+                            disabled={false}
+                            aria-disabled={invalidForm}
+                            className={cx('fw-bold btn btn-primary', {
+                              disabled: invalidForm,
+                            })}
                           >
                             {intl.formatMessage(messages.next)}
-                          </Button>
+                          </button>
                         )}
                         {step === numberOfSteps - 1 && (
-                          <Button
-                            className="next-action fw-bold"
-                            color="primary"
-                            disabled={invalidForm}
-                            type={'button'}
+                          <button
+                            className={cx('fw-bold btn btn-primary', {
+                              disabled: invalidForm,
+                            })}
+                            type="submit"
+                            disabled={false}
+                            aria-disabled={invalidForm}
                             onClick={sendFormData}
                             onKeyDown={(e) => {
-                              if (e.key === 'Enter') sendFormData();
+                              if (e.key === 'Enter' && !invalidForm)
+                                sendFormData();
                             }}
                           >
                             {intl.formatMessage(messages.next)}
-                          </Button>
+                          </button>
                         )}
                       </div>
                     </>
@@ -385,7 +454,7 @@ const FeedbackForm = ({ contentType, pathname }) => {
           </Col>
         </Row>
       </Container>
-    </div>
+    </section>
   );
 };
 
diff --git a/src/components/ItaliaTheme/CustomerSatisfaction/Steps/AnswersStep.jsx b/src/components/ItaliaTheme/CustomerSatisfaction/Steps/AnswersStep.jsx
index a3c737172..bd37d7b9c 100644
--- a/src/components/ItaliaTheme/CustomerSatisfaction/Steps/AnswersStep.jsx
+++ b/src/components/ItaliaTheme/CustomerSatisfaction/Steps/AnswersStep.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { usePrevious } from '@plone/volto/helpers';
-import { Form, FormGroup, Input, Label } from 'design-react-kit';
+import { Form, FormGroup, Label } from 'design-react-kit';
 import { defineMessages } from 'react-intl';
 import {
   FormHeader,
@@ -76,6 +76,9 @@ const AnswersStep = ({
           step={step + 1}
           totalSteps={totalSteps}
           className={'answers-header'}
+          hidden={
+            userFeedback === null || userFeedback < threshold || step !== 0
+          }
         />
 
         <Form className="answers-form">
@@ -85,14 +88,13 @@ const AnswersStep = ({
               key={'positive-' + s}
               className="border-bottom border-light mb-4"
             >
-              <Input
+              <input
                 name="answer-input-positive"
                 id={'positive-' + s}
                 type="radio"
                 checked={s === selectedAnswer}
                 value={s}
                 onChange={handleAnswerChange}
-                addon
               />
               <Label
                 for={'positive-' + s}
@@ -123,6 +125,9 @@ const AnswersStep = ({
           step={step + 1}
           totalSteps={totalSteps}
           className={'answers-header'}
+          hidden={
+            userFeedback === null || userFeedback > threshold || step !== 0
+          }
         />
 
         <Form className="answers-form">
@@ -132,14 +137,13 @@ const AnswersStep = ({
               key={'negative-' + s}
               className="border-bottom border-light mb-4"
             >
-              <Input
+              <input
                 name="answer-input-negative"
                 id={'negative-' + s}
                 type="radio"
                 checked={s === selectedAnswer}
                 value={s}
                 onChange={handleAnswerChange}
-                addon
               />
               <Label
                 for={'negative-' + s}
diff --git a/src/components/ItaliaTheme/CustomerSatisfaction/Steps/CommentsStep.jsx b/src/components/ItaliaTheme/CustomerSatisfaction/Steps/CommentsStep.jsx
index 2f02ad68c..69ae8d9f0 100644
--- a/src/components/ItaliaTheme/CustomerSatisfaction/Steps/CommentsStep.jsx
+++ b/src/components/ItaliaTheme/CustomerSatisfaction/Steps/CommentsStep.jsx
@@ -47,14 +47,18 @@ const CommentsStep = ({
       className={cx('comments-step', {
         'd-none': step !== 1,
       })}
+      data-step={step}
+      aria-expanded={step === 1}
+      aria-hidden={step !== 1}
     >
       <FormHeader
         title={intl.formatMessage(messages.header_comments)}
         step={step + 1}
         totalSteps={totalSteps}
         className="comments-header"
+        hidden={step !== 1}
       />
-      <div className="comment">
+      <div className="comment w-100">
         <Form>
           <FormGroup key={`step-${step}-comment`}>
             <TextArea
@@ -69,7 +73,7 @@ const CommentsStep = ({
               }
               tabIndex="0"
               // eslint-disable-next-line jsx-a11y/no-autofocus
-              autoFocus={true}
+              autoFocus={step === 1}
               id="comment"
               label={intl.formatMessage(messages.label_comment)}
               aria-invalid={invalid}
diff --git a/src/components/ItaliaTheme/CustomerSatisfaction/Steps/Commons/Rating.jsx b/src/components/ItaliaTheme/CustomerSatisfaction/Steps/Commons/Rating.jsx
index b8de09e01..0bc875150 100644
--- a/src/components/ItaliaTheme/CustomerSatisfaction/Steps/Commons/Rating.jsx
+++ b/src/components/ItaliaTheme/CustomerSatisfaction/Steps/Commons/Rating.jsx
@@ -1,48 +1,10 @@
-import React, { Fragment, FC, ReactNode } from 'react';
+import React, { Fragment } from 'react';
 import classNames from 'classnames';
-import { Input, InputProps, Icon } from 'design-react-kit';
+import { Icon } from 'design-react-kit';
 import { FormGroup, Label } from 'reactstrap';
+import cx from 'classnames';
 
-type UnusedProps =
-  | 'bsSize'
-  | 'size'
-  | 'static'
-  | 'plaintext'
-  | 'normalized'
-  | 'addon'
-  | 'placeholder'
-  | 'label'
-  | 'value'
-  | 'type';
-export interface RatingProps extends Omit<InputProps, UnusedProps> {
-  /** La lista di 5 id, per ciascun elemento intero del Rating. La lista deve essere ordinata dal rating 1 al rating 5.  */
-  inputs: string[];
-  /** Il campo "label" è impostato di default su "Valuta ${n} stelle su 5", ma può essere personalizzato con questa funzione che riceve il numero input come argomento `function (n: number) => string`. */
-  labelTemplate?: (value: 1 | 2 | 3 | 4 | 5) => string;
-  /** Da utilizzare in caso legenda principale del Rating. Passare una componente React da mostrare come legenda (all'interno del tag `<legend>`). È possibile mostrare la leggenda solo ai dispositivi screen reader */
-  legend?: ReactNode | { content: ReactNode; srOnly: boolean };
-  /** Parametro name da dare all'input */
-  name: string;
-  /** Classi aggiuntive da usare per il componente wrapper del Rating */
-  wrapperClassName?: string;
-  /** Classi aggiuntive da usare per ciascun elemento all'interno del componente Rating */
-  className?: string;
-  /** Callback chiamata ad ogni cambio di valore di rating. Il nuovo valore ed il name verranno passati: `function (n, name) => void` */
-  onChangeRating?: (value: 1 | 2 | 3 | 4 | 5 | number, name: string) => void;
-  /** Rende il componente read-only */
-  readOnly?: boolean;
-  /** Il valore corrente del componente: deve essere compreso tra 1 e 5 */
-  value?: 1 | 2 | 3 | 4 | 5 | number;
-  testId?: string;
-}
-
-export const isCustomLegendObject = (
-  legend: ReactNode | { content: ReactNode; srOnly: boolean }
-): legend is { content: ReactNode; srOnly: boolean } => {
-  return legend != null && typeof legend === 'object' && 'content' in legend;
-};
-
-export const Rating: FC<RatingProps> = ({
+const RTRating = ({
   className,
   inputs,
   legend,
@@ -51,76 +13,93 @@ export const Rating: FC<RatingProps> = ({
   value,
   wrapperClassName,
   testId,
-  labelTemplate = (value: 1 | 2 | 3 | 4 | 5) => `Valuta ${value} stelle su 5`,
+  labelTemplate = (value) => `Valuta ${value} stelle su 5`,
   onChangeRating = () => {},
   ...attributes
 }) => {
-  // Input data
-  // On the DOM we have to go from 5 to 1
-  const safeInputs = (inputs || []).reverse();
-
   // Fields
   const labelFn = labelTemplate;
 
-  const onChange = readOnly ? noop : onChangeRating;
+  const onChange = readOnly ? () => null : onChangeRating;
 
   const wrapperClasses = classNames(wrapperClassName, {
     'rating-read-only': readOnly,
-    'rating-label': legend
+    'rating-label': legend,
   });
   const fieldClasses = classNames(className);
   const extraFieldAttrs = readOnly ? { 'aria-hidden': true } : {};
 
-  // Legend
-  const isLegendString = typeof legend === 'string';
+  const legendContent = legend || '';
 
-  let legendClass: string = '';
-  let legendText: ReactNode = legend as string;
+  const handleChange = (e) => {
+    onChange(parseInt(e.target.value), name);
+  };
 
-  if (isCustomLegendObject(legend)) {
-    legendClass = classNames({
-      'visually-hidden': legend.srOnly
-    });
-    legendText = legend.content;
+  function getAllPrevSiblings(element, parent) {
+    const children = [...parent.children];
+    const elIndex = children.findIndex((child) => child === element);
+    return children
+      .slice(0, elIndex)
+      .filter((c) => c.nodeName.toUpperCase() === 'LABEL');
   }
-
-  const legendContent =
-    isCustomLegendObject(legend) || isLegendString ? (
-      <legend className={legendClass}>{legendText}</legend>
-    ) : (
-      legend
-    );
-
   return (
     <FormGroup
+      {...attributes}
       cssModule={{ 'form-group': 'rating' }}
-      tag='fieldset'
+      tag="fieldset"
       className={wrapperClasses}
       data-testid={testId}
-      {...attributes}
     >
-      {legend && legendContent}
-      {safeInputs.map((id, i) => {
-        const currentValue = (5 - i) as 1 | 2 | 3 | 4 | 5;
-
+      <legend className="visually-hidden">{legendContent}</legend>
+      {inputs.map((input, i) => {
         return (
-          <Fragment key={id}>
-            <Input
-              type='radio'
-              id={id}
+          <Fragment key={input.name}>
+            <input
+              {...extraFieldAttrs}
+              type="radio"
+              id={input.name}
               name={name}
-              value={String(currentValue)}
-              cssModule={{ 'form-control': '' }}
-              className={fieldClasses}
-              onChange={() => onChange(currentValue, name)}
-              checked={value === currentValue}
+              value={input.value}
+              className={cx(extraFieldAttrs.className, fieldClasses)}
+              onChange={handleChange}
+              checked={value === input.value}
               disabled={readOnly}
-              data-element={'feedback-rate-' + currentValue}
-              {...extraFieldAttrs}
+              data-element={'feedback-rate-' + input.value}
+              aria-label={labelFn(input.value)}
             />
-            <Label className='full' for={id}>
-              <Icon icon='it-star-full' size='sm' />
-              <span className='visually-hidden'>{labelFn(currentValue)}</span>
+            <Label
+              for={input.name}
+              // aria-label={labelFn(input.value)}
+              onMouseEnter={(e) => {
+                const parentNode = e.currentTarget.parentElement;
+                const toBeHovered = getAllPrevSiblings(
+                  e.currentTarget,
+                  parentNode,
+                );
+                [...toBeHovered, e.currentTarget].forEach((tbh) => {
+                  tbh.children[0].classList.add('starFilled');
+                });
+              }}
+              onMouseLeave={(e) => {
+                const allHoveredStars = Array.from(
+                  document.getElementsByClassName('starFilled'),
+                );
+                allHoveredStars?.forEach((ahs) => {
+                  const associatedInput = document.getElementById(
+                    ahs.parentElement.htmlFor,
+                  );
+                  if (value < associatedInput.value)
+                    ahs.classList.remove('starFilled');
+                });
+              }}
+            >
+              <Icon
+                icon="it-star-full"
+                size="sm"
+                className={cx('rating-star', {
+                  starFilled: value >= input.value,
+                })}
+              />
             </Label>
           </Fragment>
         );
@@ -129,4 +108,4 @@ export const Rating: FC<RatingProps> = ({
   );
 };
 
-export default Rating;
+export default RTRating;
diff --git a/src/customizations/volto-feedback/components/FeedbackForm/Steps/Commons.jsx b/src/customizations/volto-feedback/components/FeedbackForm/Steps/Commons.jsx
index d46e9b69e..dce779518 100644
--- a/src/customizations/volto-feedback/components/FeedbackForm/Steps/Commons.jsx
+++ b/src/customizations/volto-feedback/components/FeedbackForm/Steps/Commons.jsx
@@ -1,13 +1,17 @@
 import React from 'react';
+import cx from 'classnames';
 
-export const FormHeader = ({ title, step, totalSteps, className }) => {
+export const FormHeader = ({ title, step, totalSteps, className, hidden }) => {
   return (
-    <div className={className}>
-      <legend data-element="feedback-rating-question">
-        <h6>{title}</h6>
-      </legend>
-
+    <legend
+      data-element="feedback-rating-question"
+      aria-hidden={hidden}
+      className={cx(className, 'w-100', {
+        'd-none': hidden,
+      })}
+    >
+      <div className={'m-0 fs-6'}>{title}</div>
       <div>{`${step}/${totalSteps}`}</div>
-    </div>
+    </legend>
   );
 };
diff --git a/src/theme/ItaliaTheme/Components/_customerSatisfaction.scss b/src/theme/ItaliaTheme/Components/_customerSatisfaction.scss
index 8f6957c6d..76ece51c1 100644
--- a/src/theme/ItaliaTheme/Components/_customerSatisfaction.scss
+++ b/src/theme/ItaliaTheme/Components/_customerSatisfaction.scss
@@ -19,6 +19,10 @@
     padding: 2rem 0;
     margin: 0;
 
+    .card {
+      display: block;
+    }
+
     .title-medium-2-semi-bold {
       font-size: 1.25rem;
       font-weight: 600;
@@ -34,12 +38,47 @@
     .rating-container {
       padding-bottom: 0;
 
-      input.volto-feedback-rating:focus + label {
-        border: 0;
-        box-shadow:
-          0 0 0.2rem $focus-outline-color,
-          0 0 0 0.2rem $focus-outline-color !important;
-        outline: none;
+      .ratingOptionContainer {
+        position: relative;
+      }
+
+      .rating.rating-label {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+
+        label {
+          position: relative;
+          width: 26px;
+          max-width: 26px;
+          height: 26px;
+          max-height: 26px;
+        }
+
+        input.volto-feedback-rating {
+          position: relative;
+          left: 26px;
+          width: 26px;
+          margin-left: -24px;
+          opacity: 0;
+        }
+
+        input.volto-feedback-rating ~ label svg.rating-star {
+          fill: #c3cfdb;
+          pointer-events: none;
+        }
+
+        input.volto-feedback-rating ~ label svg.rating-star.starFilled {
+          fill: $primary;
+        }
+
+        input.volto-feedback-rating:focus + label {
+          border: 0;
+          box-shadow:
+            0 0 0.2rem $focus-outline-color,
+            0 0 0 0.2rem $focus-outline-color !important;
+          outline: none;
+        }
       }
     }