♿ Improving accessibility

assets/css/styles.scss

@@ -590,6 +590,7 @@ pre {
 
   input {
     text-transform: uppercase;
+    min-width: 128px;
   }
 
   .trigger {
@@ -690,8 +691,12 @@ ul li,
 ol li {
   display: inline-flex;
   flex-flow: column nowrap;
-  flex-grow: 1;
+  flex: 1;
   justify-content: center;
+
+  &.shrink {
+    flex-grow: 0;
+  }
 }
 
 .flex-wrap {
@@ -714,7 +719,7 @@ ol li {
 }
 
 .show-on-large-screen {
-  display: inline-flex;
+  display: flex;
   flex: 1;
 }
 
@@ -791,7 +796,7 @@ ol li {
     z-index: 10001;
     transform: translateX(-50%);
     box-shadow: 0 4px 24px rgba(black, 0.2);
-    transition: all .2s ease-in-out;
+    transition: all 0.2s ease-in-out;
   }
 }
 

components/layout/history.vue

@@ -1,20 +1,11 @@
 <template>
   <pw-section class="green" icon="history" :label="$t('history')" ref="history">
-    <ul>
     <div class="show-on-large-screen">
-        <li id="filter-history">
-          <input
-            aria-label="Search"
-            type="search"
-            :placeholder="$t('search')"
-            v-model="filterText"
-          />
-        </li>
+      <input aria-label="Search" type="search" :placeholder="$t('search')" v-model="filterText" />
       <button class="icon">
         <i class="material-icons">search</i>
       </button>
     </div>
-    </ul>
     <virtual-list
       class="virtual-list"
       :class="{ filled: filteredHistory.length }"
@@ -354,9 +345,9 @@ export default {
         fb.currentUser !== null
           ? fb.currentHistory
           : JSON.parse(window.localStorage.getItem("history")) || []
-      return this.history.filter(entry => {
+      return this.history.filter((entry) => {
         const filterText = this.filterText.toLowerCase()
-        return Object.keys(entry).some(key => {
+        return Object.keys(entry).some((key) => {
           let value = entry[key]
           value = typeof value !== "string" ? value.toString() : value
           return value.toLowerCase().includes(filterText)

pages/index.vue

@@ -37,8 +37,7 @@
 
         <pw-section class="blue" :label="$t('request')" ref="request">
           <ul>
-            <div>
-              <li>
+            <li class="shrink">
               <label for="method">{{ $t("method") }}</label>
               <span class="select-wrapper">
                 <v-popover>
@@ -175,7 +174,6 @@
                 </v-popover>
               </span>
             </li>
-            </div>
             <li>
               <label for="url">{{ $t("url") }}</label>
               <input
@@ -189,8 +187,7 @@
                 @input="pathInputHandler"
               />
             </li>
-            <div>
-              <li>
+            <li class="shrink">
               <label class="hide-on-small-screen" for="send">&nbsp;</label>
               <button :disabled="!isValidURL" @click="sendRequest" id="send" ref="sendButton">
                 {{ $t("send") }}
@@ -199,7 +196,6 @@
                 </span>
               </button>
             </li>
-            </div>
           </ul>
           <div class="blue">
             <label for="label">{{ $t("label") }}</label>