Merge pull request #37 from oslabs-beta/staging

Merge PR #35 from Staging to Main

Author: annieshinn

src/components/AccTestComponent/CatTagFilter/CatTagFilter.module.scss

@@ -0,0 +1,15 @@
+@import '../../../assets/stylesheets/fonts.scss';
+@import '../../../assets/stylesheets/colors.scss';
+
+#CatTagFilter {
+  font-weight: bold;
+  font-size: 0.75rem;
+  position: relative;
+  margin-left: 5px;
+  margin-top: 10px;
+  z-index: 3;
+
+  #accTestCatTypes:focus {
+    border: 2px solid darkblue;
+  }
+}

src/components/AccTestComponent/CatTagFilter/CatTagFilter.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styles from './CatTagFilter.module.scss';
+
+const CatTagFilter = ({ dispatch, tagAction, textAction, itId, catTag }) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(tagAction(itId, e.target.value));
+    if (e.target.value === 'none') dispatch(textAction(`Component is accessible regarding all axe-core categories.`, itId));
+    else dispatch(textAction(`Component is accessible regarding ${e.target.value}.`, itId));
+  };
+
+  return (
+    <div id={styles.CatTagFilter}>
+      <label for='accTestCatTypes'>Choose A Content Filter: </label>
+      <select value={catTag} id={styles.accTestCatTypes} onChange={handleChange}>
+        <option value='none'>No Tag</option>
+        <option value='aria'>ARIA</option>
+        <option value='color'>Color</option>
+        <option value='forms'>Forms</option>
+        <option value='keyboard'>Keyboard</option>
+        <option value='language'>Language</option>
+        <option value='name-role-value'>Name role value</option>
+        <option value='parsing'>Parsing</option>
+        <option value='semantics'>Semantics</option>
+        <option value='sensory-and-visual-cues'>Sensory and visual cues</option>
+        <option value='structure'>Structure</option>
+        <option value='tables'>Tables</option>
+        <option value='text-alternatives'>Text alternatives</option>
+        <option value='time-and-media'>Time and media</option>
+      </select>
+    </div>
+  );
+};
+
+export default CatTagFilter;

src/components/AccTestComponent/CustomInput/CustomInput.module.scss

@@ -12,7 +12,6 @@
   display: flex;
   flex-direction: column;
   z-index: 0;
-  margin-top: 1rem;
 
   .describeClose {
     position: absolute;
@@ -35,7 +34,7 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: 65px;
+    height: 100px;
     // background-color: rgba(128, 128, 128, 0.20);
     background-color: #02c3c33f;
     border-bottom: 2px solid gray;
@@ -50,11 +49,12 @@
     font-family: $oxygen;
   }
 
-  .describeInput {
+  .describeStatement {
     border: none;
-    // border-bottom: 1px solid $mint;
+    border-bottom: 1px solid $mint;
     background-color: rgba(0, 0, 0, 0);
-    margin-top: 0.3rem;
+    margin-top: .8rem;
+    margin-bottom: .8rem;
     font-size: 0.9rem;
     z-index: 3;
   }

src/components/AccTestComponent/CustomInput/CustomInput.tsx

@@ -1,21 +1,21 @@
-import React, { useRef, useEffect, ChangeEvent } from 'react';
+import React, { ChangeEvent } from 'react';
 import cn from 'classnames';
 import { Draggable, Droppable } from 'react-beautiful-dnd';
 import ItRenderer from '../ItRenderer/ItRenderer';
+import StandardTagFilter from '../StandardTagFilter/StandardTagFilter';
 import styles from './DescribeRenderer.module.scss';
 import { deleteDescribeBlock, addItStatement } from '../../../context/actions/accTestCaseActions';
-import { AccTestCaseState } from '../../../utils/accTypes';
 
 const DescribeRenderer = ({
   dispatcher,
   describeBlocks,
   itStatements,
-  handleChangeDescribeText,
-  handleChangeItStatementText,
+  updateDescribeText,
+  updateItStatementText,
+  updateDescribeStandardTag,
+  updateItCatTag,
   type,
 }) => {
-
-
   const deleteDescribeBlockHandleClick = (e: ChangeEvent) => {
     e.stopPropagation();
     const describeId = e.target.id;
@@ -27,14 +27,14 @@ const DescribeRenderer = ({
     dispatcher(addItStatement(describeId));
   };
 
-  const deleteDescribeBlockOnKeyUp = (e) => {
+  const deleteDescribeBlockOnKeyUp = (e: ChangeEvent) => {
     if (e.charCode === 13) {
-    const describeId = e.target.id;
-    dispatcher(deleteDescribeBlock(describeId));
+      const describeId = e.target.id;
+      dispatcher(deleteDescribeBlock(describeId));
     }
-}
+  };
 
-  return describeBlocks.allIds.map((id: string , i: number) => (
+  return describeBlocks.allIds.map((id: string, i: number) => (
     <Draggable
       key={id}
       draggableId={id}
@@ -51,7 +51,15 @@ const DescribeRenderer = ({
             <label htmlFor="describe-label" className={styles.describeLabel}>
               Describe Block
             </label>
-            
+
+            <StandardTagFilter
+              dispatch={dispatcher}
+              tagAction={updateDescribeStandardTag}
+              textAction={updateDescribeText}
+              describeId={id}
+              standardTag={describeBlocks.byId[id].standardTag}
+            />
+
             <i
               tabIndex={0}
               onKeyPress={deleteDescribeBlockOnKeyUp}
@@ -60,18 +68,7 @@ const DescribeRenderer = ({
               className={cn('far fa-window-close', styles.describeClose)}
             />
 
-
-            <input
-              
-              id={id}
-              className={styles.describeInput}
-              name="describe-label"
-              type="text"
-              placeholder="Component has basic accessibility"
-              value={describeBlocks.byId[id].text || ''}
-              onChange={handleChangeDescribeText}
-            />
-
+            <p className={styles.describeStatement}>{describeBlocks.byId[id].text}</p>
             <div className={styles.separator} />
 
             <Droppable
@@ -88,7 +85,8 @@ const DescribeRenderer = ({
                     key={`it-${id}-${i}`}
                     itStatements={itStatements}
                     describeId={id}
-                    handleChangeItStatementText={handleChangeItStatementText}
+                    updateItStatementText={updateItStatementText}
+                    updateItCatTag={updateItCatTag}
                   />
                   {innerProvided.placeholder}
                 </div>

src/components/AccTestComponent/DescribeRenderer/DescribeRenderer.module.scss

@@ -10,6 +10,7 @@
   background-color: $light-gray2;
   border-radius: 3px;
   box-shadow: 2px 2px 5px gray;
+  height: 100px;
 
   .itClose {
     position: absolute;
@@ -18,6 +19,7 @@
     right: 5px;
     transition: 250ms;
     cursor: pointer;
+    z-index: 3;
 
     &:hover {
       color: red;
@@ -26,6 +28,17 @@
     }
   }
 
+  .itStatement {
+    position: absolute;
+    bottom: 15px;
+    width: 97.4%;
+    padding: 0.1rem;
+    padding-left: 0.4rem;
+    font-size: 1.1em;
+    border-bottom: 1px solid $mint;
+    background-color: rgba(0, 0, 0, 0);
+  }
+
   .buttonsContainer {
     margin-top: 1rem;
     display: flex;

src/components/AccTestComponent/DescribeRenderer/DescribeRenderer.tsx

@@ -2,19 +2,19 @@ import React, { ChangeEvent, useContext } from 'react';
 import cn from 'classnames';
 import { Draggable } from 'react-beautiful-dnd';
 import { AccTestCaseContext } from '../../../context/reducers/accTestCaseReducer';
+import CatTagFilter from '../CatTagFilter/CatTagFilter';
 
 import {
   deleteItStatement,
 } from '../../../context/actions/accTestCaseActions';
 
-import CustomInput from '../CustomInput/CustomInput';
-
 import styles from './ItRenderer.module.scss';
 
 const ItRenderer = ({
   itStatements,
   describeId,
-  handleChangeItStatementText,
+  updateItStatementText,
+  updateItCatTag,
 }) => {
 
   const [, dispatchToAccTestCase] = useContext(AccTestCaseContext);
@@ -45,6 +45,14 @@ const ItRenderer = ({
           key={i}
         >
 
+          <CatTagFilter
+            dispatch={dispatchToAccTestCase}
+            tagAction={updateItCatTag}
+            textAction={updateItStatementText}
+            itId={id}
+            catTag={itStatements.byId[id].catTag}
+          />
+
           <i
             tabIndex={0}
             onKeyPress={deleteItStatementOnKeyUp}
@@ -53,14 +61,7 @@ const ItRenderer = ({
             className={cn(styles.itClose, 'far fa-window-close')}
           />
 
-          <CustomInput
-            key={`input-${id}-${i}`}
-            id={id}
-            label={'The element should...'}
-            placeholder={'The tested element should...'}
-            value={itStatements.byId[id].text}
-            handleChange={handleChangeItStatementText}
-          />
+          <p class={styles.itStatement}>{itStatements.byId[id].text}</p>
           <hr />
 
         </div>

src/components/AccTestComponent/ItRenderer/ItRenderer.module.scss

@@ -0,0 +1,14 @@
+@import '../../../assets/stylesheets/fonts.scss';
+@import '../../../assets/stylesheets/colors.scss';
+
+#StandardTagFilter {
+  font-weight: bold;
+  font-size: 0.8rem;
+  position: relative;
+  margin-top: 10px;
+  z-index: 3;
+
+  #accTestStandardTypes:focus {
+    border: 2px solid darkblue;
+  }
+}

src/components/AccTestComponent/ItRenderer/ItRenderer.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styles from './StandardTagFilter.module.scss';
+
+const StandardTagFilter = ({ dispatch, tagAction, textAction, describeId, standardTag }) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    dispatch(tagAction(describeId, e.target.value));
+    if (e.target.value === 'none') dispatch(textAction(`Component is accessible according to all standards enforced by axe-core.`, describeId));
+    else dispatch(textAction(`Component is accessible according to ${e.target.value} standards.`, describeId));
+  };
+
+  return (
+    <div id={styles.StandardTagFilter}>
+      <label for='accTestStandardTypes'>Choose An Accessibility Standard:  </label>
+      <select value={standardTag} id={styles.accTestStandardTypes} onChange={handleChange}>
+        <option value='none'>No Tag</option>
+        <option value='wcag2a'>WCAG 2.0 Level A</option>
+        <option value='wcag2aa'>WCAG 2.0 Level AA</option>
+        <option value='wcag21a'>WCAG 2.1 Level A</option>
+        <option value='wcag21aa'>WCAG 2.1 Level AA</option>
+        <option value='best-practice'>Common best practices</option>
+        <option value='ACT'>ACT (by W3C)</option>
+        <option value='section508'>Section 508</option>
+        <option value='experimental'>Experimental (auto-disabled)</option>
+      </select>
+    </div>
+  );
+};
+
+export default StandardTagFilter;