Canceling a dialog should return focus to the activating link


(Cameron Cundiff) #1

+ Create Topic”, when activated, brings up a dialog for post creation. Hitting escape returns keyboard focus to the top of the page. This is true with many of the dialog controls on various pages.

This may be a substantial inconvenience to keyboard only users, including those who are blind or who have motor impairments.


(Sam Saffron) #2

I can confirm this is the case, sane for the reply button, fix totally welcome.


(Jeff Atwood) #3

I am unclear, where should keyboard focus return to in these cases?


(Cameron Cundiff) #4

Canceling the action should return keyboard focus to the activating control
(Create Topic button in this case).


(Sam Saffron) #5

I am going to necro this for @cpradio our #1 keyboard user and @MarcoZehe our resident accessibility expert. The general issue here is “Tab” to “New Topic”, click ENTER, click ESC, focus is returned to element 0 in the page. Effectively you can not resume.

The exact same issue exists for the flag dialog and our other modal dialogs that we have.

What is the correct, expected, beaviour here?


(cpradio) #6

I’ll have to do some research with other sites. I can see the desire to be placed back where you were, I’m just uncertain that truly happens in most places.

pinging @TechnoBear for thoughts too.


(cpradio) #7

Okay, so this is frustrating to test, I do use keyboard navigation a lot, but more so the custom navigation j/k, etc. I rarely tab, as pressing ‘c’ to create a topic is faster than tabbing to the New Topic button.

Where the focus gets placed after a keyboard shortcut is used is far more important to me than where I land once it is over.

So without further ado, Youtube and Facebook both place focus at the top of the DOM when a modal window is closed. FYI, tabbing is Facebook sucks. It first takes you through the long menu on the left, then the ads on the right, then finally your news feed. I opened an image, which opened in a modal, pressed ESC, and hit tab again, only to find myself having to tab through the long list and ads all over again.

Youtube was similar. It started from the top and when I got to the Share feature (“Add To”), I pressed enter and opened up the modal window, I immediately hit ESC and then tabbed again, starting back at the top.

Is it ideal? No. But the alternative is very hacky to me. As you’d have to send the sender to the modal so it knows where to place focus after the modal is closed. However, that is also cumbersome, because I may have tabbed to a link in a post, but used the shortcut ‘!’ to initiate the flag modal for the given selected post. Therefore the focus would go back to the flag icon instead of the link I was actually on (see how it gets hackish?).

Can it be done? Sure. Is it worth the effort when just about every site sucks at it? Probably not.


(TechnoBear) #8

[quote=“cpradio, post:6, topic:10099”]
pinging @TechnoBear for thoughts too.
[/quote]Like @cpradio, I use shortcuts as far as possible, and only use Tab where I’ve no other option.

I’d be happy enough for focus to return to the top of the page. It does in Chromium, but in Firefox, it returns to the browser address bar, so I have to tab through the toolbar buttons, address bar, search box (and every search engine in the drop-down) etc. before finally arriving at the top of the page.

Keeping focus on the page - anywhere on the page - would be an improvement. :bear:

Currently Firefox 40 on Ubuntu Gnome 15.04 - but as far as I can recall, it’s always behaved like this.


(Marco Zehe) #9

The correct thing to do is to return keyboard focus to the element that invoked the modal dialog. In the case of the New Topic dialog, it’s the New Topic button, for example. Same goes for all other modal dialogs. They all have an element that invoked them, and keyboard focus must be returned to it after canceling. When closing the dialog and it results in a new action, like when finishing composing a new topic, the result can vary, but in general, focus should not remain in limbo afterwards.