#1074 keyboard users loose focus

products/statement-generator/src/components/Checkbox.tsx

@@ -44,29 +44,29 @@ interface IInnerCheckboxProps extends CheckboxProps {
   useTeal?: boolean;
 }
 
-const InnerCheckbox = ({
-  checked,
-  onChange,
-  id,
-  useTeal,
-}: IInnerCheckboxProps) => {
-  const classes = useStyles({ theme: useTeal ? 'teal' : 'black' });
-  return (
-    <Checkbox classes={classes} checked={checked} onChange={onChange} id={id} />
-  );
-};
+const InnerCheckbox = React.forwardRef<HTMLInputElement, IInnerCheckboxProps>(
+  ({ checked, onChange, id, useTeal }, ref) => {
+    const classes = useStyles({ theme: useTeal ? 'teal' : 'black' });
+    return (
+      <Checkbox
+        classes={classes}
+        checked={checked}
+        onChange={onChange}
+        id={id}
+        inputRef={ref}
+      />
+    );
+  }
+);
 
 interface IWrapperCheckboxProps extends IInnerCheckboxProps {
   label: string;
 }
 
-const CheckboxLabels: React.FC<IWrapperCheckboxProps> = ({
-  label,
-  checked,
-  onChange,
-  id,
-  useTeal = false,
-}) => {
+const CheckboxLabels = React.forwardRef<
+  HTMLInputElement,
+  IWrapperCheckboxProps
+>(({ label, checked, onChange, id, useTeal = false }, ref) => {
   return (
     <FormControlLabel
       control={
@@ -75,11 +75,12 @@ const CheckboxLabels: React.FC<IWrapperCheckboxProps> = ({
           id={id}
           checked={checked}
           onChange={onChange}
+          ref={ref}
         />
       }
       label={label}
     />
   );
-};
+});
 
 export default CheckboxLabels;

products/statement-generator/src/components/TextPreview.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 
 import { makeStyles, createStyles } from '@material-ui/core';
 import CreateIcon from '@material-ui/icons/Create';
@@ -43,47 +43,57 @@ interface ComponentProps {
   style?: object;
 }
 
-const TextPreview = ({
-  onSaveClick,
-  content,
-  nameOfStep,
-  className = '',
-  style,
-}: ComponentProps) => {
-  const classes = useStyles();
-  const utilityClasses = useUtilityStyles();
-  const [isEditing, setIsEditing] = useState<boolean>(false);
+const TextPreview = forwardRef<HTMLDivElement, ComponentProps>(
+  ({ onSaveClick, content, nameOfStep, className = '', style }, ref) => {
+    const classes = useStyles();
+    const utilityClasses = useUtilityStyles();
+    const [isEditing, setIsEditing] = useState<boolean>(false);
 
-  const handleClick = () => {
-    setIsEditing(true);
-  };
+    const handleClick = () => {
+      setIsEditing(true);
+    };
 
-  return (
-    <div className={`${classes.root} ${className}`} style={style}>
-      <div className={classes.previewHeader}>
-        <h3>{nameOfStep}</h3>
+    return (
+      <div
+        ref={ref}
+        className={`${classes.root} ${className}`}
+        style={style}
+        tabIndex={-1}
+      >
+        <div className={classes.previewHeader}>
+          <h3>{nameOfStep}</h3>
 
-        <div className={classes.actionHeader}>
-          {!isEditing && (
-            <CreateIcon
-              className={utilityClasses.iconButton}
-              onClick={handleClick}
-            />
-          )}
+          <div className={classes.actionHeader}>
+            {!isEditing && (
+              <CreateIcon
+                className={`${utilityClasses.iconButton} create-icon-focusable`}
+                onClick={handleClick}
+                tabIndex={0}
+                role="button"
+                aria-label="Edit content"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    handleClick();
+                    e.preventDefault();
+                  }
+                }}
+              />
+            )}
+          </div>
         </div>
-      </div>
 
-      {isEditing ? (
-        <EditContent
-          content={content}
-          setIsEditing={setIsEditing}
-          onSaveClick={onSaveClick}
-        />
-      ) : (
-        <p>{content}</p>
-      )}
-    </div>
-  );
-};
+        {isEditing ? (
+          <EditContent
+            content={content}
+            setIsEditing={setIsEditing}
+            onSaveClick={onSaveClick}
+          />
+        ) : (
+          <p>{content}</p>
+        )}
+      </div>
+    );
+  }
+);
 
 export default TextPreview;

products/statement-generator/src/components/Textarea.tsx

@@ -78,45 +78,51 @@ interface TextFieldProps {
   rows?: number;
 }
 
-const MultilineTextFields: React.FC<TextFieldProps> = ({
-  handleChange,
-  id,
-  label,
-  placeholder,
-  defaultValue,
-  disabled = false,
-  value,
-  rows,
-}) => {
-  const utilityClasses = useUtilityStyles();
-  const classes = useStyles();
+const MultilineTextFields = React.forwardRef<HTMLDivElement, TextFieldProps>(
+  (
+    {
+      handleChange,
+      id,
+      label,
+      placeholder,
+      defaultValue,
+      disabled = false,
+      value,
+      rows,
+    },
+    ref
+  ) => {
+    const utilityClasses = useUtilityStyles();
+    const classes = useStyles();
 
-  return (
-    <div className={utilityClasses.formInput}>
-      {label && (
-        <InputLabel htmlFor={id} disabled={disabled}>
-          {label}
-        </InputLabel>
-      )}
+    return (
+      <div className={utilityClasses.formInput}>
+        {label && (
+          <InputLabel htmlFor={id} disabled={disabled}>
+            {label}
+          </InputLabel>
+        )}
 
-      <TextField
-        id={id}
-        className={classes.textfieldComponent}
-        onChange={handleChange}
-        placeholder={placeholder}
-        defaultValue={defaultValue}
-        disabled={disabled}
-        value={value}
-        rows={rows}
-        multiline
-        fullWidth
-        variant="outlined"
-        InputProps={{
-          notched: false,
-        }}
-      />
-    </div>
-  );
-};
+        <TextField
+          id={id}
+          className={classes.textfieldComponent}
+          onChange={handleChange}
+          placeholder={placeholder}
+          defaultValue={defaultValue}
+          disabled={disabled}
+          value={value}
+          rows={rows}
+          multiline
+          fullWidth
+          variant="outlined"
+          InputProps={{
+            notched: false,
+          }}
+          inputRef={ref}
+        />
+      </div>
+    );
+  }
+);
 
 export default MultilineTextFields;

products/statement-generator/src/pages-form/FinalizeForm.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles, createStyles } from '@material-ui/core';
 import VisibilityIcon from '@material-ui/icons/Visibility';
@@ -20,6 +20,8 @@ import {
   PREVIEW_KEYS,
 } from 'helpers/previewHelper';
 
+import { AffirmationContext } from 'contexts/AffirmationContext';
+
 const useStyles = makeStyles(({ palette, spacing }) =>
   createStyles({
     previewItem: {
@@ -46,6 +48,22 @@ function FinalizeForm() {
   const classes = useStyles();
   const { formState, updateStepToForm } = useContext(FormStateContext);
 
+  const { affirmationData } = useContext(AffirmationContext);
+
+  const previewsContainerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!affirmationData.isActive) {
+      const firstFocusableElement = previewsContainerRef.current?.querySelector(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="0"])'
+      );
+
+      if (firstFocusableElement instanceof HTMLElement) {
+        firstFocusableElement.focus();
+      }
+    }
+  }, [affirmationData.isActive]);
+
   function updatePreviewItem(newStatement: string, stateKey: string) {
     updateStepToForm({
       statements: {
@@ -88,7 +106,7 @@ function FinalizeForm() {
         Editing final letter
       </div>
 
-      {previewComponents}
+      <div ref={previewsContainerRef}>{previewComponents}</div>
 
       <TextPreview
         className={classes.previewItem}

products/statement-generator/src/pages-form/GoalsStep.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import FormStateContext from 'contexts/FormStateContext';
@@ -8,11 +8,23 @@ import FlowNavigation from 'components-layout/FlowNavigation';
 import ContentContainer from 'components-layout/ContentContainer';
 import Textarea from 'components/Textarea';
 
+import { AffirmationContext } from 'contexts/AffirmationContext';
+
 function GoalsStep() {
   const { t } = useTranslation();
   const { formState, updateStepToForm } = useContext(FormStateContext);
   const { goals, goalsHow } = formState.goalsState;
 
+  const { affirmationData } = useContext(AffirmationContext);
+
+  const goalsRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!affirmationData.isActive) {
+      goalsRef.current?.focus();
+    }
+  }, [affirmationData.isActive]);
+
   const goalsValid = goals !== '';
   const goalsHowValid = goalsHow !== '';
   const isNextDisabled = !goalsValid || !goalsHowValid;
@@ -28,6 +40,7 @@ function GoalsStep() {
   return (
     <ContentContainer>
       <Textarea
+        ref={goalsRef}
         id="goals"
         label={t('goals_form.goals_input_label')}
         placeholder={t('goals_form.goals_input_placeholder')}

products/statement-generator/src/pages-form/InvolvementInitialFlow.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
 import FormLabel from '@material-ui/core/FormLabel';
 import FormControl from '@material-ui/core/FormControl';
@@ -7,6 +7,8 @@ import { useTranslation } from 'react-i18next';
 
 import FormStateContext from 'contexts/FormStateContext';
 
+import { AffirmationContext } from 'contexts/AffirmationContext';
+
 import Checkbox from 'components/Checkbox';
 
 import ContentContainer from 'components-layout/ContentContainer';
@@ -33,6 +35,14 @@ const useStyles = makeStyles<Theme>(({ palette, spacing }) =>
 function InvolvementInitialFlow() {
   const { t } = useTranslation();
   const classes = useStyles();
+  const { affirmationData } = useContext(AffirmationContext);
+  const firstCheckboxRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!affirmationData.isActive) {
+      firstCheckboxRef.current?.focus();
+    }
+  }, [affirmationData.isActive]);
 
   const { formState, updateStepToForm } = useContext(FormStateContext);
   const {
@@ -73,6 +83,7 @@ function InvolvementInitialFlow() {
           </FormLabel>
           <FormGroup id="involvement-checkboxes">
             <Checkbox
+              ref={firstCheckboxRef}
               useTeal
               id="isJobChecked"
               checked={isJobChecked}