Keyboard Navigation

The keyboard navigation of the Dialog is always available.

When the Dialog is opened, the initial focus is set on the Dialog element. This approach enables the user to immediately select or navigate between the action buttons by using the Tab and Shift+Tab keys, and to close the Dialog with the Esc button.

SHORTCUT DESCRIPTION
Esc Calls the onClose event handler.
Shift+Tab Moves the focus to the previous focusable element.
Tab Moves the focus to the next focusable element.

The following example is based on the official accessibility standard for a modal dialog.

<div id="vueapp" class="vue-app">
            <div>
               <span v-if="!visibleDialog">
                      <button class="k-button" @click="toggleDialog">Open Dialog</button>
                  </span>
              <k-dialog v-if="visibleDialog"
                :width="450"
                :height="300"
                @close="toggleDialog">
                  <p :style="{ margin: '25px', textAlign: 'center' }">Add Delivery Address</p>
                   <div>
                        <div>
                            <label>
                                <span :style='{ display: "inline-block", width: "50px", textAlign: "right", paddingRight: "0.5em" }'>Street:</span>
                                <input type="text" :style='{ width: "27em", maxWidth: "70%" }' />
                            </label>
                        </div>
                        <div>
                          <label>
                            <span :style='{ display: "inline-block", width: "50px", textAlign: "right", paddingRight: "0.5em" }'>City:</span>
                            <input type="text" :style='{ width: "27em", maxWidth: "70%" }'/>
                          </label>
                        </div>
                        <div>
                          <label>
                            <span :style='{ display: "inline-block", width: "50px", textAlign: "right", paddingRight: "0.5em" }'>State:</span>
                            <input type="text" :style='{ width: "27em", maxWidth: "70%" }'/>
                          </label>
                        </div>
                        <div>
                          <label>
                            <span :style='{ display: "inline-block", width: "50px", textAlign: "right", paddingRight: "0.5em" }'>Zip:</span>
                            <input type="text" :style='{ width: "27em", maxWidth: "70%" }'/>
                          </label>
                        </div>
                    </div>
                  <dialog-actions-bar>
                    <button class="k-button">Verify Address</button>
                    <button class="k-button">Add</button>
                    <button class="k-button k-primary">Cancel</button>
                  </dialog-actions-bar>
              </k-dialog>
          </div>
</div>
import { Dialog, DialogActionsBar } from '@progress/kendo-vue-dialogs';
Vue.component('k-dialog', Dialog);
Vue.component('dialog-actions-bar', DialogActionsBar);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            visibleDialog: true
        };
    },
    methods: {
      toggleDialog() {
          this.visibleDialog = !this.visibleDialog;
      }
    }
});

In this article