Magnific-Popup icon indicating copy to clipboard operation
Magnific-Popup copied to clipboard

Is there any need for tabindex?

Open Evandar276 opened this issue 11 years ago • 7 comments

Hi,

is there any real need of this attr('tabindex', -1) at line 218? It works same for me.

It breaks http://imperavi.com/redactor/ popups (make them unclickable) when redactor is in mfp.

Thank you for reply

Evandar276 avatar Jan 17 '14 21:01 Evandar276

Same issue here, but with edit popups on CKEditor. It's extremely weird, because I can click other form elements inside those popups (combo boxes…) but not text inputs.

Removing tabindex="-1" from mfp-wrap element fixes the issue.

juanghurtado avatar Feb 04 '14 12:02 juanghurtado

Same issue with Alertify plugin.

rodionme avatar Apr 25 '14 09:04 rodionme

The purpose of tabindex on mfp-wrap is quite simple - without it you can't focus modal properly and "tabbing" will be possible to elements outside of popup. It's explained quite good here http://www.nczonline.net/blog/2013/02/12/making-an-accessible-dialog-box/

Anyway, you may just reset it, for example in beforeOpen callback:

callbacks: {
    beforeOpen: function() {  this.wrap.removeAttr('tabindex') }
}

dimsemenov avatar Apr 25 '14 10:04 dimsemenov

How does one remove tabindex for all instances globally?

hifall avatar Mar 16 '16 14:03 hifall

tabindex should be removed. There is absolutely no need for it anymore in 2019. Setting it causes many issues in Firefox. This one happened to me with jQuery UI datepicker select dropdown:

https://stackoverflow.com/questions/29887850/jquery-ui-datepicker-month-year-dropdown-is-not-working-in-popup-in-latest-firef

Removed tabindex, and everything works fine now. I wrote my own modal library too, and I don't use tabindex anywhere. This causes all sorts of strange behavior. It really needs to be removed.

It is true that tabbing through elements may not work as desired, but that is much better than running into strange issues with Firefox. Too bad tabbing isn't prevented by z-index...

own3mall avatar Feb 12 '19 17:02 own3mall

The problem appears to be in Firefox only as shown in this fiddle:

http://jsfiddle.net/betfoz8j/4/

Try changing the year in the jQuery UI datepicker in that fiddle using Firefox. It won't work because it can't focus on the select which is rendered outside of the tabindex="-1" element.

See this bug here where discussion is taking place regarding this problem:

https://bugzilla.mozilla.org/show_bug.cgi?id=1468410

own3mall avatar Feb 12 '19 18:02 own3mall

The purpose of tabindex on mfp-wrap is quite simple - without it you can't focus modal properly and "tabbing" will be possible to elements outside of popup. It's explained quite good here http://www.nczonline.net/blog/2013/02/12/making-an-accessible-dialog-box/

Anyway, you may just reset it, for example in beforeOpen callback:

callbacks: {
    beforeOpen: function() {  this.wrap.removeAttr('tabindex') }
}

Thank you

sonimanthan228 avatar Feb 04 '21 20:02 sonimanthan228