vue-wai-modal

vue-wai-modal

Features

Vue Modal is a component that adhere's to the W3C Web Accessibility Initiative and provides and easy way to impliment a modal.

If you do not have yarn you can download it here.

Instructions for global registration

yarn add @160over90/vue-wai-modal

Include in main.js (app entry point)

import VueWaiModal from '@160over90/vue-wai-modal';

Vue.use(VueWaiModal);

Instructions for editing this package

yarn install

Compiles and hot-reloads for development

yarn run serve

Examples

An simple example of implimenting the modal.

<template>
  <div id="app">
    <ModalButton :controls="'example-modal'">
      Open button
    </ModalButton>
    <ModalBackdrop
      :id="'example-modal'"
      :transitionProps="{ name: 'fade' }"
    >
      <ModalBackdropDialog
        :ariaLabel="'modal'"
        :ariaLabelledby="'open-modal'"
        class="ExampleComponent__dialog"
      >
        <h1
          class="ExampleComponent__content"
          v-text="'Modal Content'"
        />
        <ModalButton :controls="'example-modal'">
          Close button
        </ModalButton>
      </ModalBackdropDialog>
    </ModalBackdrop>
  </div>
</template>

Props

--- Modal Backdrop Component ---

id (String, Required) The ID that matches the button to the modal Backdrop

transition (String, Default: 'transition') Links to a transition component

transitionProps (Object, Default: () => ({})) Links to the name of the transition

:transitionProps="{ name: 'fade' }"

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

initiallyOpen (Boolean, Default: false) Page loads with modal already open

mode (String, Default: 'show', validate(value)) Checks for a v-if, v-show

closedFocus ([HTMLElement, String], Default: undefined)

--- Modal Backdrop Dialog ---

ariaLabel (String, Default: null) Used to define a string that labels the current element in cases where text is not visible on the screen

ariaLabelledby (String, Default: null) Establishes relationships between objects and their labels for assistive technology, such as screen readers

--- Modal Button ---

controls (String, Required) Links to the Backdrop ID (must be the same)

License

MIT