Accessible Menus (broken)

by jorgeluis

HTML

<template id="menu-button">
  <div>
    <button aria-expanded="false" :aria-controls="menuId" @click="toggle($event)">{{ label }}</button>
    <div role="menu" :id="menuId" hidden>
      <menu-option v-for="option in options" :key="option.key" :url="option.key" :label="option.value" />
    </div>
  </div>
</template>

<template id="menu-option">
  <a role="menuitem" tabindex="-1" :href="url">{{ label }}</a>
</template>


<div id="app">
  <menu-button label="Dashboard" :options="dashboardOptions" />
  <menu-button label="Help" :options="helpOptions" />
</div>

JavaScript

Vue.component('menu-button', {
	template: '#menu-button',
  props: {
  	label: {
    	type: String
    },
    options: {
    	type: Array,
      default: function () {
	      return []
      }
    }
  },
  data () {
  	return {
    	expanded: false
  	}
  },
  computed: {
  	menuId () { return this.label + '-menu-list' }
  },
  methods: {
  	toggle (event) {
      let trigger = event.target
      let menu = trigger.nextElementSibling;
      trigger.expanded = !trigger.expanded;
    	menu.hidden = !menu.hidden;
    }
  }
});

Vue.component('menu-option', {
	template: '#menu-option',
  props: [
  	'label',
    'url'
  ]
});


var vm = new Vue({
  el: '#app',
  data () {
  	return {
      dashboardOptions: [
        { 'System': 'system' },
        { 'Events': 'events' }
      ],
      helpOptions: [
        { 'Articles': 'https://docs.stripe.com' },
        { 'Releases': 'https://giphy.com' }
      ]
    }
  }
});