[Webkit-unassigned] [Bug 66095] New: Invalid SVG highlighted regions on Safari w/VoiceOver

Thu Aug 11 14:00:51 PDT 2011

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

           Summary: Invalid SVG highlighted regions on Safari w/VoiceOver
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Unspecified
               URL: http://viewplus.com/downloads/htmltests/accessibility/
                    msafari-overlay-bug.xhtml
        OS/Version: Unspecified
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: Accessibility
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: courtney.christensen at viewplus.com

Created an attachment (id=103666)
 --> (https://bugs.webkit.org/attachment.cgi?id=103666&action=review)
iOS screenshot for example #1

A secondary, invalid accessibility overlay is generated at the wrong location for transformed SVG elements.

Live examples
--------------------
Two live examples can be found at:
  http://viewplus.com/downloads/htmltests/accessibility/msafari-overlay-bug.xhtml

The first test case shows inline SVG with page-level CSS padding applied. The second uses the `transform="translate(x,y)"` attribute on an SVG rect. Results are similar with both the desktop and mobile versions of Safari (see screenshots at link)

Details
--------------------
Elements can be made selectable by using `role="button"` (or similar). Transformed SVG elements create an additional, invalid selectable area at the untransformed location. Tapping/navigating-to the transformed SVG element incorrectly displays the highlighting rectangle at the untransformed location. Tapping/navigating-to this untransformed location (when nothing is highlighted) also displays the highlighting rectangle. This occurs with both CSS-based and SVG-based transformations.

To reproduce
--------------------
Code for example #1 (CSS-based error):

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <style type="text/css">
        body {
          padding: 25px;
        }
      </style>
    </head>
    <body>
      <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
        <rect x="50" y="50" width="50" height="50" role="button" aria-label="click me" />
      </svg>
    </body>
    </html>

Code for example #2 (`transform`-based error):

    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
      <rect x="0" y="0" width="50" height="50" 
        transform="translate(150, 150)"
        role="button" aria-label="click me"
      />
    </svg>

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.