vuejs: @keyup.esc on div element is not working

Question

I'm expecting that 'close' event is fired when I'm clicking ESC button being on "shadow-modal" div, but it's not happening

vue 2.5.13, any ideas why?

    <template>
      <div class="shadow-modal"
         @keyup.esc="$emit('close')">
        <transition name="modal">
          <div class="modal-mask">
            <div class="modal-wrapper">
              <div class="modal-container">
                <div class="modal-header">
                  <slot name="header">
                    default header
                  </slot>
                </div>
                <div class="modal-body">
                  <slot name="body">
                    default body
                  </slot>
                </div>
                <div class="modal-footer">
                  <slot name="footer">
                    <a href="#"
                       class="btn btn--diagonal btn--blue"
                       @click="$emit('close')">Cancel</a>
                  </slot>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </template>

Answer 1

While it's not input element that you're trying to bind the keyborad events, they will not work unless you define a tabindex:

<div class="shadow-modal" @keyup.esc="$emit('close')" tabindex="0">

Here's a reference: https://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR29.html