From 0b678ebd48d3e37c34b21fa5d2eaddbb10fafc0e Mon Sep 17 00:00:00 2001
From: lbeckman314 <lbeckman314@gmail.com>
Date: Mon, 10 Sep 2018 19:31:55 -0700
Subject: [PATCH 1/5] included labels for inputs

---
 _includes/scripts.html     | 8 ++++----
 stylesheets/stylesheet.css | 8 ++++++++
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/_includes/scripts.html b/_includes/scripts.html
index 63804e77500..51971d35647 100644
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -1,15 +1,15 @@
 <script type="text/html" id="projects-panel-template">
   <div class="filters-panel cf">
-    <h5>Filter by name: </h5>
-    <select class="names-filter" multiple data-placeholder="Select a project..." >
+    <label for="project">Filter by name:</label>
+    <select class="names-filter" multiple data-placeholder="Select a project..." id="project">
     <% _.each(names, function(entry, key){ %>
       <option value="<%-key%>"><%- entry.name%></option>
     <% }) %>
     </select>
   </div>
   <div class="filters-panel cf">
-    <h5>Filter by tags: </h5>
-    <select class="tags-filter" multiple data-placeholder="Select a tag..." >
+    <label for="tag">Filter by tags:</label>
+    <select class="tags-filter" multiple data-placeholder="Select a tag..." id="tag">
     <% _.each(tags, function(entry, key){ %>
       <option value="<%-key%>"><%- entry.name%>  (<%-entry.frequency%>)</option>
     <% }) %>
diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css
index ce6e9a56bba..719aa89628c 100644
--- a/stylesheets/stylesheet.css
+++ b/stylesheets/stylesheet.css
@@ -100,6 +100,14 @@ h4, h5, h6 {
   color: #225B7D;
 }
 
+label {
+    font-family: 'Open Sans Condensed', sans-serif;
+    font-size: 16px;
+    color: #225B7D;
+    padding: 10px 0;
+    display: block;
+}
+
 p {
   margin: 10px 0 15px 0;
 }

From d65009cd309fe3c99db7bd8b444a7210cfc96c4e Mon Sep 17 00:00:00 2001
From: lbeckman314 <lbeckman314@gmail.com>
Date: Mon, 10 Sep 2018 19:32:20 -0700
Subject: [PATCH 2/5] tabbing moves between project titles

- skips over project tags and "up-for-grabs" labels
---
 _includes/scripts.html     | 4 ++--
 stylesheets/stylesheet.css | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/_includes/scripts.html b/_includes/scripts.html
index 51971d35647..225b62b6149 100644
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -31,7 +31,7 @@ <h5>Popular tags: </h5>
     </tr>
     <tr>
        <td class="details">
-        <p class="label"><a href="<%- project.upforgrabs.link %>" title="View open issues for <%-project.name %>" target="_blank"><%-project.upforgrabs.name %></a></p>
+        <p class="label"><a href="<%- project.upforgrabs.link %>" tabindex="-1" title="View open issues for <%-project.name %>" target="_blank"><%-project.upforgrabs.name %></a></p>
        </td>
        <td class="details">
            <% if (project.desc) { %>
@@ -40,7 +40,7 @@ <h5>Popular tags: </h5>
            <% if (project.tags) { %>
            <p class="tags">
                <% _.each(project.tags, function(tag, i) { %>
-                   <a href="#/tags/<%-encodeURIComponent(tag)%>"><%-tag%></a><%- i != project.tags.length-1 ? "," : "" %>
+                   <a href="#/tags/<%-encodeURIComponent(tag)%>" tabindex="-1"><%-tag%></a><%- i != project.tags.length-1 ? "," : "" %>
                <% }) %>
            </p>
            <% } %>
diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css
index 719aa89628c..fb09391e622 100644
--- a/stylesheets/stylesheet.css
+++ b/stylesheets/stylesheet.css
@@ -549,6 +549,10 @@ form {
   margin-bottom: 0;
 }
 
+.tags, .details {
+  nav-index: 0;
+}
+
 .projects .label .count {
   background: none white;
   border: 1px solid white;

From 7c8a962891424878173aed88017daa67f2aa03eb Mon Sep 17 00:00:00 2001
From: lbeckman314 <lbeckman314@gmail.com>
Date: Mon, 11 Feb 2019 17:32:01 -0800
Subject: [PATCH 3/5]  Readded accessibility changes.

- Include labels for inputs (helps with screen reader accessibility even if visibly hidden)
- Improve keyboard navigation (I suggest that tabbing moves between project titles and skips project tags & "up-for-grabs" label)
---
 _includes/scripts.html | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/_includes/scripts.html b/_includes/scripts.html
index 6a8aa41a03d..1856b257fd0 100644
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -1,24 +1,23 @@
 <script type="text/html" id="projects-panel-template">
   <div class="filters-panel cf">
-    <h5>Filter by name: </h5>
-    <label for="project">Filter by name:</label>
-    <select class="names-filter" multiple data-placeholder="Select a project..." id="project">
+    <h5><label for="project">Filter by name:</label></h5>
+    <select class="names-filter" id="project" multiple data-placeholder="Select a project..." >
       <% _.each(names, function(entry, key){ %>
         <option value="<%-key%>"><%- entry.name%></option>
       <% }) %>
     </select>
   </div>
   <div class="filters-panel cf">
-    <h5>Filter by label: </h5>
-    <select class="labels-filter" multiple data-placeholder="Select a label..." >
+    <h5><label for="label">Filter by label: </label></h5>
+    <select class="labels-filter" id="label" multiple data-placeholder="Select a label..." >
     <% _.each(labels, function(entry, key){ %>
       <option value="<%-key%>"><%- entry.name%></option>
     <% }) %>
     </select>
   </div>
   <div class="filters-panel cf">
-    <label for="tag">Filter by tags:</label>
-    <select class="tags-filter" multiple data-placeholder="Select a tag..." id="tag">
+    <h5><label for="tag">Filter by tags: </label></h5>
+    <select class="tags-filter" id="tag" multiple data-placeholder="Select a tag..." >
     <% _.each(tags, function(entry, key){ %>
       <option value="<%-key%>"><%- entry.name%>  (<%-entry.frequency%>)</option>
     <% }) %>
@@ -40,7 +39,7 @@ <h5>Popular tags: </h5>
     </tr>
     <tr>
        <td class="details">
-        <p class="label"><a href="<%- project.upforgrabs.link %>" tabindex="-1" title="View open issues for <%-project.name %>" target="_blank"><%-project.upforgrabs.name %></a></p>
+        <p class="label"><a href="<%- project.upforgrabs.link %>" title="View open issues for <%-project.name %>" target="_blank" tabindex="-1"><%-project.upforgrabs.name %></a></p>
        </td>
        <td class="details">
            <% if (project.desc) { %>

From cface960bafb26c707e0b4730e1a668cc37707df Mon Sep 17 00:00:00 2001
From: lbeckman314 <lbeckman314@gmail.com>
Date: Mon, 11 Feb 2019 17:39:20 -0800
Subject: [PATCH 4/5]  Readded accessibility changes.

- Include labels for inputs (helps with screen reader accessibility even if visibly hidden)
- Improve keyboard navigation (I suggest that tabbing moves between project titles and skips project tags & "up-for-grabs" label)
---
 _includes/scripts.html     |  7 ++++---
 stylesheets/stylesheet.css | 12 ------------
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/_includes/scripts.html b/_includes/scripts.html
index 1856b257fd0..e914cdc422c 100644
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -1,6 +1,6 @@
 <script type="text/html" id="projects-panel-template">
   <div class="filters-panel cf">
-    <h5><label for="project">Filter by name:</label></h5>
+    <h5><label class="filter" for="project">Filter by name:</label></h5>
     <select class="names-filter" id="project" multiple data-placeholder="Select a project..." >
       <% _.each(names, function(entry, key){ %>
         <option value="<%-key%>"><%- entry.name%></option>
@@ -8,7 +8,7 @@ <h5><label for="project">Filter by name:</label></h5>
     </select>
   </div>
   <div class="filters-panel cf">
-    <h5><label for="label">Filter by label: </label></h5>
+    <h5><label class="filter" for="label">Filter by label: </label></h5>
     <select class="labels-filter" id="label" multiple data-placeholder="Select a label..." >
     <% _.each(labels, function(entry, key){ %>
       <option value="<%-key%>"><%- entry.name%></option>
@@ -16,7 +16,7 @@ <h5><label for="label">Filter by label: </label></h5>
     </select>
   </div>
   <div class="filters-panel cf">
-    <h5><label for="tag">Filter by tags: </label></h5>
+    <h5><label class="filter" for="tag">Filter by tags: </label></h5>
     <select class="tags-filter" id="tag" multiple data-placeholder="Select a tag..." >
     <% _.each(tags, function(entry, key){ %>
       <option value="<%-key%>"><%- entry.name%>  (<%-entry.frequency%>)</option>
@@ -86,3 +86,4 @@ <h5>Popular tags: </h5>
   pageTracker._trackPageview();
   } catch(err) {}
 </script>
+
diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css
index 2e5f69fb636..bce71d4ca5e 100644
--- a/stylesheets/stylesheet.css
+++ b/stylesheets/stylesheet.css
@@ -100,14 +100,6 @@ h4, h5, h6 {
   color: #225B7D;
 }
 
-label {
-    font-family: 'Open Sans Condensed', sans-serif;
-    font-size: 16px;
-    color: #225B7D;
-    padding: 10px 0;
-    display: block;
-}
-
 p {
   margin: 10px 0 15px 0;
 }
@@ -576,10 +568,6 @@ form {
   margin-bottom: 0;
 }
 
-.tags, .details {
-  nav-index: 0;
-}
-
 .projects .label .count {
   background: none white;
   border: 1px solid white;

From 43d6f4008de44400e9b2476df330a58fba976300 Mon Sep 17 00:00:00 2001
From: lbeckman314 <lbeckman314@gmail.com>
Date: Mon, 11 Feb 2019 17:44:03 -0800
Subject: [PATCH 5/5] Removed unnecessary class for filter labels.

---
 _includes/scripts.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/_includes/scripts.html b/_includes/scripts.html
index e914cdc422c..13c868530f7 100644
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -1,6 +1,6 @@
 <script type="text/html" id="projects-panel-template">
   <div class="filters-panel cf">
-    <h5><label class="filter" for="project">Filter by name:</label></h5>
+    <h5><label for="project">Filter by name:</label></h5>
     <select class="names-filter" id="project" multiple data-placeholder="Select a project..." >
       <% _.each(names, function(entry, key){ %>
         <option value="<%-key%>"><%- entry.name%></option>
@@ -8,7 +8,7 @@ <h5><label class="filter" for="project">Filter by name:</label></h5>
     </select>
   </div>
   <div class="filters-panel cf">
-    <h5><label class="filter" for="label">Filter by label: </label></h5>
+    <h5><label for="label">Filter by label: </label></h5>
     <select class="labels-filter" id="label" multiple data-placeholder="Select a label..." >
     <% _.each(labels, function(entry, key){ %>
       <option value="<%-key%>"><%- entry.name%></option>
@@ -16,7 +16,7 @@ <h5><label class="filter" for="label">Filter by label: </label></h5>
     </select>
   </div>
   <div class="filters-panel cf">
-    <h5><label class="filter" for="tag">Filter by tags: </label></h5>
+    <h5><label for="tag">Filter by tags: </label></h5>
     <select class="tags-filter" id="tag" multiple data-placeholder="Select a tag..." >
     <% _.each(tags, function(entry, key){ %>
       <option value="<%-key%>"><%- entry.name%>  (<%-entry.frequency%>)</option>