Closed Bug 1271096 Opened 8 years ago Closed 8 years ago

[a11y] It's not possible to focus file names in console

Categories

(DevTools :: Console, defect, P2)

48 Branch
defect

Tracking

(firefox47 unaffected, firefox48 fixed, firefox49 verified)

VERIFIED FIXED
Firefox 49
Tracking Status
firefox47 --- unaffected
firefox48 --- fixed
firefox49 --- verified

People

(Reporter: arni2033, Assigned: bgrins)

References

(Blocks 1 open bug)

Details

(Keywords: access, regression)

Attachments

(1 file)

>>>   My Info:   Win7_64, Nightly 49, 32bit, ID 20160504043118
STR:
1. Open   data:text/html,<script>for(i=0;i<99;i++)console.log(i);</script>
2. Open console, focus filter field, hold Tab key for 5 seconds

AR:  File names in console stay unfocused
ER:  Focus should cycle through file names in console to allow accessibility

There's definitely a plan to improve devtools accessibility (e.g. bug 1242852), and I don't understand how nobody noticed this bug.

This is regression from bug 1251033. Regression range:
> https://hg.mozilla.org/integration/fx-team/pushloghtml?fromchange=fd24de5fb7db406838f419b4780f809cf012e0a1&tochange=f4d816caef1dec95e96a067ae8b797c6bb3cf866
Yura, I tried setting href: "#" on the <a> tag that's rendering this source link but for some reason it's still not tabbable (although there is an unnecessary container element that I can tab into on mac in between the console search box and the input field).  Here's the link: https://dxr.mozilla.org/mozilla-central/source/devtools/client/shared/components/frame.js#105.

Do you have any idea why we wouldn't be able to tab through source links (and/or should we be able to)?
Flags: needinfo?(yzenevich)
Priority: -- → P2
(In reply to Brian Grinstead [:bgrins] from comment #1)
> Yura, I tried setting href: "#" on the <a> tag that's rendering this source
> link but for some reason it's still not tabbable (although there is an
> unnecessary container element that I can tab into on mac in between the
> console search box and the input field).  Here's the link:
> https://dxr.mozilla.org/mozilla-central/source/devtools/client/shared/
> components/frame.js#105.
> 
> Do you have any idea why we wouldn't be able to tab through source links
> (and/or should we be able to)?

I tried setting href="#" for that anchor and (at least in osx) it was working for me just fine. Without href anchor's will not be tabbable unless (i think) tabindex is set on an element. Perhaps the issue is that on OSX the Full Keyboard Access setting is not set to All controls in Keyboard System Preferences?
Flags: needinfo?(yzenevich)
(In reply to Yura Zenevich [:yzen] from comment #2)
> (In reply to Brian Grinstead [:bgrins] from comment #1)
> > Yura, I tried setting href: "#" on the <a> tag that's rendering this source
> > link but for some reason it's still not tabbable (although there is an
> > unnecessary container element that I can tab into on mac in between the
> > console search box and the input field).  Here's the link:
> > https://dxr.mozilla.org/mozilla-central/source/devtools/client/shared/
> > components/frame.js#105.
> > 
> > Do you have any idea why we wouldn't be able to tab through source links
> > (and/or should we be able to)?
> 
> I tried setting href="#" for that anchor and (at least in osx) it was
> working for me just fine. Without href anchor's will not be tabbable unless
> (i think) tabindex is set on an element. Perhaps the issue is that on OSX
> the Full Keyboard Access setting is not set to All controls in Keyboard
> System Preferences?

Oh yep, that was it, thanks.  I was hoping that there was a way to do it without href because then you see 'chrome://devtools/.../webconsole.xul#' in the status text on the browser when hovering.
Comment on attachment 8756581 [details]
MozReview Request: Bug 1271096 - Make sure source links can be tabbed into;r=fitzgen

https://reviewboard.mozilla.org/r/55258/#review51980

::: devtools/client/shared/components/frame.js:106
(Diff revision 1)
>  
>      // If source is not a URL (self-hosted, eval, etc.), don't make
>      // it an anchor link, as we can't link to it.
>      if (isLinkable) {
>        sourceEl = dom.a({
> -        onClick,
> +        onClick: (e) => {

Nit: don't (hug) the parameters of unary arrow functions.
Attachment #8756581 - Flags: review?(nfitzgerald) → review+
(In reply to Brian Grinstead [:bgrins] from comment #3)
> (In reply to Yura Zenevich [:yzen] from comment #2)
> > (In reply to Brian Grinstead [:bgrins] from comment #1)
> > > Yura, I tried setting href: "#" on the <a> tag that's rendering this source
> > > link but for some reason it's still not tabbable (although there is an
> > > unnecessary container element that I can tab into on mac in between the
> > > console search box and the input field).  Here's the link:
> > > https://dxr.mozilla.org/mozilla-central/source/devtools/client/shared/
> > > components/frame.js#105.
> > > 
> > > Do you have any idea why we wouldn't be able to tab through source links
> > > (and/or should we be able to)?
> > 
> > I tried setting href="#" for that anchor and (at least in osx) it was
> > working for me just fine. Without href anchor's will not be tabbable unless
> > (i think) tabindex is set on an element. Perhaps the issue is that on OSX
> > the Full Keyboard Access setting is not set to All controls in Keyboard
> > System Preferences?
> 
> Oh yep, that was it, thanks.  I was hoping that there was a way to do it
> without href because then you see 'chrome://devtools/.../webconsole.xul#' in
> the status text on the browser when hovering.

Great, the downside of not have the href is that platform a11y will not identify that element as a link semantically. So the alternative (not a pretty one) could be an anchor without a href but with tabindex=0 and role="link"
(In reply to Yura Zenevich [:yzen] from comment #7)
> (In reply to Brian Grinstead [:bgrins] from comment #3)
> > Oh yep, that was it, thanks.  I was hoping that there was a way to do it
> > without href because then you see 'chrome://devtools/.../webconsole.xul#' in
> > the status text on the browser when hovering.
> 
> Great, the downside of not have the href is that platform a11y will not
> identify that element as a link semantically. So the alternative (not a
> pretty one) could be an anchor without a href but with tabindex=0 and
> role="link"

Interesting.  In this case I decided to set the URL to the actual source URL and then preventDefault when the click happens but we have plenty of other situations in the console where we are setting it to '#' so might need to test that out in Bug 1204278, for example.
See Also: → 1204278
Assignee: nobody → bgrinstead
Status: NEW → ASSIGNED
https://hg.mozilla.org/mozilla-central/rev/73817edbdfd6
Status: ASSIGNED → RESOLVED
Closed: 8 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 49
Affected:   Win7_64, Nightly 49, 32bit, ID 20160525063710 (2016-05-25)
Fixed on:   Win7_64, Nightly 49, 32bit, ID 20160526082509 (2016-05-26)
Status: RESOLVED → VERIFIED
Version: unspecified → 48 Branch
Hi Brian,
Since this patch also affects 48, are you also considering to uplift this patch to 48?
Flags: needinfo?(bgrinstead)
Comment on attachment 8756581 [details]
MozReview Request: Bug 1271096 - Make sure source links can be tabbed into;r=fitzgen

Approval Request Comment
[Feature/regressing bug #]: 1251033
[User impact if declined]: Source links in the web console are not keyboard accessible
[Describe test coverage new/current, TreeHerder]: New test to make sure the links have an href
[Risks and why]: It's a small frontend-only change within devtools (adding an attribute / event handler to source links).  The source link component is used across a few tools within the toolbox, not just the console
[String/UUID change made/needed]:
Flags: needinfo?(bgrinstead)
Attachment #8756581 - Flags: approval-mozilla-aurora?
Comment on attachment 8756581 [details]
MozReview Request: Bug 1271096 - Make sure source links can be tabbed into;r=fitzgen

Polish a feature, taking it
Attachment #8756581 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
 I have reproduced this bug with Nightly 49.0a1 (2016-05-04) on Windows 7 ,64 Bit!


 This bug's fix is verified on latest Developer Edition.

 Build ID  20160708004052

 User Agent  Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:49.0) Gecko/20100101 Firefox/49.0
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.