From 8d7cbdac353269c55c5ebc9c46217521ed250629 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Wed, 26 Dec 2018 13:00:21 +0000
Subject: [PATCH] Accessibility improvements

---
 src/components/Application/ApplicationCard.vue | 2 ++
 src/views/Applications.vue                     | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Application/ApplicationCard.vue b/src/components/Application/ApplicationCard.vue
index 0dcbd3b..6665089 100644
--- a/src/components/Application/ApplicationCard.vue
+++ b/src/components/Application/ApplicationCard.vue
@@ -18,6 +18,7 @@
 
         <div class="flex-none w-1/6 text-right">
           <button type="button" @click="starred = !starred" class="focus:outline-none" :class="[starred ? 'text-orange hover:text-orange-light focus:text-orange-light' : 'text-grey focus:text-orange hover:text-orange']">
+            <span class="visuallyhidden">{{ !starred ? 'Star' : 'Unstar' }} {{ application.name }}</span>
             <svg class="h-6 w-6 fill-current" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#state__${starred ? 'starred' : 'unstarred'}`"></use></svg>
           </button>
         </div>
@@ -41,6 +42,7 @@
 
           <div class="px-2">
             <button type="button" @click="starred = !starred" class="focus:outline-none" :class="[starred ? 'text-orange hover:text-orange-light focus:text-orange-light' : 'text-grey focus:text-orange hover:text-orange']">
+              <span class="visuallyhidden">{{ !starred ? 'Star' : 'Unstar' }} {{ application.name }}</span>
               <svg class="h-6 w-6 fill-current" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#state__${starred ? 'starred' : 'unstarred'}`"></use></svg>
             </button>
           </div>
diff --git a/src/views/Applications.vue b/src/views/Applications.vue
index 56ea380..d1df153 100644
--- a/src/views/Applications.vue
+++ b/src/views/Applications.vue
@@ -30,7 +30,8 @@
               <div class="lg:flex lg:flex-row-reverse justify-between items-baseline">
                 <div class="w-full">
                   <form action="#">
-                    <input type="text" placeholder="Filter applications" class="w-full py-2 px-3 border border-grey-darker rounded">
+                    <label for="applications" class="visuallyhidden">Filter applications</label>
+                    <input id="applications" type="text" placeholder="Filter applications" class="w-full py-2 px-3 border border-grey-darker rounded">
                   </form>
                 </div>
               </div>