enh(VParallax): use an empty alt tag by default (#5643)

vuetifyjs · Dec 18, 2018 · 37044c8 · 37044c8
1 parent 05b11b3
commit 37044c8
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/packages/vuetify/src/components/VParallax/VParallax.ts b/packages/vuetify/src/components/VParallax/VParallax.ts
@@ -20,7 +20,10 @@ export default mixins<options & ExtractVue<typeof Translatable>>(Translatable).e
   name: 'v-parallax',
 
   props: {
-    alt: String,
+    alt: {
+      type: String,
+      default: ''
+    },
     height: {
       type: [String, Number],
       default: 500
@@ -78,13 +81,12 @@ export default mixins<options & ExtractVue<typeof Translatable>>(Translatable).e
       staticClass: 'v-parallax__image',
       style: this.styles,
       attrs: {
-        src: this.src
+        src: this.src,
+        alt: this.alt
       },
       ref: 'img'
     }
 
-    if (this.alt) imgData.attrs!.alt = this.alt
-
     const container = h('div', {
       staticClass: 'v-parallax__image-container'
     }, [

diff --git a/packages/vuetify/test/unit/components/VParallax/VParallax.spec.js b/packages/vuetify/test/unit/components/VParallax/VParallax.spec.js
@@ -22,4 +22,14 @@ test('VParallax.js', ({ mount }) => {
     expect(img.getAttribute('alt')).toBe('name')
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('should use empty alt tag when not supplied', async () => {
+    const wrapper = mount(VParallax, {
+      attachToDocument: true,
+    })
+
+    const img = wrapper.find('img')[0]
+    expect(img.getAttribute('alt')).toBe('')
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 })
diff --git a/packages/vuetify/test/unit/components/VParallax/__snapshots__/VParallax.spec.js.snap b/packages/vuetify/test/unit/components/VParallax/__snapshots__/VParallax.spec.js.snap
@@ -6,7 +6,8 @@ exports[`VParallax.js should render 1`] = `
      style="height: 500px;"
 >
   <div class="v-parallax__image-container">
-    <img class="v-parallax__image"
+    <img alt
+         class="v-parallax__image"
          style="display: block; opacity: 0;"
     >
   </div>
@@ -32,3 +33,20 @@ exports[`VParallax.js should use alt tag when supplied 1`] = `
 </div>
 
 `;
+
+exports[`VParallax.js should use empty alt tag when not supplied 1`] = `
+
+<div class="v-parallax"
+     style="height: 500px;"
+>
+  <div class="v-parallax__image-container">
+    <img alt
+         class="v-parallax__image"
+         style="display: block; opacity: 0;"
+    >
+  </div>
+  <div class="v-parallax__content">
+  </div>
+</div>
+
+`;