Day 49: Modal Completion

Published on 18 Jan 2019

• journal
• was
• javascript
• patterns
• techniques
• widgets

Back tracking to Day 41, I returned to the CodePen project I'd started in order to complete making it accessible. Due to unforeseen popularity of this pen (before I'd even completed it), I felt I needed to get all the pieces right.

My pen now meets the requirements that need to happen for a dialog/modal to be accessible. I even ran a quick test with VoiceOver on Safari, as well as keyboard navigability.

See the Pen Accessible Modal by Amy (@digilou) on CodePen.

Accessible Modals on CodePen

The two things I hadn't completed earlier involved:

• not allowing the user to Tab outside of the modal, and
• return focus back to the button that triggered the modal, once the modal is closed.

It was the Tab trap that was getting me. I knew the Tab key was associated with key code 9, but it took me a bit to realize I needed to attach an event listener of keydown to the close button. That solved it!

As for returning focus, it was as simple as adding the focus method onto open button within my closeModal function. It worked!