Use <menu> element to represent dropdown menus

src/App.vue

@@ -72,7 +72,7 @@ html {
 body {
   background: $background-color;
   color: $text-color;
-  font-family: Arial, sans-serif;
+  font-family: $text-font;
   font-size: $text-font-size;
 }
 
@@ -104,7 +104,7 @@ textarea {
   box-shadow: none;
   box-sizing: border-box;
   color: $text-color;
-  font-family: Arial, sans-serif;
+  font-family: $text-font;
   font-size: $text-font-size;
   margin: 0;
   padding: 10px;
@@ -133,9 +133,15 @@ textarea {
 button {
   background-color: transparent;
   border: none;
+  color: $link-color;
   cursor: pointer;
+  font-family: $text-font;
   font-size: $text-font-size;
   padding: 0;
+
+  &:hover {
+    color: $link-hover-color;
+  }
 }
 
 .btn {
@@ -156,6 +162,10 @@ button {
   }
 }
 
+menu {
+  list-style: none;
+}
+
 header {
   background-color: $background-color;
   box-sizing: border-box;

src/components/Post.vue

@@ -141,38 +141,38 @@
         <button class="icon" title="More" @click="toggleMenu()">
           <img :src="require('@/assets/feather/more-horizontal.svg')">
         </button>
-        <ul v-if="menuVisible" class="dropdown-menu">
+        <menu v-if="menuVisible" class="dropdown-menu">
           <li v-if="canSaveToIpfs()">
-            <a
+            <button
               class="icon"
               title="Save to IPFS"
               @click="hideMenu(); saveToIpfs()"
             >
               <img :src="require('@/assets/ipfs.svg')">
               <span>Save to IPFS</span>
-            </a>
+            </button>
           </li>
           <li v-if="canMintToken()">
-            <a
+            <button
               class="icon"
               title="Mint NFT"
               @click="hideMenu(); mintToken()"
             >
               <img :src="require('@/assets/forkawesome/diamond.svg')">
               <span>Mint NFT</span>
-            </a>
+            </button>
           </li>
           <li v-if="canDeletePost()">
-            <a
+            <button
               class="icon"
               title="Delete post"
               @click="hideMenu(); deletePost()"
             >
               <img :src="require('@/assets/feather/trash.svg')">
               <span>Delete post</span>
-            </a>
+            </button>
           </li>
-        </ul>
+        </menu>
       </div>
       <div class="crypto-widget">
         <crypto-address
@@ -653,7 +653,7 @@ export default class PostComponent extends Vue {
 }
 
 .dropdown-menu-wrapper {
-  @include post-dropdown-menu;
+  @include block-dropdown-menu;
 }
 
 .crypto-widget {

src/components/PostEditor.vue

@@ -47,18 +47,18 @@
           >
             <visibility-icon :visibility="visibility"></visibility-icon>
           </button>
-          <ul v-if="visibilityMenuVisible" class="dropdown-menu">
+          <menu v-if="visibilityMenuVisible" class="dropdown-menu">
             <li v-for="[value, display] in visibilityMap" :key="value">
-              <a
+              <button
                 class="icon"
                 :title="display"
                 @click="hideVisibilityMenu(); visibility = value"
               >
                 <visibility-icon :visibility="value"></visibility-icon>
                 <span>{{ display }}</span>
-              </a>
+              </button>
             </li>
-          </ul>
+          </menu>
         </div>
         <div class="character-counter" title="Characters left">
           {{ characterCounter }}
@@ -293,7 +293,7 @@ textarea {
 }
 
 .dropdown-menu-wrapper {
-  @include post-dropdown-menu;
+  @include block-dropdown-menu;
 }
 
 .submit-btn-wrapper {

src/styles/_mixins.scss

@@ -87,10 +87,10 @@
   }
 }
 
-@mixin post-dropdown-menu {
+@mixin block-dropdown-menu {
   position: relative;
 
-  .dropdown-menu {
+  menu.dropdown-menu {
     background-color: $block-background-color;
     border: 1px solid $separator-color;
     border-radius: $btn-border-radius;

src/styles/_theme.scss

@@ -1,5 +1,6 @@
 /* color-to-filter converter https://codepen.io/sosuke/pen/Pjoqqp */
 
+$text-font: Arial, sans-serif;
 $text-font-size: 15px;
 $text-color: #333;
 $text-colorizer: invert(17%) sepia(0%) saturate(0%) hue-rotate(356deg) brightness(101%) contrast(91%);

src/views/Profile.vue

@@ -21,7 +21,7 @@
             <button title="More" @click="toggleProfileMenu()">
               <img :src="require('@/assets/feather/more-vertical.svg')">
             </button>
-            <ul v-if="profileMenuVisible" class="dropdown-menu">
+            <menu v-if="profileMenuVisible" class="dropdown-menu">
               <li v-if="!isLocalUser()">
                 <a
                   title="Open profile page"
@@ -42,50 +42,50 @@
                 </a>
               </li>
               <li v-if="isCurrentUser()">
-                <a
+                <button
                   title="Verify ethereum address"
                   @click="hideProfileMenu(); verifyEthereumAddress()"
                 >
                   Verify ethereum address
-                </a>
+                </button>
               </li>
               <li v-if="canConnectWallet()">
-                <a
+                <button
                   title="Connect wallet"
                   @click="hideProfileMenu(); connectWallet()"
                 >
                   Connect wallet
-                </a>
+                </button>
               </li>
               <li v-if="canConfigureSubscription()">
-                <a
+                <button
                   title="Set up subscription"
                   @click="hideProfileMenu(); configureSubscription()"
                 >
                   Set up subscription
-                </a>
+                </button>
               </li>
               <li v-if="canSubscribe()">
-                <a
+                <button
                   title="Pay for subscription"
                   @click="hideProfileMenu(); makeSubscriptionPayment()"
                 >
                   Pay for subscription
-                </a>
+                </button>
               </li>
               <li v-if="canHideReposts()">
-                <a @click="follow(false, undefined)">Hide reposts</a>
+                <button @click="follow(false, undefined)">Hide reposts</button>
               </li>
               <li v-if="canShowReposts()">
-                <a @click="follow(true, undefined)">Show reposts</a>
+                <button @click="follow(true, undefined)">Show reposts</button>
               </li>
               <li v-if="canHideReplies()">
-                <a @click="follow(undefined, false)">Hide replies</a>
+                <button @click="follow(undefined, false)">Hide replies</button>
               </li>
               <li v-if="canShowReplies()">
-                <a @click="follow(undefined, true)">Show replies</a>
+                <button @click="follow(undefined, true)">Show replies</button>
               </li>
-            </ul>
+            </menu>
           </div>
         </div>
         <div class="name-buttons-group">
@@ -574,7 +574,7 @@ $avatar-size: 170px;
   }
 
   .dropdown-menu-wrapper {
-    @include post-dropdown-menu;
+    @include block-dropdown-menu;
 
     /* stylelint-disable-next-line selector-max-compound-selectors */
     button img {