From 989d7ee1bbebcd5c3aa6c72453c2865e0d33d091 Mon Sep 17 00:00:00 2001
From: Chauncy-S <81826033+Chauncy-S@users.noreply.github.com>
Date: Thu, 6 May 2021 14:10:37 -0700
Subject: [PATCH 1/6] Update body.html


From f877681ad7d3080c16ba3d5bd2ff6f4c17cc2849 Mon Sep 17 00:00:00 2001
From: Chauncy <Chauncy.Sapien@Raytheon.com>
Date: Mon, 17 May 2021 17:31:45 -0700
Subject: [PATCH 2/6] EDSC-3073: Fixed the height of the Legend element

---
 static/src/js/components/ContactInfo/ContactInfo.js   |  4 +---
 static/src/js/components/ContactInfo/ContactInfo.scss |  4 ++++
 .../src/js/components/Preferences/PreferencesForm.js  |  2 ++
 .../js/components/Preferences/PreferencesForm.scss    | 11 +++++++++++
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/static/src/js/components/ContactInfo/ContactInfo.js b/static/src/js/components/ContactInfo/ContactInfo.js
index def17ef361..22064b4a7a 100644
--- a/static/src/js/components/ContactInfo/ContactInfo.js
+++ b/static/src/js/components/ContactInfo/ContactInfo.js
@@ -61,9 +61,7 @@ class ContactInfo extends Component {
 
     return (
       <fieldset className="contact-info-form">
-        <legend>
-          <h3>View Contact Information</h3>
-        </legend>
+        <legend className="contact-info-form__legend"><h3>View Contact Information</h3></legend>
         <ul className="contact-info-form__list">
           <li className="contact-info-form__item">
             <span className="contact-info-form__label">First Name</span>
diff --git a/static/src/js/components/ContactInfo/ContactInfo.scss b/static/src/js/components/ContactInfo/ContactInfo.scss
index 64582e2117..6e86d4cf85 100644
--- a/static/src/js/components/ContactInfo/ContactInfo.scss
+++ b/static/src/js/components/ContactInfo/ContactInfo.scss
@@ -19,4 +19,8 @@
     min-width: 200px;
     font-weight: bold;
   }
+
+  &__legend {
+    height: 0px;
+  }
 }
diff --git a/static/src/js/components/Preferences/PreferencesForm.js b/static/src/js/components/Preferences/PreferencesForm.js
index 96ef248c68..6df7e3388c 100644
--- a/static/src/js/components/Preferences/PreferencesForm.js
+++ b/static/src/js/components/Preferences/PreferencesForm.js
@@ -62,7 +62,9 @@ const PreferencesForm = (props) => {
 
   return (
     <div className="preferences-form">
+      <label htmlFor="preferences-form-label" className="visuallyhidden">Preferences Title</label>
       <Form
+        id="preferences-form-label"
         fields={fields}
         formData={formData}
         liveValidate
diff --git a/static/src/js/components/Preferences/PreferencesForm.scss b/static/src/js/components/Preferences/PreferencesForm.scss
index db2857cd48..d92d227006 100644
--- a/static/src/js/components/Preferences/PreferencesForm.scss
+++ b/static/src/js/components/Preferences/PreferencesForm.scss
@@ -8,3 +8,14 @@ ul.error-detail {
   list-style: none;
   padding-left: 0rem;
 }
+
+.visuallyhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
\ No newline at end of file

From 21b24020312e63dd552fc88b60e133a16b2fe748 Mon Sep 17 00:00:00 2001
From: Chauncy <Chauncy.Sapien@Raytheon.com>
Date: Tue, 18 May 2021 08:23:47 -0700
Subject: [PATCH 3/6] EDSC-3073: Added Label element to fix form control for
 DownloadHistory.js

---
 .../js/components/DownloadHistory/DownloadHistory.js   |  3 ++-
 .../js/components/DownloadHistory/DownloadHistory.scss | 10 ++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/static/src/js/components/DownloadHistory/DownloadHistory.js b/static/src/js/components/DownloadHistory/DownloadHistory.js
index e029844eda..4e74a83521 100644
--- a/static/src/js/components/DownloadHistory/DownloadHistory.js
+++ b/static/src/js/components/DownloadHistory/DownloadHistory.js
@@ -78,10 +78,11 @@ export class DownloadHistory extends Component {
             />
           )
         }
+        <label htmlFor="download-history" className="visuallyhidden">Download history</label>
         {
           retrievalHistoryLoaded && (
             retrievalHistory.length > 0 ? (
-              <Table className="download-history-table">
+              <Table className="download-history-table" id="download-history">
                 <thead>
                   <tr>
                     <th className="download-history-table__contents-heading">Contents</th>
diff --git a/static/src/js/components/DownloadHistory/DownloadHistory.scss b/static/src/js/components/DownloadHistory/DownloadHistory.scss
index 4a4cefbd0e..2a20e6d480 100644
--- a/static/src/js/components/DownloadHistory/DownloadHistory.scss
+++ b/static/src/js/components/DownloadHistory/DownloadHistory.scss
@@ -50,3 +50,13 @@
   }
 
 }
+.visuallyhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
\ No newline at end of file

From ce0a64e2f75a515b76310623801cd6edd4c7cd53 Mon Sep 17 00:00:00 2001
From: Chauncy <Chauncy.Sapien@Raytheon.com>
Date: Tue, 18 May 2021 08:52:06 -0700
Subject: [PATCH 4/6] EDSC-3073: Added Label element to fix form control for
 SavedProjects.js and fixed naming convention for PreferencesForm.js and
 DownloadHistory.js

---
 static/src/js/components/ContactInfo/ContactInfo.js |  2 +-
 .../components/DownloadHistory/DownloadHistory.js   |  4 ++--
 .../components/DownloadHistory/DownloadHistory.scss |  5 ++++-
 .../js/components/Preferences/PreferencesForm.js    |  2 +-
 .../js/components/Preferences/PreferencesForm.scss  |  4 +++-
 .../js/components/SavedProjects/SavedProjects.js    |  3 ++-
 .../js/components/SavedProjects/SavedProjects.scss  | 13 +++++++++++++
 7 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/static/src/js/components/ContactInfo/ContactInfo.js b/static/src/js/components/ContactInfo/ContactInfo.js
index 22064b4a7a..505e28a363 100644
--- a/static/src/js/components/ContactInfo/ContactInfo.js
+++ b/static/src/js/components/ContactInfo/ContactInfo.js
@@ -60,7 +60,7 @@ class ContactInfo extends Component {
     const { edlHost } = getEarthdataConfig(earthdataEnvironment)
 
     return (
-      <fieldset className="contact-info-form">
+      <fieldset className="contact-info-form" >
         <legend className="contact-info-form__legend"><h3>View Contact Information</h3></legend>
         <ul className="contact-info-form__list">
           <li className="contact-info-form__item">
diff --git a/static/src/js/components/DownloadHistory/DownloadHistory.js b/static/src/js/components/DownloadHistory/DownloadHistory.js
index 4e74a83521..dd8dda88f4 100644
--- a/static/src/js/components/DownloadHistory/DownloadHistory.js
+++ b/static/src/js/components/DownloadHistory/DownloadHistory.js
@@ -78,11 +78,11 @@ export class DownloadHistory extends Component {
             />
           )
         }
-        <label htmlFor="download-history" className="visuallyhidden">Download history</label>
+        <label htmlFor="download-status-history" className="visually-hide-label">Download history</label>
         {
           retrievalHistoryLoaded && (
             retrievalHistory.length > 0 ? (
-              <Table className="download-history-table" id="download-history">
+              <Table className="download-history-table" id="download-status-history">
                 <thead>
                   <tr>
                     <th className="download-history-table__contents-heading">Contents</th>
diff --git a/static/src/js/components/DownloadHistory/DownloadHistory.scss b/static/src/js/components/DownloadHistory/DownloadHistory.scss
index 2a20e6d480..09fd01757d 100644
--- a/static/src/js/components/DownloadHistory/DownloadHistory.scss
+++ b/static/src/js/components/DownloadHistory/DownloadHistory.scss
@@ -50,7 +50,10 @@
   }
 
 }
-.visuallyhidden {
+
+// Provided from https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements
+//- it is a common approach used to hide information visually but keep them available to screen readers
+.visually-hide-label {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
diff --git a/static/src/js/components/Preferences/PreferencesForm.js b/static/src/js/components/Preferences/PreferencesForm.js
index 6df7e3388c..cfb9e88f22 100644
--- a/static/src/js/components/Preferences/PreferencesForm.js
+++ b/static/src/js/components/Preferences/PreferencesForm.js
@@ -62,7 +62,7 @@ const PreferencesForm = (props) => {
 
   return (
     <div className="preferences-form">
-      <label htmlFor="preferences-form-label" className="visuallyhidden">Preferences Title</label>
+      <label htmlFor="preferences-form-label" className="visually-hide-label">Preferences Title</label>
       <Form
         id="preferences-form-label"
         fields={fields}
diff --git a/static/src/js/components/Preferences/PreferencesForm.scss b/static/src/js/components/Preferences/PreferencesForm.scss
index d92d227006..9c15fa783f 100644
--- a/static/src/js/components/Preferences/PreferencesForm.scss
+++ b/static/src/js/components/Preferences/PreferencesForm.scss
@@ -9,7 +9,9 @@ ul.error-detail {
   padding-left: 0rem;
 }
 
-.visuallyhidden {
+// Provided from https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements
+//- it is a common approach used to hide information visually but keep them available to screen readers
+.visually-hide-label {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
diff --git a/static/src/js/components/SavedProjects/SavedProjects.js b/static/src/js/components/SavedProjects/SavedProjects.js
index e2de52741f..91d417c1b6 100644
--- a/static/src/js/components/SavedProjects/SavedProjects.js
+++ b/static/src/js/components/SavedProjects/SavedProjects.js
@@ -83,10 +83,11 @@ export class SavedProjects extends Component {
             />
           )
         }
+        <label htmlFor="saved-projects-label" className="visually-hide-label">Saved Projects</label>
         {
           savedProjectsIsLoaded && (
             savedProjects.length > 0 ? (
-              <Table className="saved-projects-table">
+              <Table className="saved-projects-table" id="saved-projects-label">
                 <thead>
                   <tr>
                     <th className="saved-projects-table__project-name-heading">Project Name</th>
diff --git a/static/src/js/components/SavedProjects/SavedProjects.scss b/static/src/js/components/SavedProjects/SavedProjects.scss
index be9e5ad843..be55d5f624 100644
--- a/static/src/js/components/SavedProjects/SavedProjects.scss
+++ b/static/src/js/components/SavedProjects/SavedProjects.scss
@@ -56,3 +56,16 @@
   }
 }
 
+// Provided from https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements
+//- it is a common approach used to hide information visually but keep them available to screen readers
+.visually-hide-label {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+

From 8873a02ccbd7103d23675a99a679b01af990c9fa Mon Sep 17 00:00:00 2001
From: Chauncy <Chauncy.Sapien@Raytheon.com>
Date: Tue, 18 May 2021 09:30:30 -0700
Subject: [PATCH 5/6] EDSC-3073: Added Label element to fix form control for
 SubscriptionsList.js and fixed spacing error on ContactInfo.js

---
 static/src/js/components/ContactInfo/ContactInfo.js |  2 +-
 .../SubscriptionsList/SubscriptionsList.js          |  4 ++--
 .../SubscriptionsList/SubscriptionsList.scss        | 13 +++++++++++++
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/static/src/js/components/ContactInfo/ContactInfo.js b/static/src/js/components/ContactInfo/ContactInfo.js
index 505e28a363..22064b4a7a 100644
--- a/static/src/js/components/ContactInfo/ContactInfo.js
+++ b/static/src/js/components/ContactInfo/ContactInfo.js
@@ -60,7 +60,7 @@ class ContactInfo extends Component {
     const { edlHost } = getEarthdataConfig(earthdataEnvironment)
 
     return (
-      <fieldset className="contact-info-form" >
+      <fieldset className="contact-info-form">
         <legend className="contact-info-form__legend"><h3>View Contact Information</h3></legend>
         <ul className="contact-info-form__list">
           <li className="contact-info-form__item">
diff --git a/static/src/js/components/SubscriptionsList/SubscriptionsList.js b/static/src/js/components/SubscriptionsList/SubscriptionsList.js
index 2f7d241f15..a5504a42f8 100644
--- a/static/src/js/components/SubscriptionsList/SubscriptionsList.js
+++ b/static/src/js/components/SubscriptionsList/SubscriptionsList.js
@@ -57,11 +57,11 @@ export const SubscriptionsList = ({
           />
         )
       }
-
+      <label htmlFor="subscriptions-label" className="visually-hide-label">Subscriptions</label>
       {
         isLoaded && (
           subscriptionsMetadata.length > 0 ? (
-            <Table className="subscriptions-list__table" responsive>
+            <Table className="subscriptions-list__table" id="subscriptions-label" responsive>
               <thead>
                 <tr>
                   <th className="subscriptions-list-table__name-heading">Name</th>
diff --git a/static/src/js/components/SubscriptionsList/SubscriptionsList.scss b/static/src/js/components/SubscriptionsList/SubscriptionsList.scss
index d7b9cb8cdc..3192c4688a 100644
--- a/static/src/js/components/SubscriptionsList/SubscriptionsList.scss
+++ b/static/src/js/components/SubscriptionsList/SubscriptionsList.scss
@@ -109,3 +109,16 @@
     white-space: nowrap;
   }
 }
+
+// Provided from https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements
+//- it is a common approach used to hide information visually but keep them available to screen readers
+.visually-hide-label {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
\ No newline at end of file

From f2af2a716609fb0a42bfdf947d1815a72d0de52e Mon Sep 17 00:00:00 2001
From: Chauncy <Chauncy.Sapien@Raytheon.com>
Date: Tue, 18 May 2021 10:04:07 -0700
Subject: [PATCH 6/6] EDSC-3073: Added newline to the end of
 DownloadHistory.scss, PreferencesForm.scss, SavedProjects.scss, and
 SubscriptionsList.scss

---
 static/src/js/components/DownloadHistory/DownloadHistory.scss   | 2 +-
 static/src/js/components/Preferences/PreferencesForm.scss       | 2 +-
 static/src/js/components/SavedProjects/SavedProjects.scss       | 1 -
 .../src/js/components/SubscriptionsList/SubscriptionsList.scss  | 2 +-
 4 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/static/src/js/components/DownloadHistory/DownloadHistory.scss b/static/src/js/components/DownloadHistory/DownloadHistory.scss
index 09fd01757d..179b96dfc8 100644
--- a/static/src/js/components/DownloadHistory/DownloadHistory.scss
+++ b/static/src/js/components/DownloadHistory/DownloadHistory.scss
@@ -62,4 +62,4 @@
   padding: 0;
   position: absolute;
   width: 1px;
-}
\ No newline at end of file
+}
diff --git a/static/src/js/components/Preferences/PreferencesForm.scss b/static/src/js/components/Preferences/PreferencesForm.scss
index 9c15fa783f..e43f54fe49 100644
--- a/static/src/js/components/Preferences/PreferencesForm.scss
+++ b/static/src/js/components/Preferences/PreferencesForm.scss
@@ -20,4 +20,4 @@ ul.error-detail {
   padding: 0;
   position: absolute;
   width: 1px;
-}
\ No newline at end of file
+}
diff --git a/static/src/js/components/SavedProjects/SavedProjects.scss b/static/src/js/components/SavedProjects/SavedProjects.scss
index be55d5f624..b3e547cd75 100644
--- a/static/src/js/components/SavedProjects/SavedProjects.scss
+++ b/static/src/js/components/SavedProjects/SavedProjects.scss
@@ -68,4 +68,3 @@
   position: absolute;
   width: 1px;
 }
-
diff --git a/static/src/js/components/SubscriptionsList/SubscriptionsList.scss b/static/src/js/components/SubscriptionsList/SubscriptionsList.scss
index 3192c4688a..f85226557e 100644
--- a/static/src/js/components/SubscriptionsList/SubscriptionsList.scss
+++ b/static/src/js/components/SubscriptionsList/SubscriptionsList.scss
@@ -121,4 +121,4 @@
   padding: 0;
   position: absolute;
   width: 1px;
-}
\ No newline at end of file
+}