Bug 66095

Summary:

Invalid SVG highlighted regions on Safari w/VoiceOver

Product:

WebKit

Reporter:

Courtney Christensen <zourtney>

Component:

Accessibility

Assignee:

chris fleizach <cfleizach>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

cfleizach, eoconnor, thorton

Priority:

Keywords:

InRadar

Version:

528+ (Nightly build)

Hardware:

Unspecified

OS:

Unspecified

URL:

http://viewplus.com/downloads/htmltests/accessibility/msafari-overlay-bug.xhtml

Attachments:

Description	Flags
iOS screenshot for example #1	none
Example #1 source	none
Example #2 source	none
iOS screenshot for example #2	none

Courtney Christensen

Reported 2011-08-11 14:00:51 PDT

Created attachment 103666 [details] 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>

Attachments
iOS screenshot for example #1 (29.11 KB, image/png) 2011-08-11 14:00 PDT, Courtney Christensen	no flags	Details
Example #1 source (560 bytes, application/xhtml+xml) 2011-08-11 14:02 PDT, Courtney Christensen	no flags	Details
Example #2 source (360 bytes, image/svg+xml) 2011-08-11 14:02 PDT, Courtney Christensen	no flags	Details
iOS screenshot for example #2 (29.36 KB, image/png) 2011-08-11 14:03 PDT, Courtney Christensen	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Courtney Christensen

Comment 1 2011-08-11 14:02:16 PDT

Created attachment 103667 [details] Example #1 source

Courtney Christensen

Comment 2 2011-08-11 14:02:43 PDT

Created attachment 103669 [details] Example #2 source

Courtney Christensen

Comment 3 2011-08-11 14:03:07 PDT

Created attachment 103670 [details] iOS screenshot for example #2

chris fleizach

Comment 4 2011-08-11 14:20:54 PDT

rdar://9939761

chris fleizach

Comment 5 2012-09-20 11:07:02 PDT

*** This bug has been marked as a duplicate of bug 96168 ***

Note You need to log in before you can comment on or make changes to this bug.