From 48e917115320d45ae89b1a4378fcd1573a49e4c0 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyasthomas@gmail.com>
Date: Sat, 23 Nov 2019 15:25:30 +0530
Subject: [PATCH] :wheelchair: Improving accessibility

---
 components/collections/index.vue |   4 +-
 components/history.vue           | 144 +++++++++++++++----------------
 pages/index.vue                  |  32 ++++---
 3 files changed, 87 insertions(+), 93 deletions(-)

diff --git a/components/collections/index.vue b/components/collections/index.vue
index 6602f1c0d..c8323e372 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -57,7 +57,7 @@ TODO:
         >
           <i class="material-icons">import_export</i>
         </button>
-        <a
+        <!-- <a
           href="https://github.com/liyasthomas/postwoman/wiki/Collections"
           target="_blank"
           rel="noopener"
@@ -65,7 +65,7 @@ TODO:
           <button class="icon" v-tooltip="'Wiki'">
             <i class="material-icons">help</i>
           </button>
-        </a>
+        </a> -->
       </div>
     </div>
 
diff --git a/components/history.vue b/components/history.vue
index fe1e2c3f4..f6762c6af 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -1,70 +1,14 @@
 <template>
   <pw-section class="green" icon="history" label="History" ref="history">
     <ul>
-      <div class="show-on-large-screen">
-        <li id="filter-history">
-          <input
-            aria-label="Search"
-            type="text"
-            placeholder="search history"
-            v-model="filterText"
-          />
-        </li>
-        <v-popover>
-          <button class="tooltip-target icon" v-tooltip="'Sort'">
-            <i class="material-icons">sort</i>
-          </button>
-          <template slot="popover">
-            <div>
-              <button class="icon" @click="sort_by_label()" v-close-popover>
-                <i class="material-icons">sort_by_alpha</i>
-                <span>Label</span>
-              </button>
-            </div>
-            <div>
-              <button class="icon" @click="sort_by_time()" v-close-popover>
-                <i class="material-icons">access_time</i>
-                <span>Time</span>
-              </button>
-            </div>
-            <div>
-              <button
-                class="icon"
-                @click="sort_by_status_code()"
-                v-close-popover
-              >
-                <i class="material-icons">assistant</i>
-                <span>Status</span>
-              </button>
-            </div>
-            <div>
-              <button class="icon" @click="sort_by_url()" v-close-popover>
-                <i class="material-icons">language</i>
-                <span>URL</span>
-              </button>
-            </div>
-            <div>
-              <button class="icon" @click="sort_by_path()" v-close-popover>
-                <i class="material-icons">timeline</i>
-                <span>Path</span>
-              </button>
-            </div>
-            <div v-if="showMore">
-              <button class="icon" @click="sort_by_duration()" v-close-popover>
-                <i class="material-icons">timer</i>
-                <span>Duration</span>
-              </button>
-            </div>
-            <div>
-              <button class="icon" @click="toggleCollapse()">
-                <i class="material-icons" v-if="!showMore">first_page</i>
-                <i class="material-icons" v-else>last_page</i>
-                <span>{{ !showMore ? "Show more" : "Hide more" }}</span>
-              </button>
-            </div>
-          </template>
-        </v-popover>
-      </div>
+      <li id="filter-history">
+        <input
+          aria-label="Search"
+          type="text"
+          placeholder="search history"
+          v-model="filterText"
+        />
+      </li>
     </ul>
     <virtual-list
       class="virtual-list"
@@ -223,8 +167,8 @@
         <label>History is empty</label>
       </li>
     </ul>
-    <ul v-if="history.length !== 0">
-      <li v-if="!isClearingHistory">
+    <div v-if="history.length !== 0">
+      <div class="flex-wrap" v-if="!isClearingHistory">
         <button
           class="icon"
           id="clear-history-button"
@@ -234,11 +178,64 @@
           <i class="material-icons">clear_all</i>
           <span>Clear All</span>
         </button>
-      </li>
-      <li v-else>
-        <div class="flex-wrap">
-          <label for="clear-history-button">Are you sure?</label>
-          <div>
+        <v-popover>
+          <button class="tooltip-target icon" v-tooltip="'Sort'">
+            <i class="material-icons">sort</i>
+          </button>
+          <template slot="popover">
+            <div>
+              <button class="icon" @click="sort_by_label()" v-close-popover>
+                <i class="material-icons">sort_by_alpha</i>
+                <span>Label</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="sort_by_time()" v-close-popover>
+                <i class="material-icons">access_time</i>
+                <span>Time</span>
+              </button>
+            </div>
+            <div>
+              <button
+                class="icon"
+                @click="sort_by_status_code()"
+                v-close-popover
+              >
+                <i class="material-icons">assistant</i>
+                <span>Status</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="sort_by_url()" v-close-popover>
+                <i class="material-icons">language</i>
+                <span>URL</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="sort_by_path()" v-close-popover>
+                <i class="material-icons">timeline</i>
+                <span>Path</span>
+              </button>
+            </div>
+            <div v-if="showMore">
+              <button class="icon" @click="sort_by_duration()" v-close-popover>
+                <i class="material-icons">timer</i>
+                <span>Duration</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="toggleCollapse()">
+                <i class="material-icons" v-if="!showMore">first_page</i>
+                <i class="material-icons" v-else>last_page</i>
+                <span>{{ !showMore ? "Show more" : "Hide more" }}</span>
+              </button>
+            </div>
+          </template>
+        </v-popover>
+      </div>
+      <div class="flex-wrap" v-else>
+        <label for="clear-history-button">Are you sure?</label>
+        <div>
             <button
               class="icon"
               id="confirm-clear-history-button"
@@ -256,9 +253,8 @@
               <i class="material-icons">close</i>
             </button>
           </div>
-        </div>
-      </li>
-    </ul>
+      </div>
+    </div>
   </pw-section>
 </template>
 
diff --git a/pages/index.vue b/pages/index.vue
index ffaa5de7a..d80de8047 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -88,23 +88,21 @@
                 <option value="Users"></option>
               </datalist>
             </li>
-            <div>
-              <li>
-                <label class="hide-on-small-screen" for="send">&nbsp;</label>
-                <button
-                  :disabled="!isValidURL"
-                  @click="sendRequest"
-                  id="send"
-                  ref="sendButton"
-                >
-                  Send
-                  <span id="hidden-message">Again</span>
-                  <span>
-                    <i class="material-icons">send</i>
-                  </span>
-                </button>
-              </li>
-            </div>
+            <li>
+              <label class="hide-on-small-screen" for="send">&nbsp;</label>
+              <button
+                :disabled="!isValidURL"
+                @click="sendRequest"
+                id="send"
+                ref="sendButton"
+              >
+                Send
+                <span id="hidden-message">Again</span>
+                <span>
+                  <i class="material-icons">send</i>
+                </span>
+              </button>
+            </li>
           </ul>
           <div
             class="blue"