title: electron menu 'roles' don't seem to be working
body: <p>This is the standard code given as an example on the electron website for creating a custom menu: </p>
  
  <pre><code>    const template = [
    {
      label: 'Edit',
      submenu: [
        {role: 'undo'},
        {role: 'redo'},
        {type: 'separator'},
        {role: 'cut'},
        {role: 'copy'},
        {role: 'paste'},
        {role: 'pasteandmatchstyle'},
        {role: 'delete'},
        {role: 'selectall'}
      ]
    },
    {
      label: 'View',
      submenu: [
        {role: 'reload'},
        {role: 'forcereload'},
        {role: 'toggledevtools'},
        {type: 'separator'},
        {role: 'resetzoom'},
        {role: 'zoomin'},
        {role: 'zoomout'},
        {type: 'separator'},
        {role: 'togglefullscreen'}
      ]
    },
    {
      role: 'window',
      submenu: [
        {role: 'minimize'},
        {role: 'close'}
      ]
    },
    {
      role: 'help',
      submenu: [
        {
          label: 'Learn More'
        }
      ]
    }
  ]
  
  if (process.platform === 'darwin') {
    template.unshift({
      label: app.getName(),
      submenu: [
        {role: 'about'},
        {type: 'separator'},
        {role: 'services', submenu: []},
        {type: 'separator'},
        {role: 'hide'},
        {role: 'hideothers'},
        {role: 'unhide'},
        {type: 'separator'},
        {role: 'quit' }
      ]
    })
  
    // Edit menu
    template[1].submenu.push(
      {type: 'separator'},
      {
        label: 'Speech',
        submenu: [
          {role: 'startspeaking'},
          {role: 'stopspeaking'}
        ]
      }
    )
  
    // Window menu
    template[3].submenu = [
      {role: 'close'},
      {role: 'minimize'},
      {role: 'zoom'},
      {type: 'separator'},
      {role: 'front'}
    ]
  }
  
      const menu = Menu.buildFromTemplate(template)
      Menu.setApplicationMenu(menu);
  </code></pre>
  
  <p>However, this does not work properly.
  It does set my menu, however, all the fields are just blank, without any text.</p>
  
  <p>If I add labels, like so, this fixes the problem:</p>
  
  <pre><code>      {
          label: 'About',
          role: 'about'
        },
  </code></pre>
  
  <p>In the case of <code>about</code> the <code>role</code> attribute also works, i.e., when I click on the about menu item, a window pops up. However, the same is not the case with <code>quit</code></p>
  
  <pre><code>  {
      label: 'Quit',
      role: 'quit',
    }
  </code></pre>
  
  <p>Although the <code>role</code> is <code>quit</code> here, it does not quit my application, neither is it clickable at all. I could, of course, add all of this functionality myself, add labels to every sub item, functions, accelerators for short cuts, etc., but then I do not see the point of using <code>role</code> at all? </p>
  
  <p>Am I missing something, or is there a setting I need to consider before applying those attributes?</p>