Ticket #4731 (closed feature: fixed)

Opened 5 years ago

Last modified 15 months ago

Dialog: Add option to set which element gains focus on open

Reported by: slolife Owned by:
Priority: minor Milestone: 1.10.0
Component: ui.dialog Version: 1.7.2
Keywords: redesign Cc:
Blocking: Blocked by:

Description

I have a jQuery UI dialog whose first tabbable element is an input textbox which is also a datepicker textbox.

So, when a user clicks on a link to open the dialog, the dialog UI code automatically sets the focus to the first element, which, in my case, triggers the datepicker widget to display as well. It is very confusing to the user.

Please add a config option to the dialog widget to disable the auto-focus feature if desired.

 StackOverflow discussion

Attachments

autofocusexample.htm Download (2.1 KB) - added by slolife 5 years ago.
Example of problem

Change History

Changed 5 years ago by slolife

Example of problem

comment:1 Changed 5 years ago by scott.gonzalez

  • Summary changed from Add option to dialog to prevent auto-focus of first tabbable element to Add option to set which element gains focus on open
  • Type changed from bug to enhancement
  • Milestone changed from TBD to 1.8

The option should let you set which element gains focus on open. If the specified element can't be found, the .ui-dialog element should be given focus. Not setting focus within the dialog would create an accessibility problem.

comment:2 Changed 5 years ago by htrex

On some application contexts I've a jQuery UI dialog that is shown automatically when the user selects some text.

If focus is changed automatically in any way the selection is immediately lost, that's not the application intended behaviour.

I agree too, Please add a config option to disable the auto-focus feature if desired.

comment:3 Changed 5 years ago by scott.gonzalez

Depends on #4957.

comment:4 Changed 4 years ago by ajcrews

Dialog: Added "focusSelector" option which will be used to focus the desired element when the dialog is opened. Fixed #4731 - Add option to set which element gains focus on open.

Change located at:  http://github.com/ajcrews/jquery-ui/commit/e4e5c297fc63943d745fdc4a3fef2394f025b2ac

#5767 is also bundled into that commit.

comment:7 Changed 4 years ago by scott.gonzalez

#6811 is a duplicate of this ticket.

comment:8 Changed 3 years ago by PlanetPratt

Has this update been lost? I've checked both 1.8.7 and 1.8.14 and neither appear to contain this fix.

(*Chris*)

comment:9 Changed 3 years ago by scott.gonzalez

Nothing has been lost. You'll notice this ticket is still open.

comment:10 Changed 3 years ago by PlanetPratt

Since the ticket is still open, is there any way that the first fallback (if the focusSelector isn't specified) could be to look for the element with the lowest tabindex? That would blend in nicely with standard HTML syntax.

(*Chris*)

comment:11 Changed 3 years ago by scott.gonzalez

That seems reasonable.

comment:12 Changed 3 years ago by scott.gonzalez

  • Keywords redesign added; dialog focus removed

comment:13 Changed 2 years ago by scott.gonzalez

  • Type changed from enhancement to feature

comment:14 Changed 23 months ago by scott.gonzalez

  • Milestone changed from 1.9.0 to 1.10.0

comment:15 Changed 23 months ago by petersendidit

  • Status changed from new to open
  • Summary changed from Add option to set which element gains focus on open to Dialog: Add option to set which element gains focus on open

comment:16 Changed 23 months ago by bolerao

There should be a simple option to just display the content and stay on top without automatic scrolling at all. Without a need to specify an "element" (tabbable element?). In the case I encountered this problem I just have a few links spread over the dialog content that are not intended to be clicked at all. It's variable content for debugging purposes that, by chance, includes fully qualified a href's. It drives me mad that the dialog scrolls down to them instead of staying on top. Each time I open the dialog I have to scroll it up. Similarly, another case might be that I use the dialog as a help dialog and provide information and then some links to more information. There is no reason to believe that the dialog should scroll down to the links, so that the reader cannot read parts of the help text anymore and has to actively scroll up. see example in http://bugs.jqueryui.com/ticket/8719

comment:17 Changed 22 months ago by Jörn Zaefferer

  • Status changed from open to closed
  • Resolution set to fixed

Dialog: Extend autofocus, starting with [autofocus], then :tabbable content, then buttonpane, then close button, then dialog. Fixes #4731 - Dialog: Add option to set which element gains focus on open

Changeset: b27db7e3b9a857b8f0890e91ae9c8a2d33bf9919

comment:18 follow-up: ↓ 19 Changed 17 months ago by Ult Combo

Sorry, but where is the feature to disable the autofocus behavior completely which has been asked for in this ticket?

In UI 1.10.2 I'm working around it with:

$.ui.dialog.prototype._focusTabbable = function(){};

comment:19 in reply to: ↑ 18 Changed 17 months ago by scott.gonzalez

Replying to Ult Combo:

Sorry, but where is the feature to disable the autofocus behavior completely which has been asked for in this ticket?

Go read comment #1 again...

comment:20 follow-up: ↓ 21 Changed 15 months ago by rcollette

Can someone explain why auto focusing on the first link provides accessibility? I have a dialog whose content comes from a content management system. Having to explain to the users that they have to insert a dummy hidden link in their content to prevent the dialog from scrolling down through the content is not user friendly. Sure I can prepend the content retrieved from the CMS with a link as well but this seems kludgy.

comment:21 in reply to: ↑ 20 Changed 15 months ago by tj.vantoll

Replying to rcollette:

Can someone explain why auto focusing on the first link provides accessibility? I have a dialog whose content comes from a content management system. Having to explain to the users that they have to insert a dummy hidden link in their content to prevent the dialog from scrolling down through the content is not user friendly. Sure I can prepend the content retrieved from the CMS with a link as well but this seems kludgy.

It's not necessarily the first link, per the code itself it's actually...

Set focus to the first match: 1. First element inside the dialog matching [autofocus] 2. Tabbable element inside the content element 3. Tabbable element inside the buttonpane 4. The close button 5. The dialog itself

Screen readers will announce when focus changes. If focus does not change when a dialog is opened then screen reader users will not know that it happened.

There are easier ways to prevent the dialog from scrolling than including a hidden link, see  http://jsbin.com/icuguz/12/edit. There's a ticket open to prevent the scrolling you're referring to: http://bugs.jqueryui.com/ticket/6006. We'd be happy to review a  pull request.

Note: See TracTickets for help on using tickets.