fix(fab): fix fab accessibility issue

mdc-fab should not render <a> tag. align api on mdc-icon BREAKING CHANGE: use icon prop instead vs slot to set material icon content
stasson · Sep 30, 2017 · 4322914 · 4322914
1 parent d613339
commit 4322914
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 20 deletions.
diff --git a/components/fab/README.md b/components/fab/README.md
@@ -1,11 +1,9 @@
 ## Floating Action Buttons
 
 ```html
-  <mdc-fab>favorite</mdc-fab>
-  <mdc-fab mini>favorite</mdc-fab>
-  <mdc-fab plain>favorite</mdc-fab>
-  <mdc-fab mini plain>favorite</mdc-fab>
-  <mdc-fab plain fixed @click="scrollToTop">home</mdc-fab>
+  <mdc-fab icon="favorite"></mdc-fab>
+  <mdc-fab mini icon="favorite"></mdc-fab>
+  <mdc-fab fixed icon="favorite" @click="scrollToTop">home</mdc-fab>
 ```
 
 > refer to [Material Design Icon Font](https://material.io/icons/) for the list of icons 
@@ -26,6 +24,7 @@
 
 | prop | Type | Default | Description |
 |-------|------|---------|-------------|
+|`icon`|String || material-icon content (*)|
 |`mini`|Boolean|| mini style (40x40 pixels) (*)|
 |`absolute`| Boolean|| set bottom right absolute position (*)|
 |`fixed`| Boolean|| set bottom right fixed position (*)|
@@ -36,5 +35,25 @@
 > (*) initializer attribute, not dynamic propertie
 
 
+### Custom Icons
+
+> You can ommit the icon prop to render your custom icons 
+
+**Font Awsome**
+
+```html
+  <mdc-fab class="fa fa-star"></mdc-fab>
+```
+
+
+**SVG Icons**
+
+```html
+  <mdc-fab> 
+    <svg ...> 
+  </mdc-fab>
+```
+
+
 ### Reference
 - https://material.io/components/web/catalog/buttons/floating-action-buttons/
diff --git a/components/fab/mdc-fab.vue b/components/fab/mdc-fab.vue
@@ -1,31 +1,28 @@
 <template>
-  <a>
-    <button class="mdc-fab material-icons" :class="classes" :style="styles"
-      @click="dispatchEvent" >
-      <span class="mdc-fab__icon">
-        <slot>
-        </slot>
-      </span>
-    </button>
-  </a>
+  <button class="mdc-fab" :class="classes" :style="styles"
+    @click="dispatchEvent" >
+    <span class="mdc-fab__icon">
+      <slot>{{ icon }}</slot>
+    </span>
+  </button>
 </template>
 
-
-
 <script>
 import {RippleBase, DispatchEventMixin} from '../util'
 
 export default {
   name: 'mdc-fab',
   mixins: [DispatchEventMixin],
   props: {
+    icon: String,
     mini: Boolean,
     absolute: Boolean,
     fixed: Boolean
   },
   data () {
     return {
       classes: {
+        'material-icons': this.icon,
         'mdc-fab--mini': this.mini,
         'mdc-fab--absolute': this.absolute,
         'mdc-fab--fixed': this.fixed

diff --git a/components/icon/README.md b/components/icon/README.md
@@ -10,7 +10,7 @@
 
 | prop | Type | Description |
 |-------|------|-------------|
-|`icon`|string| material-icon content |
+|`icon`|String| material-icon content |
 
 ### Custom Icons
 

diff --git a/src/Doc.vue b/src/Doc.vue
@@ -73,9 +73,9 @@
 
           <mdc-subheading>Floating Action Button</mdc-subheading>
           <div  class="doc-center">
-            <mdc-fab>favorite</mdc-fab>
-            <mdc-fab mini>favorite</mdc-fab>
-            <mdc-fab fixed href="#">home</mdc-fab>
+            <mdc-fab icon="favorite"></mdc-fab>
+            <mdc-fab mini icon="favorite"></mdc-fab>
+            <mdc-fab fixed icon="home" @click="scrollToTop"></mdc-fab>
           </div>
 
           <mdc-subheading>Icon Toggle</mdc-subheading>