#333: Replaced placeholder with label according to accessibility guid…

frontend/src/components/QuickAdd.tsx

@@ -95,7 +95,7 @@ export const QuickAdd = ({
   };
 
   const getSearchClasses = () => {
-    let classes = "col-2 quick-add-input ";
+    let classes = "col-3 mx-3 ";
     if (search != "") classes += issue ? "valid" : "invalid";
     return classes;
   };
@@ -107,10 +107,21 @@ export const QuickAdd = ({
   };
 
   return (
-    <div className="row">
-      <h2> Add a new row</h2>
+    <div>
+      <h2 className="mx-1"> Add a new row</h2>
+      <div className="row">
+      <label htmlFor="input-issue"
+      className="col-3 mx-1 hidden">
+        Issue e.g. 3499
+      </label>
+       <label 
+      htmlFor="select-activity"
+      className="col-3 mx-4 hidden" 
+      >Select activity
+      </label>
+      </div>
+      <div className="row">
       <input
-        aria-labelledby="input-issue"
         id="input-issue"
         className={getSearchClasses()}
         type="number"
@@ -119,7 +130,7 @@ export const QuickAdd = ({
           setSearch(e.target.value);
           setIssue(null);
         }}
-        placeholder="Type issue number..."
+        placeholder="e.g. 3499"
         title={(issue && issue.subject) || ""}
       />
       <img
@@ -129,8 +140,7 @@ export const QuickAdd = ({
         aria-label="Indicator for validity of issue number - x for not valid, check for valid."
       />
       <select
-        aria-label="Activity"
-        className="col-3"
+        className="col-3 mx-3"
         name="activity"
         id="select-activity"
         onChange={handleSetActivity}
@@ -145,9 +155,11 @@ export const QuickAdd = ({
             );
           })}
       </select>
-      <button className=" basic-button plus-button" onClick={handleAdd}>
+      <button className="col-3 basic-button plus-button" onClick={handleAdd}>
         <img src={plus} alt="Add line" />
       </button>
+      </div>
+
     </div>
   );
 };

frontend/src/index.css

@@ -143,9 +143,8 @@ Other button classes are defined further down together with other classes for th
 .footer {
   z-index: 100;
   width: 100%;
-  top: calc(100vh - 120px);
+  bottom: 0;
   position: fixed;
-  height: 120px;
   background-color: white;
 }
 
@@ -351,7 +350,7 @@ Other button classes are defined further down together with other classes for th
 }
 
 .save-button {
-  margin: 2rem;
+  margin: 1rem 2rem 2rem;
   min-width: 10rem;
   padding: 1rem 1.5rem;
 }
@@ -405,12 +404,6 @@ Other button classes are defined further down together with other classes for th
   height: 2rem;
 }
 
-.quick-add-input {
-  padding: 0.5rem 0.75rem;
-  margin: 0 0 0 3.75rem;
-  outline: none;
-}
-
 .not-outline {
   outline: none;
 }
@@ -425,7 +418,7 @@ Other button classes are defined further down together with other classes for th
 
 .validation-icon {
   width: 3.5rem;
-  margin-left: -2.8rem;
+  margin-left: -3.8rem;
 }
 
 .hiden {
@@ -435,8 +428,9 @@ Other button classes are defined further down together with other classes for th
 /* The unsaved changes alert message box */
 .unsaved-alert-p {
   color: hsl(26deg 91% 42%); /* Red */
-  margin: 3rem 1rem 2rem;
+  margin-right: 2rem;
   text-align: right;
+  min-height: 2rem;
 }
 
 .comment-container {
@@ -635,3 +629,9 @@ Other button classes are defined further down together with other classes for th
   right: 3px;
   width: 0.7rem;
 }
+
+@media (max-width: 992px) {
+  .hidden {
+    visibility: hidden;
+  }
+}

frontend/src/pages/Report.tsx

@@ -714,20 +714,20 @@ export const Report = () => {
         </main>
         <div className="footer">
           <section className="footer-container">
-            <div className="col-7">
+            <div className="col-8">
               <QuickAdd addIssueActivity={addIssueActivityHandler}></QuickAdd>
             </div>
-            <div className="col-3 ">
+            {toastList.length > 0 && (
+                <Toast onCloseToast={handleCloseToast} toastList={toastList} />
+              )}
+            <div className="col-4 save-changes">
+            <div className="unsaved-alert-p">
               {showUnsavedWarning && (
-                <div className="unsaved-alert-p">
+
                   <p role="status">⚠ You have unsaved changes</p>
-                </div>
+
               )}
-              {toastList.length > 0 && (
-                <Toast onCloseToast={handleCloseToast} toastList={toastList} />
-              )}
-            </div>
-            <div className="col-2 save-changes">
+              </div>
               <button className="basic-button save-button" onClick={handleSave}>
                 Save changes
               </button>