Bug 63463 - AX: Support HTML5 Canvas AX with hit regions
Summary: AX: Support HTML5 Canvas AX with hit regions
Alias: None
Product: WebKit
Classification: Unclassified
Component: Accessibility (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Charles Pritchard
Keywords: InRadar
Depends on:
Reported: 2011-06-27 09:06 PDT by Charles Pritchard
Modified: 2014-10-06 11:04 PDT (History)
6 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Charles Pritchard 2011-06-27 09:06:02 PDT
Currently, mobile safari treats Canvas as an untitled image. Activating pointer events on the element is difficult.

Related issue/patch for keyboard events:
Comment 1 James Craig 2013-04-15 16:38:45 PDT
Add a test case of accessible canvas example. Otherwise will have to close as insufficient information.
Comment 2 Charles Pritchard 2013-04-15 17:04:29 PDT
<canvas role="button" aria-describedby="button" onclick="button.onclick()">
<button id="button">I am a button</button>

Mobile Safari should support the new addHitRegion semantics:

<canvas id="canvas" role="application">
<button id="button">I am a button</button>

var ctx = canvas.getContext('2d');
ctx.addHitRegion({control: button});

Those two items should both work in VoiceOver with Mobile Safari to allow a user to drag their finger over the rectangle with VoiceOver reporting that the area is a button. In the latter case, only the first 100x100 pixels (the rect).
Comment 3 James Craig 2013-04-17 08:14:18 PDT
Please upload that as an HTML test case.
Comment 4 James Craig 2013-11-19 10:37:30 PST
Comment 5 James Craig 2013-11-19 11:23:05 PST
Note that button is a null reference in your partial example, I assume you meant to use document.getElementById('button');
Comment 6 Charles Pritchard 2014-05-29 08:25:19 PDT
Chrome (Blink):
Code review/patch (Blink):

Firefox (Gecko):

Please note the following code sample may be outdated. Will check back in a few weeks to see if Blink and Gecko have converged and have an example using a DOM element.

Code sample (from Firefox):

<canvas id="input"></canvas>

var ctx = input.getContext("2d");
ctx.rect(20, 20, 100, 75);
ctx.addHitRegion({id: "a"});

var regionId = "";
input.addEventListener('mousedown', function(evt){
 regionId = evt.region;
Comment 7 James Craig 2014-05-29 16:37:06 PDT
Please upload that as an HTML test case.