{"type":"video","version":"1.0","html":"<iframe src=\"https://www.loom.com/embed/51892e0880d84ee8a79c5765123af051\" frameborder=\"0\" width=\"1716\" height=\"1287\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>","height":1287,"width":1716,"provider_name":"Loom","provider_url":"https://www.loom.com","thumbnail_height":1287,"thumbnail_width":1716,"thumbnail_url":"https://cdn.loom.com/sessions/thumbnails/51892e0880d84ee8a79c5765123af051-b4aea227ed1e2834.gif","duration":285.091,"title":"Enhancing Modal Dialog Accessibility","description":"In this video, I discuss the challenges we face with keyboard accessibility in modal dialogs and introduce a new \"dialog-position\" package published on NPM. I highlight how the native HTML  element simplifies focus management, which is now supported by around 96% of browsers globally. I also share a simple CSS style sheet that allows for flexible positioning of modal dialogs using data attributes. Please take a look at the demo I created to see how it works, and let me know your thoughts!"}