From 05d8cfe10c08f4cd1a5360fc7c5b1f49005b27b0 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.ai>
Date: Mon, 28 Feb 2022 22:09:18 +0100
Subject: [PATCH] feat: fix keyboard focus between screens

---
 website/src/components/UserFeedback/index.jsx | 38 +++++++++++--------
 .../components/UserFeedback/styles.module.css |  9 +++--
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/website/src/components/UserFeedback/index.jsx b/website/src/components/UserFeedback/index.jsx
index b2f60cc992..fe8bdcc5e0 100644
--- a/website/src/components/UserFeedback/index.jsx
+++ b/website/src/components/UserFeedback/index.jsx
@@ -67,6 +67,7 @@ const stateReducer = (state, message) => {
 
 export const FeedbackWrapper = ({ seedData, open }) => {
     const [feedbackIsOpen, setFeedbackIsOpen] = React.useState(open);
+    const [manuallyOpened, setManuallyOpened] = React.useState(false);
 
     const [state, dispatch] = React.useReducer(
         stateReducer,
@@ -92,8 +93,6 @@ export const FeedbackWrapper = ({ seedData, open }) => {
         console.log('send feedback here ');
     };
 
-    const step1ref = React.useRef(null);
-
     const visuallyHidden = (stepNumber) => state.currentStep !== stepNumber;
     const isHidden = (stepNumber) =>
         !feedbackIsOpen || visuallyHidden(stepNumber);
@@ -131,10 +130,9 @@ export const FeedbackWrapper = ({ seedData, open }) => {
                             Very unsatisfied
                         </span>
                         <span className={styles['satisfaction-input-inputs']}>
-                            {[1, 2, 3, 4, 5].map((n) => (
+                            {[1, 2, 3, 4, 5].map((n, i) => (
                                 <span key={`input-group-${n}`}>
                                     <input
-                                        ref={n === 1 ? step1ref : undefined}
                                         className={join(
                                             'visually-hidden',
                                             styles[
@@ -154,6 +152,13 @@ export const FeedbackWrapper = ({ seedData, open }) => {
                                             console.log('the value is', value);
                                             setNewValue(value);
                                         }}
+                                        autoFocus={
+                                            manuallyOpened
+                                                ? state.data.score
+                                                    ? state.data.score === n
+                                                    : i === 0
+                                                : false
+                                        }
                                     />
                                     <label
                                         className={
@@ -206,12 +211,7 @@ export const FeedbackWrapper = ({ seedData, open }) => {
                         What would you like to see improved in the Unleash
                         documentation?
                     </label>
-                    <textarea
-                        id={textareaId}
-                        /* cols="30" */
-                        name=""
-                        rows="3"
-                    >
+                    <textarea id={textareaId} name="" rows="3" autoFocus>
                         {state.data.comment}
                     </textarea>
 
@@ -259,16 +259,21 @@ export const FeedbackWrapper = ({ seedData, open }) => {
             >
                 <fieldset disabled={hidden}>
                     <span>
-                        Finally, would you mind telling us a little about
-                        yourself? What kind of customer are you?
+                        Finally, are you a paying customer or an open source
+                        customer of Unleash?
                     </span>
                     <div className={styles['customer-type-inputs']}>
                         {[
                             ['a', 'paying', 'paying'],
                             ['an', 'open source', 'opensource'],
-                        ].map(([article, customerType, key]) => (
+                        ].map(([article, customerType, key], i) => (
                             <span key={`input-group-${key}`}>
                                 <input
+                                    autoFocus={
+                                        state.data.customerType
+                                            ? state.data.customerType === key
+                                            : i === 0
+                                    }
                                     id={`customer-type-${key}`}
                                     className={styles['customer-type-input']}
                                     name="customer-type"
@@ -326,7 +331,10 @@ export const FeedbackWrapper = ({ seedData, open }) => {
 
     return (
         <div className={styles['user-feedback-container']}>
-            <p>feedback is {feedbackIsOpen ? 'open' : 'closed'}</p>
+            <p>
+                feedback is {feedbackIsOpen ? 'open' : 'closed'}, manually?{' '}
+                {manuallyOpened}
+            </p>
 
             <button
                 aria-hidden={feedbackIsOpen}
@@ -337,7 +345,7 @@ export const FeedbackWrapper = ({ seedData, open }) => {
                 disabled={feedbackIsOpen}
                 onClick={() => {
                     setFeedbackIsOpen(true);
-                    step1ref.current.focus();
+                    setManuallyOpened(true);
                 }}
             >
                 <span>Feedback</span>
diff --git a/website/src/components/UserFeedback/styles.module.css b/website/src/components/UserFeedback/styles.module.css
index b3cef1410e..4316306acc 100644
--- a/website/src/components/UserFeedback/styles.module.css
+++ b/website/src/components/UserFeedback/styles.module.css
@@ -31,9 +31,10 @@
 .user-feedback fieldset {
     border: none;
     padding: 0;
+    width: 100%;
 }
 
-.user-feedback > * + * {
+:is(.user-feedback, .user-feedback fieldset) > * + * {
     margin-top: var(--row-gap);
 }
 
@@ -44,11 +45,11 @@
 }
 
 .user-feedback form {
-    max-width: 850px;
+    /* max-width: 850px; */
+    width: 100%;
     margin-left: auto;
     margin-right: auto;
     transition: var(--fade-in-transition);
-    /* opacity: 1; */
 }
 
 .user-feedback form > * + * {
@@ -229,6 +230,8 @@ button.close-button {
 .form-section-container {
     display: grid;
     align-items: center;
+    max-width: 850px;
+    margin: auto;
 }
 
 .form-section-container > * {