♿ Improving accessibility, fixes #279

README.md

@@ -131,7 +131,7 @@ _HTML responses have "Preview HTML" feature_
 
 _History entries can be sorted by any fields_
 
-_Histories can deleted one-by-one or all together_
+_Histories can be deleted one-by-one or all together_
 
 📁 **Collections**: Keep your API requests organized with collections and folders. Reuse them with a single click.
 

assets/css/styles.scss

@@ -71,7 +71,7 @@ a {
 
 header,
 footer {
-  & > div {
+  &>div {
     display: flex;
     padding: 16px;
     width: 100%;
@@ -497,8 +497,9 @@ pre {
   resize: vertical;
   text-overflow: ellipsis;
 
-  &:not([readonly]):hover {
-    background-color: var(--bg-dark-color);
+  &:not([readonly]):active,
+  &:not([readonly]):focus {
+    box-shadow: inset 0 0 0 2px var(--fg-light-color);
   }
 }
 
@@ -528,7 +529,7 @@ input[type="checkbox"] {
   display: none;
 
   &,
-  & + label {
+  &+label {
     vertical-align: middle;
     cursor: pointer;
 
@@ -547,7 +548,7 @@ input[type="checkbox"] {
     }
   }
 
-  &:checked + label:before {
+  &:checked+label:before {
     background-color: var(--ac-color);
     border-color: var(--ac-color);
     color: var(--act-color);
@@ -732,7 +733,7 @@ div.tab {
   display: none;
 }
 
-input[type="radio"] + label {
+input[type="radio"]+label {
   padding: 8px 16px;
   border-bottom: 2px solid transparent;
   cursor: pointer;
@@ -743,11 +744,11 @@ input[type="radio"] + label {
   }
 }
 
-input[type="radio"]:checked + label {
+input[type="radio"]:checked+label {
   border-color: var(--fg-color);
 }
 
-input[type="radio"]:checked + label + div.tab {
+input[type="radio"]:checked+label+div.tab {
   display: block;
 }
 

components/collections/index.vue

@@ -51,7 +51,11 @@ TODO:
           <i class="material-icons">import_export</i>
           <span>Import / Export</span>
         </button>
-        <a href="https://github.com/liyasthomas/postwoman/wiki/Collections" target="_blank">
+        <a
+          href="https://github.com/liyasthomas/postwoman/wiki/Collections"
+          target="_blank"
+          rel="noopener"
+        >
           <button class="icon" v-tooltip="'Wiki'">
             <i class="material-icons">help</i>
           </button>

pages/index.vue

@@ -300,9 +300,9 @@
                 @click="copyRequestCode"
                 id="copyRequestCode"
                 ref="copyRequestCode"
+                v-tooltip="'Copy code'"
               >
                 <i class="material-icons">file_copy</i>
-                <span>Copy</span>
               </button>
             </div>
           </div>
@@ -1510,17 +1510,14 @@ export default {
       }
     },
     copyRequestCode() {
-      this.$refs.copyRequestCode.innerHTML =
-        this.doneButton + "<span>Copied</span>";
+      this.$refs.copyRequestCode.innerHTML = this.doneButton;
       this.$toast.success("Copied to clipboard", {
         icon: "done"
       });
       this.$refs.generatedCode.select();
       document.execCommand("copy");
       setTimeout(
-        () =>
-          (this.$refs.copyRequestCode.innerHTML =
-            this.copyButton + "<span>Copy</span>"),
+        () => (this.$refs.copyRequestCode.innerHTML = this.copyButton),
         1000
       );
     },