[web] Use "button" tag instead of "a" tag

web-src/src/components/ControlButton.vue

@@ -0,0 +1,22 @@
+<template>
+  <button
+    class="button is-small is-rounded"
+    :disabled="disabled"
+    @click="handler"
+  >
+    <mdicon v-if="icon" class="icon" :name="icon" size="16" />
+    <span v-if="label" v-text="$t(label)" />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'ControlButton',
+  props: {
+    disabled: { default: false, type: Boolean },
+    handler: { required: true, type: Function },
+    icon: { default: '', type: String },
+    label: { default: '', type: String }
+  }
+}
+</script>

web-src/src/components/ControlMainVolume.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="media is-align-items-center mb-0">
     <div class="media-left">
-      <a class="button is-small" @click="toggle">
+      <button class="button is-small" @click="toggle">
         <mdicon class="icon" :name="icon" />
-      </a>
+      </button>
     </div>
     <div class="media-content">
       <div class="is-size-7 is-uppercase" v-text="$t('navigation.volume')" />

web-src/src/components/ControlOutputVolume.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="media is-align-items-center mb-0">
     <div class="media-left">
-      <a
+      <button
         class="button is-small"
         :class="{ 'has-text-grey-light': !output.selected }"
         @click="toggle"
       >
         <mdicon class="icon" :name="icon" :title="output.type" />
-      </a>
+      </button>
     </div>
     <div class="media-content">
       <div

web-src/src/components/ControlStreamVolume.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="media is-align-items-center mb-0">
     <div class="media-left">
-      <a
+      <button
         class="button is-small"
         :class="{
           'has-text-grey-light': !playing && !loading,
@@ -10,7 +10,7 @@
         @click="togglePlay"
       >
         <mdicon class="icon" name="broadcast" />
-      </a>
+      </button>
     </div>
     <div class="media-content is-align-items-center">
       <div class="is-flex" :class="{ 'has-text-grey-light': !playing }">

web-src/src/components/ModalDialogPlayable.vue

@@ -4,12 +4,11 @@
       <list-properties :item="item">
         <template v-if="buttons.length" #buttons>
           <div class="buttons">
-            <a
+            <control-button
               v-for="button in buttons"
               :key="button.label"
-              class="button is-small is-rounded"
-              @click="button.handler"
-              v-text="$t(button.label)"
+              :handler="button.handler"
+              label="button.label"
             />
           </div>
         </template>
@@ -19,13 +18,14 @@
 </template>
 
 <script>
+import ControlButton from '@/components/ControlButton.vue'
 import ListProperties from '@/components/ListProperties.vue'
 import ModalDialog from '@/components/ModalDialog.vue'
 import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogPlayable',
-  components: { ListProperties, ModalDialog },
+  components: { ControlButton, ListProperties, ModalDialog },
   props: {
     buttons: { default: () => [], type: Array },
     item: { required: true, type: Object },