1529687 - Add tests for object inspector keyboard navigation in console

Status: NEW

(DevTools :: Console, task, P3)

Description

[Yura Zenevich [:yzen] (please use "needinfo")]

Bug 1424159 fixed the issue with keyboard a11y in console trees but we also need to add a test to not regress.

Comment 1

[Dhruvi Butti]

Hey! As suggested, it would be great if I get to contribute here.
Thank you!
Dhruvi

Comment 2

[Yura Zenevich [:yzen] (please use "needinfo")]

Hi Dhruvi,

Here are some details:

The code changes that we want to test can be found in this patch:

https://phabricator.services.mozilla.com/D18592

What this change does is that it makes the object that is printed in the console keyboard accessible. Here's an example of steps to reproduce:

1. Open this url: data:text/html,<script>console.log({foo:"bar"});</script>
2. Open developer tools and the console panel
3. Notice that the last printed item in the console looks something like this: Object { foo: "bar" }
4. You probably need to press Shift + Tab twice until that item is highlighted (focused).
5. Once focused you can operate the object using Arrow keys: ArrowRight/ArrowLeft will expand/collapse tree items, ArrowUp/ArrowDown will change which tree item in the object tree is currently active.

This is essentially what we would want to test.

You can create a new file in: devtools/client/webconsole/test/mochitest and call it something like browser_webconsole_grip_keyboard_accessibility.js

You can look at some examples of how similar tests are written in:

• devtools/client/webconsole/test/mochitest/browser_webconsole_keyboard_accessibility.js
• devtools/client/webconsole/test/mochitest/browser_webconsole_object_inspector_entries.js

Please feel free to ask any questions!

Thanks!

Comment 3

[Dhruvi Butti]

Hey! I was trying an initial test to see what output do I get and what to exactly expect but on running the test I faced the following error :
./mach test devtools/client/webconsole/test/mochitest/browser_webconsole_grip_keyboard_accessibility.js
UNKNOWN TEST: devtools/client/webconsole/test/mochitest/browser_webconsole_grip_keyboard_accessibility.js
I was unable to find tests from the given argument(s).

You should specify a test directory, filename, test suite name, or
abbreviation. If no arguments are given, there must be local file
changes and corresponding IMPACTED_TESTS annotations in moz.build
files relevant to those files.

It's possible my little brain doesn't know about the type of test you are
trying to execute. If you suspect this, please request support by filing
a bug at
https://bugzilla.mozilla.org/enter_bug.cgi?product=Testing&component=General.

I tried looking at moz.build but it did not seem to clear anything. For the initial test, I just added some Test URI and everything from the two already written test suggested.

Thank you,
Dhruvi

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Hello Dhruvi,

The test file should be referenced in devtools/client/webconsole/test/mochitest/browser.ini. Then you'll be able to run it.

Comment 5

[Dhruvi Butti]

Hey! For focussing onto Object I need to give tab + shift using synthesizeKeyShortcut(). But I am not able to understand what parameters to pass here and how to focus on that object. Is this the right way to focus on the object? As I see
synthesizeKeyShortcut(clearShortcut) is used to give commands while the tests running.
Thank you,
Dhruvi

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

Hello Dhruvi, sorry I missed your question!
Make sure to use the needinfo field when you ask something so it's not lost in the bugmails :)

---

You can use EventUtils.synthesizeKey("KEY_Tab", {shiftKey: true}); to do a Shift + Tab in a test. Hope it helps!

Comment 7

[Yura Zenevich [:yzen] (please use "needinfo")]

(In reply to Dhruvi Butti from comment #5)

Hey! For focussing onto Object I need to give tab + shift using synthesizeKeyShortcut(). But I am not able to understand what parameters to pass here and how to focus on that object. Is this the right way to focus on the object? As I see
synthesizeKeyShortcut(clearShortcut) is used to give commands while the tests running.
Thank you,
Dhruvi

Hi Dhruvi, also could you check the "Need more information from" checkbox when you comment/ask a question (at the bottom of the bug), selecting me or Nicolas using the search in the input field. Otherwise we will probably miss your comment. Thanks!

Comment 8

[Patrick Brosset <:pbro>]

Hi Dhruvi: just checking if you need more time to work on this bug, which is fine.
If you, however, do not plan on working on this anymore, please let us know so the bug can be made available for others to claim.

Comment 9

[Patrick Brosset <:pbro>]

Unassigning the bug now

Comment 10

[colin.cazabet]

Hello,

I would be happy to work on this.

Thank you,
Colin