Flag dialogue is not fully accessible by keyboard in Chrome


(TechnoBear) #1

Use the ! key to flag a post. In Firefox, it is possible to tab through and activate options as one would expect.

In Chrome (Windows 7 & 8) and Chromium (Ubuntu 15.04), tab goes from “off-topic” > the community guidelines link > Spam - then it goes to the browser URL bar, and the last two options are unreachable. “Inappropriate” is only reachable by using ShiftTab from the community guidelines link.

Happens on our instance, and here on Meta.

(cpradio) #2

So to give background, as this actually happens in the latest Chrome stable build too.

When the flag dialog appears, the Off Topic radio button has focus (which is cool), then when you press tab, it jumps to “our community guidelines”, then to any active buttons and if there aren’t any, to “It’s Spam”, then to the address bar.

It is skipping It’s appropriate radio button, Message …user…, and Something Else.

I did uncover you can use up/down to toggle those radio buttons if your focus is on a radio button.

(Kane York) #3

Oh yeah, I think that that’s what the browser expects you to do with radio buttons. Does the dialog changing on selection of a radio button mess you up at all? Just tested - it looks weird, but no, it works just fine, as long as you don’t tab outside the textarea for PM/custom until you have enough characters.

(cpradio) #4

It is very possible that Chrome broke this. As it works well in Firefox, it fails on our Prod instance, fails on our Staging instance (running 1.4.0-beta2) and it fails here at Meta.

So with that knowledge… I’m not sure what options exist. Maybe when I get time to put more focus on this (I’ve bookmarked it to put it on my list), I can see if there is anything we can do to ease the pain (the up/down at least is a small workaround and even if you tab too soon, shift+tab puts you back in the textarea).

(cpradio) #5

Reproducible code-pen, this is definitely a Chrome problem

Can someone confirm that code pen works correctly in Firefox?

(TechnoBear) #6

Works OK for me. Really. Yes Indeed. (Are we there yet?)

(cpradio) #7

So that makes it a Chrome bug and not Discourse :frowning: That’s unfortunate. So without putting in a hack, there isn’t a clean way to fix this.

(TechnoBear) #8

(I couldn’t resist.)

(Jeff Atwood) #9

If the tab order is messed up here, we should fix it. Can you add this to your list @techapj?

(Arpit Jalan) #10

I was working on adding a tabindex for radio input and was nearly done with the fix, but even after adding the tabindex the radio options were inaccessible via tab key.

Then I came across this stackoverflow answer:

Essentially a radio button is a group that functions as a single element since it retains only a single value. Tabbing to a radio group will bring you to the first item and then using the arrow keys you navigate within the group.

So in case of radio button you will have to use and keys instead of tab.

(cpradio) #11

Yeah, that doesn’t surprise me (based on the codepen I wrote previously). It just seems Firefox does it better than Chrome in this case even though Chrome’s actions are not technically wrong.

Thanks for digging into it further though.