Maybe slightly better labeling for glossary HUDs?

This component is upsetting. Why does it apply `aria-describedby` do a random span? Does the <button> even do anything? :( :( :(

Author: AugustMiller

docs/.vuepress/theme/global-components/InfoHud.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="info-hud">
     <v-popover placement="right" :click="handleClick">
-      <button>
+      <button :title="activateLabel">
         <svg class="info-circle" viewBox="0 0 512 512">
           <path
             d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
@@ -30,6 +30,12 @@ export default {
       e.preventDefault();
     },
   },
+  props: {
+    activateLabel: {
+      type: String,
+      default: 'Open',
+    },
+  },
 };
 </script>
 

docs/.vuepress/theme/global-components/Term.vue

@@ -9,7 +9,7 @@
             :title="`${label} in the Glossary`"
             v-text="label"></a>
 
-        <InfoHud>
+        <InfoHud :activateLabel="triggerLabel">
             <template v-if="loaded">
                 <h3 class="glossary-term-heading" v-text="this.term.title"></h3>
                 <div class="glossary-term-content theme-default-content" v-html="this.term.summaryHtml"></div>
@@ -121,7 +121,10 @@ export default {
         },
         apiUrl() {
             return `${CRAFTCOM_BASE_URL}/api/glossary/${this.slug}`;
-        }
+        },
+        triggerLabel() {
+            return `Open definition for “${this.label}”`;
+        },
     },
     mounted() {},
     data() {