ChromeVox does not correctly read the aria-expanded attribute for a button wrapping an image

Question

When using a <button> or <a> tag which wraps another element, e.g. an <img>, the Chrome Screen Reader (ChromeVox) does not correctly read the current aria-expanded attribute value of the button if the user clicks on it with a mouse. (This is despite the javascript events firing and updating the attribute value correctly.) However using the cursors to navigate and click the button will correctly read the aria-expanded value.

E.g., for some html like this:

<button id="btn" aria-expanded="false" aria-controls="details">
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"></circle>
  </svg>
</button>

and some supporting javascript:

document.getElementById('btn').addEventListener("click", function(event) {
  expanded = this.getAttribute('aria-expanded') === 'true';           
  if (expanded) {
    this.setAttribute('aria-expanded', 'false');
  } else {
    this.setAttribute('aria-expanded', 'true');
  }
});

The screen reader will not read the current value of aria-expanded.

I've created a simple jsFiddle to demonstrate the problem here: https://jsfiddle.net/martynw/ebpyzkm4/4/

My guess is that the screenreader events are tied to the inner elements (image etc) of the button and do not bubble up to the button itself?

This problem seems particular to ChromeVox (tested in version 53.0.2784.14); it does seem to behave correctly in Safari + Apple VoiceOver.