feat(#19): add optional alt to author image and rename imgUrl to imgSrc

deckgo · Dec 2, 2018 · dec46f3 · dec46f3
1 parent de62e65
commit dec46f3
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 9 deletions.
diff --git a/doc/slides/slides.md b/doc/slides/slides.md
@@ -364,7 +364,7 @@ The "Author" slide's Web Component could be integrated using the tag `<deckgo-sl
 
 ```
 <deckgo-deck>
-  <deckgo-slide-author img-url="/assets/author.jpeg">
+  <deckgo-slide-author img-src="/assets/author.jpeg" img-alt="My self">
     <h1 slot="title">Author</h1>
     <div slot="author">
       <h2>David</h2>
@@ -395,13 +395,14 @@ This component offers the following options which could be set using attributes:
 
 | Attribute                      | Type   | Default   | Description   |
 | -------------------------- |:-----------------:|:-----------------:|:-----------------:|
-| img-url | string |  | An image URI, for example a picture of the author. Note: this image will be displayed as a circle. |
+| img-src | string |  | An image URI, for example a picture of the author. Note: this image will be displayed as a circle. |
+| img-alt | string |  | An optional accessibility alt for the image. |
 
 #### Example
 
 ```
 <deckgo-deck>
-  <deckgo-slide-author img-url="/assets/author.jpeg">
+  <deckgo-slide-author img-src="/assets/author.jpeg">
     <div slot="author">
       <h2>David</h2>
       <p>Something about me</p>

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -91,11 +91,13 @@ export namespace Components {
 
   interface DeckgoSlideAuthor {
     'beforeSwipe': (_swipeLeft: boolean) => Promise<boolean>;
-    'imgUrl': string;
+    'imgAlt': string;
+    'imgSrc': string;
     'lazyLoadContent': () => Promise<void>;
   }
   interface DeckgoSlideAuthorAttributes extends StencilHTMLAttributes {
-    'imgUrl'?: string;
+    'imgAlt'?: string;
+    'imgSrc'?: string;
     'onSlideDidLoad'?: (event: CustomEvent<void>) => void;
   }
 

diff --git a/src/components/slides/deckdeckgo-slide-author/deckdeckgo-slide-author.tsx b/src/components/slides/deckdeckgo-slide-author/deckdeckgo-slide-author.tsx
@@ -14,7 +14,8 @@ export class DeckdeckgoSlideAuthor implements DeckdeckgoSlide {
 
   @Event() slideDidLoad: EventEmitter<void>;
 
-  @Prop() imgUrl: string;
+  @Prop() imgSrc: string;
+  @Prop() imgAlt: string;
 
   async componentDidLoad() {
     await DeckdeckgoUtils.hideLazyLoadImages(this.el);
@@ -38,7 +39,7 @@ export class DeckdeckgoSlideAuthor implements DeckdeckgoSlide {
     return <div class="deckgo-slide">
       <slot name="title"></slot>
       <div class="deckgo-slide-author deckgo-slide-author-start">
-        <img data-src={this.imgUrl}/>
+        <img data-src={this.imgSrc} alt={this.imgAlt}/>
       </div>
       <div class="deckgo-slide-author deckgo-slide-author-end">
         <slot name="author"></slot>

diff --git a/src/index.html b/src/index.html
@@ -20,7 +20,7 @@ <h1 slot="title">DeckDeckGo</h1>
     </p>
   </deckgo-slide-title>
 
-  <deckgo-slide-author img-url="https://secure.meetupstatic.com/photos/member/9/c/4/2/member_272620002.jpeg">
+  <deckgo-slide-author img-alt="David" img-src="https://secure.meetupstatic.com/photos/member/9/c/4/2/member_272620002.jpeg">
     <div slot="author">
       <h2>David Dal Busco</h2>
       <p>Founder of <a href="https://fluster.io">Fluster</a> and <a href="https://deckdeckgo.com">DeckDeckGo</a></p>
@@ -62,7 +62,7 @@ <h1 slot="title">DeckDeckGo</h1>
         <li>Bundles the presentation with an <strong>offline</strong> support</li>
       </ul>
 
-      <img data-src="https://deckdeckgo.com/assets/img/deckdeckgo.png" style="width: 50px"/>
+      <img tag="DeckDeckGo" data-src="https://deckdeckgo.com/assets/img/deckdeckgo.png" style="width: 50px"/>
     </div>
   </deckgo-slide-content>