0

To improve accessibility, I want to set the modal div with aria-hidden="false" only one which is focusable recursively, and prevent any focus outside the modal div.

I can do that with targeting the focus of elements (and prevent clicks by CSS), in the way when the focus moved outside of the modal, immediately refocus it back to the last focused element inside the modal.

I'm not sure if this is the best way, so I would like to receive other ideas.

For note, I do not like the way with setting tabindex="-1" to many elements, and I also tried to use element.blur() which did nothing.

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Sevi
  • 863
  • 4
  • 15
  • 33
  • 1
    Some answers here might help https://stackoverflow.com/questions/39514812/prevent-tabbing-of-elements-behind-an-overlay. Inert seems like it may get you your desired result https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert – p7dxb Aug 26 '23 at 20:10
  • @pilchard possible yes, the last 4 answers there. – Sevi Aug 26 '23 at 20:59
  • 2
    @p7dxb is also gave possible good solution with Inert. – Sevi Aug 26 '23 at 20:59
  • 1
    Also take a look at the [modal dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/). The [modal dialog example](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/) has [working javascript](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/#javascriptandcsssourcecode) that you can use – slugolicious Aug 26 '23 at 21:03
  • 1
    [Caniuse inert](https://caniuse.com/?search=inert) – mplungjan Aug 27 '23 at 07:54
  • Actually Inert is not the best solution yet, becasuse need to add and remove inert tag to many other elements, and in case if the modal is inside in another elements(Incorrectly written by previous developers), so need also work hierarchically which is more complex.. – Sevi Aug 27 '23 at 19:42

0 Answers0