Modal Accessiblity

Accessibility enhancements for modals

• Sets focus to modal on open
• Return focus on modal close
• ESC closes modal
• Isolates focus to modal when tabbing through elements

Example

CSS

    .modal {
        display: none;
        position: fixed;
        top: 20px;
        width: 400px;
        height: 300px;
        background-color: #EFEFEF;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .modal[data-open="1"] {
        display: block;
    }

HTML

<button class="toggle">Toggle</button>
<div class="modal" aria-modal="true">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</div>

Javascript

class Modal {
    constructor(modal) {
        this._open = false;
        this.modal = modal;
        this.accessibility = new ModalAccessibility(this.modal, () => {
            this.open = false;
        });

        document.querySelector('.toggle').addEventListener('click', (e) => {
            e.preventDefault();

            this.open = !this.open;
        });
    }

    get open() {
        return this._open;
    }

    set open(value) {
        this._open = value;

        if(value) {
            this.modal.setAttribute('data-open', 1)
            this.accessibility.open();
        } else {
            this.modal.setAttribute('data-open', 0)
            this.accessibility.close();
        }
    }
}

new Modal(document.querySelector('.modal'));