Skip-link targets and functionality

src/components/NewDraftWizard/WizardComponents/WizardDraftObjectPicker.js

@@ -1,5 +1,5 @@
 //@flow
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
 
 import Button from "@material-ui/core/Button"
 import ButtonGroup from "@material-ui/core/ButtonGroup"
@@ -15,6 +15,7 @@ import { useSelector, useDispatch } from "react-redux"
 
 import WizardStatusMessageHandler from "../WizardForms/WizardStatusMessageHandler"
 
+import { resetFocus } from "features/focusSlice"
 import { setDraftObject } from "features/wizardDraftObjectSlice"
 import { deleteObjectFromFolder } from "features/wizardSubmissionFolderSlice"
 import { setSubmissionType } from "features/wizardSubmissionTypeSlice"
@@ -64,7 +65,16 @@ const WizardDraftObjectPicker = () => {
   const [responseError, setResponseError] = useState({})
   const [errorPrefix, setErrorPrefix] = useState("")
 
+  const shouldFocus = useSelector(state => state.focus)
+
+  useEffect(() => {
+    if (shouldFocus && draftRefs[0]) draftRefs[0].focus()
+  }, [shouldFocus])
+
+  const draftRefs = []
+
   const handleObjectContinue = async objectId => {
+    if (shouldFocus) dispatch(resetFocus())
     setConnError(false)
     const response = await draftAPIService.getObjectByAccessionId(objectType, objectId)
     if (response.ok) {
@@ -86,6 +96,10 @@ const WizardDraftObjectPicker = () => {
     })
   }
 
+  const setRef = ref => {
+    draftRefs.push(ref)
+  }
+
   return (
     <Container className={classes.container}>
       <CardHeader
@@ -105,6 +119,8 @@ const WizardDraftObjectPicker = () => {
                       className={classes.buttonContinue}
                       aria-label="Continue draft"
                       onClick={() => handleObjectContinue(submission.accessionId)}
+                      onBlur={() => dispatch(resetFocus())}
+                      ref={setRef}
                     >
                       Continue
                     </Button>

src/components/NewDraftWizard/WizardComponents/WizardObjectIndex.js

@@ -115,10 +115,12 @@ const SubmissionTypeList = ({
   handleSubmissionTypeChange,
   isCurrentObjectType,
   currentSubmissionType,
+  draftCount,
 }: {
   handleSubmissionTypeChange: string => void,
   isCurrentObjectType: boolean,
   currentSubmissionType: string,
+  draftCount: number,
 }) => {
   const submissionTypes = ["form", "xml", "existing"]
   const submissionTypeMap = {
@@ -130,9 +132,13 @@ const SubmissionTypeList = ({
   const [showSkipLink, setSkipLinkVisible] = useState(false)
   const dispatch = useDispatch()
 
-  const handleSkipLink = event => {
+  const handleSkipLink = (event, submissionType) => {
     if (event.key === "Enter") {
-      setSkipLinkVisible(true)
+      if (submissionType === "existing" && draftCount === 0) {
+        setSkipLinkVisible(false)
+      } else {
+        setSkipLinkVisible(true)
+      }
     }
   }
 
@@ -184,7 +190,7 @@ const SubmissionTypeList = ({
           key={submissionType}
           button
           onClick={event => {
-            handleSkipLink(event)
+            handleSkipLink(event, submissionType)
             handleSubmissionTypeChange(submissionType)
           }}
           className={classes.submissionTypeListItem}
@@ -228,7 +234,7 @@ const WizardObjectIndex = () => {
     setExpandedObjectType(newExpanded ? panel : false)
   }
 
-  const getBadgeContent = (objectType: string) => {
+  const getDraftCount = (objectType: string) => {
     return draftObjects[objectType] ? draftObjects[objectType] : 0
   }
 
@@ -278,7 +284,7 @@ const WizardObjectIndex = () => {
             >
               <NoteAddIcon /> <Typography variant="subtitle1">{typeCapitalized}</Typography>
               <Badge
-                badgeContent={getBadgeContent("draft-" + objectType)}
+                badgeContent={getDraftCount("draft-" + objectType)}
                 className={classes.badge}
                 data-testid="badge"
               />
@@ -288,6 +294,7 @@ const WizardObjectIndex = () => {
                 handleSubmissionTypeChange={handleSubmissionTypeChange}
                 isCurrentObjectType={isCurrentObjectType}
                 currentSubmissionType={currentSubmissionType}
+                draftCount={getDraftCount("draft-" + objectType)}
               />
             </AccordionDetails>
           </Accordion>

src/components/NewDraftWizard/WizardForms/WizardFillObjectDetailsForm.js

@@ -18,6 +18,7 @@ import JSONSchemaParser from "./WizardJSONSchemaParser"
 import WizardStatusMessageHandler from "./WizardStatusMessageHandler"
 
 import { setDraftStatus, resetDraftStatus } from "features/draftStatusSlice"
+import { resetFocus } from "features/focusSlice"
 import { setDraftObject, resetDraftObject } from "features/wizardDraftObjectSlice"
 import { updateStatus } from "features/wizardStatusMessageSlice"
 import { addObjectToFolder, addObjectToDrafts, deleteObjectFromFolder } from "features/wizardSubmissionFolderSlice"
@@ -112,9 +113,30 @@ const CustomCardHeader = (props: CustomCardHeaderProps) => {
   const classes = useStyles()
   const { objectType, title, refForm, onClickNewForm, onClickClearForm, onClickSaveDraft, onClickSubmit } = props
 
+  const dispatch = useDispatch()
+
+  const focusTarget = useRef(null)
+  const shouldFocus = useSelector(state => state.focus)
+
+  useEffect(() => {
+    if (shouldFocus && focusTarget.current) focusTarget.current.focus()
+  }, [shouldFocus])
+
+  const handleClick = () => {
+    onClickNewForm()
+    dispatch(resetFocus())
+  }
+
   const buttonGroup = (
     <div className={classes.buttonGroup}>
-      <Button variant="contained" aria-label="create new form" size="small" onClick={onClickNewForm}>
+      <Button
+        ref={focusTarget}
+        variant="contained"
+        aria-label="create new form"
+        size="small"
+        onClick={() => handleClick()}
+        onBlur={() => dispatch(resetFocus())}
+      >
         <AddCircleOutlinedIcon fontSize="small" className={classes.addIcon} />
         New form
       </Button>

src/components/NewDraftWizard/WizardForms/WizardUploadObjectXMLForm.js

@@ -1,5 +1,5 @@
 //@flow
-import React, { useState } from "react"
+import React, { useState, useRef, useEffect } from "react"
 
 import Button from "@material-ui/core/Button"
 import CardHeader from "@material-ui/core/CardHeader"
@@ -14,6 +14,7 @@ import { useDispatch, useSelector } from "react-redux"
 
 import WizardStatusMessageHandler from "./WizardStatusMessageHandler"
 
+import { resetFocus } from "features/focusSlice"
 import { addObjectToFolder } from "features/wizardSubmissionFolderSlice"
 import objectAPIService from "services/objectAPI"
 import submissionAPIService from "services/submissionAPI"
@@ -69,6 +70,13 @@ const WizardUploadObjectXMLForm = () => {
 
   const watchFile = watch("fileUpload")
 
+  const focusTarget = useRef(null)
+  const shouldFocus = useSelector(state => state.focus)
+
+  useEffect(() => {
+    if (shouldFocus && focusTarget.current) focusTarget.current.focus()
+  }, [shouldFocus])
+
   const onSubmit = async data => {
     setSuccessStatus(undefined)
     setSubmitting(true)
@@ -99,6 +107,7 @@ const WizardUploadObjectXMLForm = () => {
     if (fileSelect && fileSelect.click()) {
       fileSelect.click()
     }
+    dispatch(resetFocus())
   }
 
   const submitButton = (
@@ -131,7 +140,14 @@ const WizardUploadObjectXMLForm = () => {
               placeholder={watchFile && watchFile[0] ? watchFile[0].name : "Name"}
               inputProps={{ readOnly: true, tabIndex: -1 }}
             />
-            <Button variant="contained" color="primary" component="label" onClick={() => handleButton()}>
+            <Button
+              ref={focusTarget}
+              variant="contained"
+              color="primary"
+              component="label"
+              onClick={() => handleButton()}
+              onBlur={() => dispatch(resetFocus())}
+            >
               Choose file
             </Button>
             <input