iPhone: VoiceOver click event not being applied to <title> of aria-hidden SVG inside button

• Component: Accessibility
• Status: NEW ---

Created attachment 425620 [details]
Screenshot showing the button which is not functioning when VoiceOver is ON

We are having a responsive web application that can be accessed in all devices (Desktop, Mobile, Tablet). Here’s one blocker observed in our web application while accessed only on Mobile device with Voice Over on - 
 
       The click event is being applied to the <title> element inside the SVG, despite the SVG being marked at aria-hidden. And, the hit event is not bubbling up to the <button> like it should. This only happens when VoiceOver is on, when it's off the click event is applied to the <button> like we expect.
 
The attached Screenshot showing the button which is not functioning when VoiceOver is ON - 
 
Button markup:
 
<div class="mfp-wrap  mfp-close-btn-in mfp-align-top mfp-auto-cursor border-box-sizing special-offers mfp-ready" tabindex="-1" style="overflow: hidden scroll;" aria-label="Special Offers Sign Up" role="dialog">
<div class="mfp-container mfp-s-ready mfp-iframe-holder">
<div class="mfp-content" style="height: 676px;">
<div class="mfp-iframe-scaler"><div class="mfp-close-wrapper">
<div class="mfp-close-inner-wrapper">
<button class="mfp-close icon-no-text" data-test-id="mfp-close" aria-label="Close">
<svg class="svg-icon svg-icon-open-close" aria-hidden="true" tabindex="-1">
<use xlink:href="#icon-open-close" aria-hidden="true" tabindex="-1">
</use>
</svg>
</button>
</div>
</div>
<iframe class="mfp-iframe" src="https://book.princess.com/captaincircle/specialOfferRegistration.page?popupCondition=special-offers-button-click&amp;pageSection=headerbar&amp;formType=popup" frameborder="0" allowfullscreen="" title="Special Offers Sign Up">
</iframe>

[Radar WebKit Bug Importer]

<rdar://problem/76562853>