pull in focus changes from gabi PR #25

Author: annieshinn

src/assets/stylesheets/reset.scss

@@ -89,7 +89,7 @@ video {
 
 /* make sure to set some focus styles for accessibility */
 :focus {
-  outline: 0;
+  outline: 2px solid darkblue;
 }
 
 /* HTML5 display-role reset for older browsers */

src/components/AccTestComponent/DescribeRenderer/DescribeRenderer.tsx

@@ -16,8 +16,7 @@ const DescribeRenderer = ({
   updateDescribeStandardTag,
   updateItCatTag,
   type,
-}): AccTestCaseState => {
-
+}) => {
   const deleteDescribeBlockHandleClick = (e: ChangeEvent) => {
     e.stopPropagation();
     const describeId = e.target.id;
@@ -29,7 +28,14 @@ const DescribeRenderer = ({
     dispatcher(addItStatement(describeId));
   };
 
-  return describeBlocks.allIds.map((id: string, i: number) => (
+  const deleteDescribeBlockOnKeyUp = (e) => {
+    if (e.charCode === 13) {
+    const describeId = e.target.id;
+    dispatcher(deleteDescribeBlock(describeId));
+    }
+}
+
+  return describeBlocks.allIds.map((id: string , i: number) => (
     <Draggable
       key={id}
       draggableId={id}
@@ -56,6 +62,8 @@ const DescribeRenderer = ({
             />
 
             <i
+              tabIndex={0}
+              onKeyPress={deleteDescribeBlockOnKeyUp}
               onClick={deleteDescribeBlockHandleClick}
               id={id}
               className={cn('far fa-window-close', styles.describeClose)}

src/components/AccTestComponent/ItRenderer/ItRenderer.tsx

@@ -24,7 +24,14 @@ const ItRenderer = ({
     dispatchToAccTestCase(deleteItStatement(describeId, itId));
   };
 
-  return itStatements.allIds[describeId].map((id: string, i:number) => (
+  const deleteItStatementOnKeyUp = (e) => {
+    if (e.charCode === 13) {
+      const itId = e.target.id;
+      dispatchToAccTestCase(deleteItStatement(describeId, itId));
+    }
+  }
+
+  return itStatements.allIds[describeId].map((id: string, i: number) => (
     <Draggable
       draggableId={id}
       index={i}
@@ -47,6 +54,8 @@ const ItRenderer = ({
           />
 
           <i
+            tabIndex={0}
+            onKeyPress={deleteItStatementOnKeyUp}
             onClick={deleteItStatementHandleClick}
             id={id}
             className={cn(styles.itClose, 'far fa-window-close')}

src/components/EndpointTestComponent/Endpoint.tsx

@@ -70,13 +70,7 @@ const Endpoint = ({ endpoint, index, dispatchToEndpointTestCase }: EndpointProps
     dispatchToEndpointTestCase(addAssertion(index));
   };
 
-  const testDescription = useRef<HTMLInputElement>(null);
 
-  useEffect(() => {
-    if (testDescription && testDescription.current) {
-      testDescription.current.focus();
-    }
-  }, []);
 
   return (
     <div style={{ maxWidth: '650px' }}>
@@ -109,7 +103,7 @@ const Endpoint = ({ endpoint, index, dispatchToEndpointTestCase }: EndpointProps
                 >
                   <div id={styles.labelInputTest}>
                     <input
-                      ref={testDescription}
+                      
                       type='text'
                       id={styles.testStatement}
                       value={endpoint.testName}

src/components/Modals/ExportFileModal.module.scss

@@ -89,6 +89,10 @@
     -webkit-appearance: none;
     -moz-appearance: none;
   }
+  button:focus {
+    outline: 2px solid darkblue
+  }
+
 }
 
 #text {
@@ -101,11 +105,17 @@
   color: $mint;
   border-radius: 3px;
 }
+#save:focus{
+  outline: 1px solid darkblue;
+}
 
 #newTestButtons {
   display: flex;
   justify-content: center;
 }
+#newTestButtons:focus {
+  outline: 1px solid darkblue
+}
 
 #testMenu {
   padding: 10px;

src/components/NavBar/NavBar.module.scss

@@ -21,7 +21,9 @@
   margin-bottom: 40px;
   cursor: pointer;
   background-color: transparent;
-  outline: none;
+  :focus {
+    outline: 2px solid darkblue
+  } 
 }
 
 .icons {

src/components/OpenFolder/OpenFolderButton.module.scss

@@ -7,7 +7,9 @@
   margin-bottom: 40px;
   cursor: pointer;
   background-color: transparent;
-  outline: none;
+  :focus {
+    outline: 2px solid darkblue;
+  }     
 }
 
 .icons {
@@ -23,11 +25,17 @@
   width: 250px;
   height: 1.5rem;
   color: $dark-gray;
-  outline: none;
   box-shadow: none;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
+  :focus {
+    outline: 2px solid darkblue;
+  } 
+}
+
+#openBtn:focus{
+  outline: 2px solid darkblue
 }
 
 .tooltip {

src/components/ReactTestComponent/DescribeRenderer/DescribeRenderer.jsx

@@ -16,18 +16,20 @@ const DescribeRenderer = ({
   handleChangeItStatementText,
   type,
 }) => {
-  const testDescription = useRef(null);
 
-  useEffect(() => {
-    testDescription.current.focus();
-  }, []);
 
   const deleteDescribeBlockHandleClick = (e) => {
     e.stopPropagation();
     const describeId = e.target.id;
     dispatcher(deleteDescribeBlock(describeId));
   };
 
+  const deleteReactDescribeBlockOnKeyUp = (e) => {
+    if (e.charCode === 13) {
+      const describeId = e.target.id;
+      dispatcher(deleteDescribeBlock(describeId));
+    }
+}
   const addItStatementHandleClick = (e) => {
     const describeId = e.target.id;
     dispatcher(addItstatement(describeId));
@@ -52,12 +54,14 @@ const DescribeRenderer = ({
             </label>
 
             <i
+              tabIndex={0}
+              onKeyPress={deleteReactDescribeBlockOnKeyUp}
               onClick={deleteDescribeBlockHandleClick}
               id={id}
               className={cn('far fa-window-close', styles.describeClose)}
             ></i>
+
             <input
-              ref={testDescription}
               id={id}
               className={styles.describeInput}
               name='describe-label'

src/components/ReactTestComponent/ItRenderer/ItRenderer.jsx

@@ -30,6 +30,13 @@ const ItRenderer = ({
     const itId = e.target.id;
     dispatchToReactTestCase(deleteItStatement(describeId, itId));
   };
+
+  const deleteReactItStatementOnKeyUp = (e) => {
+    if (e.charCode === 13) {
+      const itId = e.target.id;
+      dispatchToReactTestCase(deleteItStatement(describeId, itId));
+    }
+  }
   const addActionHandleClick = (e) => {
     const itId = e.target.id;
     dispatchToReactTestCase(addAction(describeId, itId));
@@ -54,6 +61,8 @@ const ItRenderer = ({
           {...provided.dragHandleProps}
         >
           <i
+            tabIndex={0}
+            onKeyPress={deleteReactItStatementOnKeyUp}
             onClick={deleteItStatementHandleClick}
             id={id}
             className={cn(styles.itClose, 'far fa-window-close')}

src/components/SearchInput/SearchInput.jsx

@@ -111,6 +111,7 @@ const SearchInput = ({
       <div className='search-container'>
         <div className='search'>
           <input
+            
             type='text'
             className='search-box'
             onChange={handleChange}