feat: ariaId, closes #379

Author: Akryum

docs-src/PageHome.vue

@@ -155,6 +155,7 @@
           :placement="placement"
           :auto-hide="isAutoHiding"
           :disabled="!isEnabled"
+          aria-id="test-popper-aria-id"
           open-class="is-open"
         >
           <button class="tooltip-target b3 popover-btn">Click me</button>

src/components/Popover.vue

@@ -165,6 +165,10 @@ export default {
       type: [String, Array],
       default: () => directive.options.popover.defaultOpenClass,
     },
+
+    ariaId: {
+      default: null,
+    },
   },
 
   data () {
@@ -182,7 +186,7 @@ export default {
     },
 
     popoverId () {
-      return `popover_${this.id}`
+      return `popover_${this.ariaId != null ? this.ariaId : this.id}`
     },
   },
 

src/lib/tooltip.js

@@ -51,6 +51,7 @@ export default class Tooltip {
    *      [offset docs](https://popper.js.org/popper-documentation.html)
    * @param {Object} options.popperOptions={} - Popper options, will be passed directly to popper instance. For more information refer to Popper.js'
    *      [options docs](https://popper.js.org/popper-documentation.html)
+   * @param {string} [options.ariaId] Id used for accessibility
    * @return {Object} instance - The generated tooltip instance
    */
   constructor (reference, options) {
@@ -221,7 +222,7 @@ export default class Tooltip {
     const tooltipNode = tooltipGenerator.childNodes[0]
 
     // add unique ID to our tooltip (needed for accessibility reasons)
-    tooltipNode.id = `tooltip_${Math.random().toString(36).substr(2, 10)}`
+    tooltipNode.id = this.options.ariaId || `tooltip_${Math.random().toString(36).substr(2, 10)}`
 
     // Initially hide the tooltip
     // The attribute will be switched in a next frame so