<amp-pinterest> Add alt attribute (#12862)

ampproject · Jan 24, 2018 · 13757d5 · 13757d5
1 parent ea3c4fe
commit 13757d5
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 4 deletions.
diff --git a/examples/pinterest.amp.html b/examples/pinterest.amp.html
@@ -26,7 +26,8 @@ <h3>Embedded Pins</h3>
 
     <amp-pinterest width=245 height=330
       data-do="embedPin"
-      data-url="https://www.pinterest.com/pin/99360735500167749/">
+      data-url="https://www.pinterest.com/pin/99360735500167749/"
+      alt="Hands making a heart over Pinterest logo">
     </amp-pinterest>
 
     <amp-pinterest width=355 height=410

diff --git a/extensions/amp-pinterest/0.1/pin-widget.js b/extensions/amp-pinterest/0.1/pin-widget.js
@@ -40,6 +40,7 @@ export class PinWidget {
     this.element = rootElement;
     this.xhr = Services.xhrFor(toWin(rootElement.ownerDocument.defaultView));
     this.pinId = '';
+    this.alt = '';
     this.pinUrl = '';
     this.width = '';
     this.layout = '';
@@ -110,12 +111,18 @@ export class PinWidget {
       'data-pin-log': 'embed_pin',
     }});
 
+    // If no alternate text is set, set it to the title gotten from the pin data
+    if (!this.alt && pin['attribution']) {
+      this.alt = pin['attribution']['title'];
+    }
+
     const img = Util.make(this.element.ownerDocument, {'img': {
       'src': imgUrl,
       'className': '-amp-pinterest-embed-pin-image',
       'data-pin-no-hover': true,
       'data-pin-href': 'https://www.pinterest.com/pin/' + pin['id'] + '/',
       'data-pin-log': 'embed_pin_img',
+      'alt': this.alt,
     }});
     container.appendChild(img);
 
@@ -237,6 +244,7 @@ export class PinWidget {
     this.pinUrl = this.element.getAttribute('data-url');
     this.width = this.element.getAttribute('data-width');
     this.layout = this.element.getAttribute('layout');
+    this.alt = this.element.getAttribute('alt');
 
     this.pinId = '';
     try {

diff --git a/extensions/amp-pinterest/0.1/test/test-amp-pinterest.js b/extensions/amp-pinterest/0.1/test/test-amp-pinterest.js
diff --git a/extensions/amp-pinterest/0.1/test/validator-amp-pinterest.html b/extensions/amp-pinterest/0.1/test/validator-amp-pinterest.html
@@ -50,7 +50,8 @@
       width=245
       height=330
       data-do="embedPin"
-      data-url="https://www.pinterest.com/pin/99360735500167749">
+      data-url="https://www.pinterest.com/pin/99360735500167749"
+      alt="Hands making heart over Pinterest logo">
   </amp-pinterest>
 </body>
 </html>
diff --git a/extensions/amp-pinterest/0.1/test/validator-amp-pinterest.out b/extensions/amp-pinterest/0.1/test/validator-amp-pinterest.out
@@ -51,7 +51,8 @@ PASS
 |        width=245
 |        height=330
 |        data-do="embedPin"
-|        data-url="https://www.pinterest.com/pin/99360735500167749">
+|        data-url="https://www.pinterest.com/pin/99360735500167749"
+|        alt="Hands making heart over Pinterest logo">
 |    </amp-pinterest>
 |  </body>
 |  </html>
diff --git a/extensions/amp-pinterest/amp-pinterest.md b/extensions/amp-pinterest/amp-pinterest.md
@@ -173,6 +173,10 @@ Must contain the fully-qualified URL of the Pinterest resource to be shown as a
 data-url="https://www.pinterest.com/pin/99360735500167749/"
 ```
 
+##### alt
+
+This property like the the `alt` attribute on an `<img>` tag specifies the alternate text. If not provided it will be infered from the pin data provided by the Pinterest API.
+
 ## Validation
 
 See [amp-pinterest rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-pinterest/validator-amp-pinterest.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-pinterest/validator-amp-pinterest.protoascii b/extensions/amp-pinterest/validator-amp-pinterest.protoascii
@@ -38,6 +38,7 @@ tags: {  # <amp-pinterest>
     name: "data-do"
     mandatory: true
   }
+  attrs: { name: "alt" }
   attr_lists: "extended-amp-global"
   spec_url: "https://www.ampproject.org/docs/reference/components/amp-pinterest"
   amp_layout: {