1331375 - [a11y] Can't navigate out of debugger content window using keyboard

Status: RESOLVED FIXED

(DevTools :: Debugger, defect)

Comment 1

[Nancy Pang [:npang]]

Attachment: Bug 1331375 - Can't navigate out of debugger content window using keyboard.

Review commit: https://reviewboard.mozilla.org/r/105286/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/105286/

Comment 2

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

Comment on attachment 8827665 [details]
Bug 1331375 - Can't navigate out of debugger content window using keyboard.

https://reviewboard.mozilla.org/r/105286/#review106298

* We need similar tests for styleeditor changes.
* Also regarding the debugger new stuff. I'm suspecting that this is an included version of debuggerh.html (https://github.com/devtools-html/debugger.html) and any changes in that code have to go upstream right now instead of gecko. Could you double check with someone in #devtools, maybe @gl knows.

::: devtools/client/debugger/new/debugger.js:35299
(Diff revision 1)
>  	      renderItem: this.renderItem
>  	    });
>  	
>  	    return dom.div({
>  	      className: "sources-list",
> -	      onKeyDown: e => {
> +	      onKeyDown: e => this.onKeyDown(e)

Not sure what this changes.. Doesn't the original onKeyDown function handle enter key the same way (if enter and focused item, select it)?

::: devtools/client/sourceeditor/editor.js:513
(Diff revision 1)
> +      e.preventDefault();
> +      codeWrapper.focus();
> +    } else if (key === "Enter" && target == codeWrapper){
> +      e.preventDefault();
> +      // Focus into editor's text area
> +      codeWrapper.firstChild.firstChild.focus();

This feels a little unsafe as markup underneath might change. Could you check if there's a useful selector in the component already or if not, make one?

Comment 3

[Nancy Pang [:npang]]

Comment on attachment 8827665 [details]
Bug 1331375 - Can't navigate out of debugger content window using keyboard.

https://reviewboard.mozilla.org/r/105286/#review106308

::: devtools/client/debugger/new/debugger.js:35299
(Diff revision 1)
>  	      renderItem: this.renderItem
>  	    });
>  	
>  	    return dom.div({
>  	      className: "sources-list",
> -	      onKeyDown: e => {
> +	      onKeyDown: e => this.onKeyDown(e)

Yep it does the exact same thing right now, was going to add aria-control to the focused item in the onKeyDown(selected) but I'll do that in the other bug

Comment 4

[Nancy Pang [:npang]]

Completed and merged in github repo https://github.com/devtools-html/debugger.html