Tab trap op popup

[SideShow]

Hallo

Inzake usability zoek ik uit hoe bijvoorbeeld jQuery UI modal popup, erin slaagt om de <tab> toets in de popup zelf te houden; je kan er dus niet buiten geraken (zie de link in de tekst erachter), wat volgens de regels van de usability kunst ook zo hoort.

Ik heb al geprobeerd met aria-hidden en role attributen, maar dit maakt niks uit, toch niet voor de tab toets (wel voor bvb een screen reader)

Voor alle duidelijkheid, ik ben niet zozeer geïnteresseerd in de jQuery UI popup en hoe de plugin te gebruiken, maar wel in het technische html/css manier om dit zo een tab trap te bekomen.

[ Voor 6% gewijzigd door SideShow op 29-01-2015 19:54 ]

[lemnis]

Je moet detecteren wanneer iemand op de tab in drukt, daarna kun je met event.preventDefault() het standaard gedrag verwijderen.

voorbeeld: http://codepen.io/lemnis/pen/dPzjbr (klik eerste op div waar de button in staat, dit is nodig ivm het gebruik van iframes)

[ Voor 19% gewijzigd door lemnis op 29-01-2015 21:45 ]

[SideShow]

ik zat inderdaad in de verkeerde richting te zoeken
wat je zegt vind ik nu ook terug in https://github.com/jquery/jquery-ui/blob/master/ui/dialog.js
niks anders dan zelf het keypress event in handen nemen! :-)
bedankt

[R4gnax]

SideShow schreef op donderdag 29 januari 2015 @ 21:45:
ik zat inderdaad in de verkeerde richting te zoeken
wat je zegt vind ik nu ook terug in https://github.com/jquery/jquery-ui/blob/master/ui/dialog.js
niks anders dan zelf het keypress event in handen nemen! :-)
bedankt

Dat is niet 100% van hoe de jQuery UI dialog een tab trap opzet. Het is echt een stuk complexer dan dat, incl. alle browser quirks. Zo wordt in tandem met het afvangen van een keydown op de tab toets, ook een bubbling 'focusin' event op het document gebruikt. Daarin wordt gekeken of het element wat focus ontvangen heeft, wel in de openstaande dialog zit. Zo niet, wordt de focus programmatisch terug gezet op het eerste focusbare element in de dialog. (En als er geen focusbaar element is; op de dialog zelf.)

[SideShow]

Waarin verschilt jouw uitleg van "zelf het keypress event in handen nemen"?

[R4gnax]

SideShow schreef op vrijdag 30 januari 2015 @ 13:06:
Waarin verschilt jouw uitleg van "zelf het keypress event in handen nemen"?

Het feit dat het niet "niets anders dan" is.
Er komt nog flink wat meer bij kijken. Denk er niet te licht over.