Bug 254501

Summary:

AX: Voiceover Cursor has incorrect focus when element has transform: translate()

Product:

WebKit

Reporter:

Marcus <mlo+webkit>

Component:

Accessibility

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

andresg_22, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 16

Hardware:

Unspecified

OS:

macOS 13

Attachments:

Description	Flags
Screenshot of Voiceover Cursor's incorrect focus outline	none

Description Marcus 2023-03-27 00:00:18 PDT

Created attachment 465604 [details]
Screenshot of Voiceover Cursor's incorrect focus outline

Turn on Voiceover
Tab onto Button
Down / Up Arrow Keys or Tab to navigate
Note that the Black Voiceover Cursor is inaccurate.

Suspected to occur on some elements using transform: translate(), the voiceover cursor will then be offset based on the computed distance.
We would like to continue using transform: translate() in the dropdown menu over top / left positioning for performance benefits, but this current behaviour would be problematic for screenreader users who may rely on the Voiceover cursor.

This does not occur in Chrome nor Firefox.

See https://codesandbox.io/s/voiceover-webkit-bug-mfq8ks to try a demo. Changing the top / left value in the Container will change the Voiceover cursor's offset.

Comment 1 Radar WebKit Bug Importer 2023-03-27 00:00:27 PDT

<rdar://problem/107256063>