docs(Api, RWExample): add a11y news props

Author: wochap

src-docs/app/pages/ExamplesRealWorldPage.vue

@@ -2,24 +2,35 @@
   <section class="c-main__sub-section">
     <h3 class="c-main__sub-heading u-gutter">Real world example</h3>
     <div class="c-item u-gutter">
+      <div class="c-item__description">
+        <ul>
+          <li>Custom width</li>
+          <li>Custom styles</li>
+          <li>a11y attributes</li>
+          <li>Listening to <code>closed</code> event</li>
+          <li>Listening to <code>opened</code> event</li>
+        </ul>
+      </div>
       <h5 class="c-item__sub-heading">Code:</h5>
       <div class="c-item__code-wrapper" v-html="snippets.rw01"></div>
       <h5 class="c-item__sub-heading">Result:</h5>
       <div class="c-play-around">
         <wv-off-canvas
-          overlay-background="transparent"
           class="nav"
           v-transfer-dom
-          width="20rem"
           wrap-ref="main"
           ref="nav"
+          overlay-background="transparent"
+          role="navigation"
+          aria-labelledby="title"
           @closed="onClose"
           @opened="onOpen"
         >
-          <h1>Navigation</h1>
+          <button v-off-canvas:toggle="nav">Close</button>
+          <h1 id="title">Navigation</h1>
           <a v-off-canvas:toggle="nav" href="https://wovue.github.io/off-canvas/#!/examples/real-world">Link to someplace</a>
         </wv-off-canvas>
-        <button v-off-canvas:toggle="nav" type="button">Open Nav</button>
+        <button v-off-canvas:toggle="nav" type="button">Open</button>
       </div>
     </div>
   </section>
@@ -39,10 +50,10 @@
     },
     methods: {
       onClose () {
-        window.alert('OffCanvas closed')
+        console.log('OffCanvas closed')
       },
       onOpen () {
-        window.alert('OffCanvas opened')
+        console.log('OffCanvas opened')
       }
     }
   }
@@ -52,6 +63,7 @@
   .nav {
     background-color: #400255;
     color: #ffffff;
+    max-width: 25rem;
     padding: 2rem 0;
     text-align: center;
   }

src-docs/app/pages/HomeApiPage.vue

@@ -85,17 +85,29 @@
                 default: '`"rgba(0, 0, 0, .5)"`',
                 description: 'Overlay background color.'
               }, {
-                name: 'closeOnEsc `new`',
+                name: 'closeOnEsc',
                 type: '`Boolean`',
                 required: 'false',
                 default: '`true`',
                 description: 'This determines if pressing the `esc` key will close the OffCanvas.'
               }, {
-                name: 'closeOnOutsideClick `new`',
+                name: 'closeOnOutsideClick',
                 type: '`Boolean`',
                 required: 'false',
                 default: '`true`',
                 description: 'This determines if clicking on the overlay will close the OffCanvas.'
+              }, {
+                name: 'role `new`',
+                type: '`String`',
+                required: 'false',
+                default: '`false`',
+                description: 'OffCanvas `role` attribute.'
+              }, {
+                name: 'ariaLabelledby `new`',
+                type: '`String`',
+                required: 'false',
+                default: '`false`',
+                description: 'OffCanvas `aria-labelledby` attribute.'
               }
             ],
             events: [

src-docs/app/snippets/example-rw-01.md

@@ -1,32 +1,35 @@
 ```html
-<div>
-  <wv-off-canvas-wrap ref="main">
-    <button v-off-canvas:toggle="nav">Open Nav</button>
-  </wv-off-canvas-wrap>
+<wv-off-canvas-wrap ref="main">
+  ...
+  <button v-off-canvas:toggle="nav">Open</button>
+  ...
+</wv-off-canvas-wrap>
 
-  <wv-off-canvas
-    class="nav"
-    ref="nav"
-    wrap-ref="main"
-    overlay-background="transparent"
-    @opened="onOpen"
-    @closed="onClose"
-  >
-    <h1>Navigation</h1>
-    <a v-off-canvas:toggle="nav">Link to someplace</a>
-  </wv-off-canvas>
-</div>
+<wv-off-canvas
+  class="nav"
+  ref="nav"
+  wrap-ref="main"
+  overlay-background="transparent"
+  role="navigation"
+  aria-labelledby="title"
+  @opened="onOpen"
+  @closed="onClose"
+>
+  <button v-off-canvas:toggle="nav">Close</button>
+  <h1 id="title">Navigation</h1>
+  <a v-off-canvas:toggle="nav">Link to someplace</a>
+</wv-off-canvas>
 ```
 
 ```js
 export default {
   // ...
   methods: {
     onOpen () {
-      window.alert('OffCanvas opened')
+      console.log('OffCanvas opened')
     },
     onClose () {
-      window.alert('OffCanvas closed')
+      console.log('OffCanvas closed')
     }
   }
 }
@@ -36,6 +39,7 @@ export default {
 .nav {
   background-color: #400255;
   color: #ffffff;
+  max-width: 25rem;
   padding: 2rem 0;
   text-align: center;
 }