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

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Thu Aug 11 14:00:51 PDT 2011


           Summary: Invalid SVG highlighted regions on Safari w/VoiceOver
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Unspecified
               URL: http://viewplus.com/downloads/htmltests/accessibility/
        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:

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)

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">
      <style type="text/css">
        body {
          padding: 25px;
      <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" />

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"

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

More information about the webkit-unassigned mailing list