Part 2: Make element in a shadow DOM also handling accesskey
This is tracked by https://github.com/whatwg/html/issues/4385 standards-wise and
the tentative outcome from the standards discussion is that accesskey should work
across tree boundaries.
Differential Revision: https://phabricator.services.mozilla.com/D110426
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1037709
gecko-commit: 8bfe6426b2de41ed59ee332bfcb895cf7053a31a
gecko-reviewers: smaug
diff --git a/shadow-dom/accesskey.tentative.html b/shadow-dom/accesskey.tentative.html
new file mode 100644
index 0000000..c517830
--- /dev/null
+++ b/shadow-dom/accesskey.tentative.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Shadow DOM: accesskey</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/shadow-dom.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+</head>
+<body>
+<div id="log"></div>
+<div id="container" style="position: relative"></div>
+<script>
+
+const container = document.getElementById('container');
+
+function pressAccessKey(accessKey){
+ let controlKey = '\uE009'; // left Control key
+ let altKey = '\uE00A'; // left Alt key
+ let optionKey = altKey; // left Option key
+ let shiftKey = '\uE008'; // left Shift key
+ // There are differences in using accesskey across browsers and OS's.
+ // See: // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey
+ let isMacOSX = navigator.userAgent.indexOf("Mac") != -1;
+ let osAccessKey = isMacOSX ? [controlKey, optionKey] : [shiftKey, altKey];
+ let actions = new test_driver.Actions();
+ // Press keys.
+ for (let key of osAccessKey) {
+ actions = actions.keyDown(key);
+ }
+ actions = actions
+ .keyDown(accessKey)
+ .addTick()
+ .keyUp(accessKey);
+ osAccessKey.reverse();
+ for (let key of osAccessKey) {
+ actions = actions.keyUp(key);
+ }
+ return actions.send();
+}
+
+function testAccesskeyInShadowTree(mode) {
+ promise_test(async t => {
+ const host = document.createElement('div');
+ container.appendChild(host);
+ t.add_cleanup(() => host.remove());
+
+ const shadowRoot = host.attachShadow({mode});
+ shadowRoot.innerHTML = '<button id="button" accesskey="g">Click Me with Shift+Alt+g or on Mac with Control+Option+g</button>';
+
+ let el = shadowRoot.getElementById("button");
+ let eventWatcher = new EventWatcher(t, el, ['click']);
+ let waitForClick = eventWatcher.wait_for('click');
+
+ await pressAccessKey("g");
+ await waitForClick;
+ }, `button element with accesskey in the shadow tree of ${mode} mode`);
+}
+
+testAccesskeyInShadowTree("open");
+testAccesskeyInShadowTree("closed");
+
+</script>
+</body>
