[Webkit-unassigned] [Bug 224370] New: iPhone: VoiceOver click event not being applied to <title> of aria-hidden SVG inside button

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=224370

            Bug ID: 224370
           Summary: iPhone: VoiceOver click event not being applied to
                    <title> of aria-hidden SVG inside button
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: iPhone / iPad
                OS: iOS 14
            Status: NEW
          Severity: Blocker
          Priority: P2
         Component: UI Events
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: pbtanisha at gmail.com

Created attachment 425620

  --> https://bugs.webkit.org/attachment.cgi?id=425620&action=review

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&pageSection=headerbar&formType=popup" frameborder="0" allowfullscreen="" title="Special Offers Sign Up">
</iframe>

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20210409/1ab4fe17/attachment.htm>