Merge pull request #455 from NBISweden/fix/333-proper-label-placehold…

…er-for-quickadd-input #333: Replaced placeholder with label according to accessibility guid…
NBISweden · May 24, 2022 · 33b8708 · 33b8708
2 parents 6f52c2e + eef9829
commit 33b8708
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 27 deletions.
diff --git a/frontend/src/components/QuickAdd.tsx b/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 footer-field";
     if (search != "") classes += issue ? "valid" : "invalid";
     return classes;
   };
@@ -107,10 +107,21 @@ export const QuickAdd = ({
   };
 
   return (
-    <div className="row">
+    <div>
       <h2> Add a new row</h2>
+      <div className="row">
+      <label htmlFor="input-issue"
+      className="col-3 input-label hidden">
+        Issue e.g. 3499
+      </label>
+       <label 
+      htmlFor="select-activity"
+      className="col-3 select-label 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 footer-field"
         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>
   );
 };
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -138,17 +138,31 @@ Other button classes are defined further down together with other classes for th
 
 .spreadsheet {
   min-height: 100vh;
+  margin-bottom: 5rem;
 }
 
 .footer {
   z-index: 100;
   width: 100%;
-  top: calc(100vh - 120px);
+  bottom: 0;
   position: fixed;
-  height: 120px;
   background-color: white;
 }
 
+.input-label {
+  margin-left: 0.4rem;
+  margin-top: 0.5rem;
+}
+
+.select-label {
+  margin-left: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+.footer-field {
+  margin-left: 1rem;
+}
+
 .header-year {
   font-size: 2.25rem;
   color: hsl(186deg 92% 11%);
@@ -351,7 +365,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 +419,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 +433,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 +443,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 {
@@ -636,6 +645,12 @@ Other button classes are defined further down together with other classes for th
   width: 0.7rem;
 }
 
+@media (max-width: 992px) {
+  .hidden {
+    visibility: hidden;
+  }
+}
+
 .row-focused {
   background-color: hsl(186deg 30% 94%);
 }
diff --git a/frontend/src/pages/Report.tsx b/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>