feat(accessibility): support for title and description in svg-icon[#10

]
nuxt-modules · Feb 13, 2019 · 0119fae · 0119fae
1 parent d447021
commit 0119fae
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 14 deletions.
diff --git a/demo/pages/index.vue b/demo/pages/index.vue
@@ -1,17 +1,17 @@
 <template>
   <div>
     <div>
-      <svg-icon name="nuxtjs" width="150px" height="150px" />
+      <svg-icon name="nuxtjs" title="Nuxt.js" :desc="aboutNuxt" width="150px" height="150px" />
     </div>
     <div>
-      <svg-icon name="dreams/zantagle-moon" width="150px" height="150px" />
-      <svg-icon name="dreams/Nursery_Unicorn_7946" width="150px" height="150px" />
-      <svg-icon name="dreams/Beautiful_Little_Girl_7881" width="150px" height="150px" />
+      <svg-icon name="dreams/zantagle-moon" title="Zantagle Moon" width="150px" height="150px" />
+      <svg-icon name="dreams/Nursery_Unicorn_7946" title="Nursery Unicorn" width="150px" height="150px" />
+      <svg-icon name="dreams/Beautiful_Little_Girl_7881" title="Beautiful Little Girl" width="150px" height="150px" />
     </div>
     <div>
-      <svg-icon name="love/Bee Mine" width="150px" height="150px" />
-      <svg-icon name="love/Hugs And Kisses" width="150px" height="150px" />
-      <svg-icon name="love/Love" width="150px" height="150px" />
+      <svg-icon name="love/Bee Mine" title="Bee Mine" width="150px" height="150px" />
+      <svg-icon name="love/Hugs And Kisses" title="Hugs And Kisses" width="150px" height="150px" />
+      <svg-icon name="love/Love" title="Love" width="150px" height="150px" />
     </div>
     <div class="copyright">
       photos by <a href="https://lovesvg.com" rel="noopener">
@@ -21,6 +21,16 @@
   </div>
 </template>
 
+<script>
+export default {
+  data() {
+    return {
+      aboutNuxt: 'Nuxt.js presets all the configuration needed to make your development of a Vue.js application enjoyable.'
+    }
+  }
+}
+</script>
+
 <style>
 body {
     text-align: center;

diff --git a/lib/plugin.js b/lib/plugin.js
@@ -13,6 +13,14 @@ const svgIcon = {
     name: {
       type: String,
       required: true
+    },
+    title: {
+      type: String,
+      default: null
+    },
+    desc: {
+      type: String,
+      default: null
     }
   },
   computed: {
@@ -29,17 +37,20 @@ const svgIcon = {
     }
   },
   render(h) {
+    const use = h('use', {
+      attrs: {
+        'xlink:href': this.icon
+      }
+    })
+    const title = this.title ? h('title', this.title) : null
+    const desc = this.desc ? h('desc', this.desc) : null
     return h('svg', {
       attrs: {
         xmlns: 'http://www.w3.org/2000/svg'
       }
-    }, [
-      h('use', {
-        attrs: {
-          'xlink:href': this.icon
-        }
-      })
-    ])
+    },
+    [ title, desc, use ].filter(Boolean)
+    )
   }
 }