This makes sense because when a dialog is open, a user is interacting only inside it and allowing the focus to escape outside the dialog would essentially be mixing contexts and possibly create a state where the user doesn’t know which element is in focus. To summarize, when inside a dialog, pressing Tab or Shift+Tab should cycle the focus within the dialog only-amongst the focusable elements inside the dialog. If focus is on the first tab-able element inside the dialog, moves focus to the last tab-able element inside the dialog.Moves focus to the previous tab-able element inside the dialog.If focus is on the last tab-able element inside the dialog, moves focus to the first tab-able element inside the dialog.

Moves focus to the next tab-able element inside the dialog.Safari has some weird issue where not all elements are focused while doing normal keyboard navigation with Tab key! What is focus trapping?įirst, a quote from the W3C documentation regarding what should happen following a keypress inside a dialog: While experimenting, I discovered a neat CSS trick on how to trap focus within the element, a common accessibility requirement for modals, and a notoriously difficult one.ĭisclaimer: The demos in this article are tested on Chrome and Firefox browsers only. Excited by this new UI element, I immediately sat down to experiment with it to see how it can be used effectively as a modal - the most common use of it. I recently read this article by Keith Grant which introduced the newly arrived.

Dont push the red button its a trap