From 1209b4ad16e6b08f426ce180085e5ba07e4d7b38 Mon Sep 17 00:00:00 2001
From: Priyam Mohanty <primoh@google.com>
Date: Mon, 2 Nov 2020 05:59:38 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=96=20Added=20title=20attribute=20to?=
 =?UTF-8?q?=20documentation=20pages=20+=20small=20amp-youtube=20fix=20(#30?=
 =?UTF-8?q?893)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Added title attribute to documentation pages + small youtube fix

* Missed some (optional)s

* Addressed comments
---
 extensions/amp-3d-gltf/amp-3d-gltf.md                         | 4 ++++
 extensions/amp-ad/amp-ad.md                                   | 4 ++++
 extensions/amp-beopinion/amp-beopinion.md                     | 4 ++++
 extensions/amp-bodymovin-animation/amp-bodymovin-animation.md | 4 ++++
 extensions/amp-embedly-card/amp-embedly-card.md               | 4 ++++
 extensions/amp-facebook-comments/amp-facebook-comments.md     | 4 ++++
 extensions/amp-facebook-like/amp-facebook-like.md             | 4 ++++
 extensions/amp-facebook-page/amp-facebook-page.md             | 4 ++++
 extensions/amp-facebook/amp-facebook.md                       | 4 ++++
 extensions/amp-gist/amp-gist.md                               | 4 ++++
 extensions/amp-ima-video/amp-ima-video.md                     | 4 ++++
 extensions/amp-mathml/amp-mathml.md                           | 4 ++++
 extensions/amp-reddit/amp-reddit.md                           | 4 ++++
 extensions/amp-twitter/amp-twitter.md                         | 4 ++++
 extensions/amp-viqeo-player/amp-viqeo-player.md               | 4 ++++
 extensions/amp-yotpo/amp-yotpo.md                             | 4 ++++
 extensions/amp-youtube/0.1/amp-youtube.js                     | 2 +-
 extensions/amp-youtube/amp-youtube.md                         | 4 ++++
 18 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/extensions/amp-3d-gltf/amp-3d-gltf.md b/extensions/amp-3d-gltf/amp-3d-gltf.md
index 4658f75f1748..73a0bf633071 100644
--- a/extensions/amp-3d-gltf/amp-3d-gltf.md
+++ b/extensions/amp-3d-gltf/amp-3d-gltf.md
@@ -100,6 +100,10 @@ center. To enable rotation, set the value to `true`. `autorotate` defaults to
 Use the `enableZoom` attribute to disable zooming in and out of the model. To
 disable zoom, set the value to `false`. `autororate` defaults to `true`.
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"GLTF 3D model"`.
+
 ## Actions
 
 ### setModelRotation
diff --git a/extensions/amp-ad/amp-ad.md b/extensions/amp-ad/amp-ad.md
index 94fcf5c62c53..5d129fbd71ae 100644
--- a/extensions/amp-ad/amp-ad.md
+++ b/extensions/amp-ad/amp-ad.md
@@ -237,6 +237,10 @@ parent of the ad. When the `data-ad-container-id` is specified, and such a
 the container component instead of the ad component during no fill. This feature
 can be useful when an ad indicator is in presence.
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Advertisement"`.
+
 ### common attributes
 
 This element includes
diff --git a/extensions/amp-beopinion/amp-beopinion.md b/extensions/amp-beopinion/amp-beopinion.md
index 031487a34d44..a7ea65648f3a 100644
--- a/extensions/amp-beopinion/amp-beopinion.md
+++ b/extensions/amp-beopinion/amp-beopinion.md
@@ -95,6 +95,10 @@ serving of ads outside of an `amp-ad` element.
 
 [/filter]<!-- formats="ads" -->
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"BeOpinion content"`.
+
 ## Styling
 
 BeOpinion does not currently provide an API that yields fixed aspect ratio for embedded contents. Currently, AMP automatically proportionally scales the content to fit the provided size, but this may yield less than ideal appearance. You might need to manually tweak the provided width and height. Also, you can use the `media` attribute to select the aspect ratio based on the screen width.
diff --git a/extensions/amp-bodymovin-animation/amp-bodymovin-animation.md b/extensions/amp-bodymovin-animation/amp-bodymovin-animation.md
index 809d3cb757b5..92a7659f733f 100644
--- a/extensions/amp-bodymovin-animation/amp-bodymovin-animation.md
+++ b/extensions/amp-bodymovin-animation/amp-bodymovin-animation.md
@@ -68,6 +68,10 @@ full player and want to use an HTML renderer they may do so by specifying the
 
 This attribute only accepts the values `html` and `svg`.
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Airbnb BodyMovin animation"`.
+
 ### Common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
diff --git a/extensions/amp-embedly-card/amp-embedly-card.md b/extensions/amp-embedly-card/amp-embedly-card.md
index 3f8d40b1f9f8..4dcbe79ba0a6 100644
--- a/extensions/amp-embedly-card/amp-embedly-card.md
+++ b/extensions/amp-embedly-card/amp-embedly-card.md
@@ -118,6 +118,10 @@ card container. Use `dark` to set this theme. For dark backgrounds it's better
 to specify this. The default is `light`, which sets no background color of the
 main card container.
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Embedly card"`.
+
 ### Common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
diff --git a/extensions/amp-facebook-comments/amp-facebook-comments.md b/extensions/amp-facebook-comments/amp-facebook-comments.md
index e5ffb789b8bd..eacd95c54a22 100644
--- a/extensions/amp-facebook-comments/amp-facebook-comments.md
+++ b/extensions/amp-facebook-comments/amp-facebook-comments.md
@@ -65,6 +65,10 @@ For details, see the
 The order to use when displaying comments. For details, see the
 [Facebook comments documentation](https://developers.facebook.com/docs/plugins/comments).
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Facebook comments"`.
+
 ### Common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
diff --git a/extensions/amp-facebook-like/amp-facebook-like.md b/extensions/amp-facebook-like/amp-facebook-like.md
index 40f362a08bf0..6ab1da96d05e 100644
--- a/extensions/amp-facebook-like/amp-facebook-like.md
+++ b/extensions/amp-facebook-like/amp-facebook-like.md
@@ -99,6 +99,10 @@ default is `small`.
 For details, see the
 [Facebook comments documentation](https://developers.facebook.com/docs/plugins/like-button#settings).
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Facebook like button"`.
+
 ### Common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
diff --git a/extensions/amp-facebook-page/amp-facebook-page.md b/extensions/amp-facebook-page/amp-facebook-page.md
index a28b4a35f072..81eaaed2f4cd 100644
--- a/extensions/amp-facebook-page/amp-facebook-page.md
+++ b/extensions/amp-facebook-page/amp-facebook-page.md
@@ -76,6 +76,10 @@ Hides the custom call to action button (if available). Default value is `false`.
 
 Uses the small header instead. Default value is `false`.
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Facebook page"`.
+
 ### Common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
diff --git a/extensions/amp-facebook/amp-facebook.md b/extensions/amp-facebook/amp-facebook.md
index 1bb5cf41f7d3..bb4ae4649070 100644
--- a/extensions/amp-facebook/amp-facebook.md
+++ b/extensions/amp-facebook/amp-facebook.md
@@ -114,6 +114,10 @@ specify a locale as well.
 For details on strings accepted here please visit the
 [Facebook API Localization page](https://developers.facebook.com/docs/internationalization).
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Facebook"`.
+
 ### Common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes)
diff --git a/extensions/amp-gist/amp-gist.md b/extensions/amp-gist/amp-gist.md
index 9cf173afa8f9..26a70c4995dc 100644
--- a/extensions/amp-gist/amp-gist.md
+++ b/extensions/amp-gist/amp-gist.md
@@ -78,6 +78,10 @@ resize to fit so that its contents will fit.
 
 If specified, display only one file in a gist.
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Github gist"`.
+
 ## Validation
 
 See [amp-gist rules](validator-amp-gist.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-ima-video/amp-ima-video.md b/extensions/amp-ima-video/amp-ima-video.md
index da14e2aeb888..ced9b2e168e3 100644
--- a/extensions/amp-ima-video/amp-ima-video.md
+++ b/extensions/amp-ima-video/amp-ima-video.md
@@ -95,6 +95,10 @@ A format string that looks like "Ad (%s of %s)", used to generate the ad disclos
 Requires `amp-video-docking` extension. If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area.
 For more details, see [documentation on the docking extension itself](https://amp.dev/documentation/components/amp-video-docking).
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"IMA video"`.
+
 ### Common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.
diff --git a/extensions/amp-mathml/amp-mathml.md b/extensions/amp-mathml/amp-mathml.md
index d50a037d3ba9..74ed82e2824a 100644
--- a/extensions/amp-mathml/amp-mathml.md
+++ b/extensions/amp-mathml/amp-mathml.md
@@ -72,6 +72,10 @@ Specifies the formula to render.
 
 If specified, the component renders inline (`inline-block` in CSS).
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"MathML formula"`.
+
 ## Validation
 
 See [amp-mathml rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-mathml/validator-amp-mathml.protoascii) in the AMP validator specification.
diff --git a/extensions/amp-reddit/amp-reddit.md b/extensions/amp-reddit/amp-reddit.md
index 92f26b707b5d..288de2f510c1 100644
--- a/extensions/amp-reddit/amp-reddit.md
+++ b/extensions/amp-reddit/amp-reddit.md
@@ -85,6 +85,10 @@ Use the `amp-reddit` component to embed a Reddit post or comment.
     <td width="40%"><strong>data-embedlive</strong></td>
     <td>Indicates whether the embedded comment should update if the original comment is updated. Supported when <code>data-embedtype</code> is <code>comment</code>.</td>
   </tr>
+  <tr>
+    <td width="40%"><strong>title</strong></td>
+    <td>Define a <code>title</code> attribute for the component. The default is <code>Reddit</code>.</td>
+  </tr>
   <tr>
     <td width="40%"><strong>common attributes</strong></td>
     <td>This element includes <a href="https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes">common attributes</a> extended to AMP components.</td>
diff --git a/extensions/amp-twitter/amp-twitter.md b/extensions/amp-twitter/amp-twitter.md
index d3b8920e5af5..76e662f46a87 100644
--- a/extensions/amp-twitter/amp-twitter.md
+++ b/extensions/amp-twitter/amp-twitter.md
@@ -131,6 +131,10 @@ For details on the available arguments, see the "Timelines" section in <a href="
     <td width="40%"><strong>data-* (optional)</strong></td>
     <td>You can specify options for the Tweet, Moment, or Timeline appearance by setting <code>data-</code> attributes. For example, <code>data-cards="hidden"</code> deactivates Twitter cards.
 For details on the available options, see Twitter's docs <a href="https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference">for tweets</a>, <a href="https://developer.twitter.com/en/docs/twitter-for-websites/moments/guides/parameter-reference0">for moments</a> and <a href="https://developer.twitter.com/en/docs/twitter-for-websites/timelines/guides/parameter-reference">for timelines</a>.</td>
+  </tr>
+   <tr>
+    <td width="40%"><strong>title (optional)</strong></td>
+    <td>Define a <code>title</code> attribute for the component. The default is <code>Twitter</code>.</td>
   </tr>
   <tr>
     <td width="40%"><strong>common attributes</strong></td>
diff --git a/extensions/amp-viqeo-player/amp-viqeo-player.md b/extensions/amp-viqeo-player/amp-viqeo-player.md
index e5162e6242a1..cb6cef436083 100644
--- a/extensions/amp-viqeo-player/amp-viqeo-player.md
+++ b/extensions/amp-viqeo-player/amp-viqeo-player.md
@@ -67,4 +67,8 @@ The `width` and `height` attributes determine the aspect ratio of the Viqeo embe
     <td width="40%"><strong>width and height</strong></td>
     <td>The width and height attributes are special for the Viqeo embed. Viqeo supports any proportions of videos. Basically Viqeo generates an unique code for each video depending on video size and proportions, but Viqeo user may change proportions in interface. Anyway after pressing 'Get code' button an unique code will be generated.</td>
   </tr>
+   <tr>
+    <td width="40%"><strong>title</strong></td>
+    <td>Define a <code>title</code> attribute for the component. The default is <code>Viqeo video</code>.</td>
+  </tr>
 </table>
diff --git a/extensions/amp-yotpo/amp-yotpo.md b/extensions/amp-yotpo/amp-yotpo.md
index b1996886c148..e658f50e3673 100644
--- a/extensions/amp-yotpo/amp-yotpo.md
+++ b/extensions/amp-yotpo/amp-yotpo.md
@@ -71,6 +71,10 @@ _Example: Display the reviews widget_
     <td width="40%"><strong>data-** (optional)</strong></td>
     <td>Each Yotpo widget has optional data attributes. For example, the reviews widget has an optional attribute named <code>product-id</code>. Refer to <a href="https://support.yotpo.com/en/on-site">Yottpo's documentation</a> for which attributes to specify.<br>
 When using the <code>amp-yotpo</code> extension, for each corresponding Yotpo attribute prepend <code>data</code> to the attribute. For example, the <code>product-id</code> attribute becomes <code>data-product-id</code>.</td>
+  </tr>
+   <tr>
+    <td width="40%"><strong>title (optional)</strong></td>
+    <td>Define a <code>title</code> attribute for the component. The default is <code>Yotpo widget</code>.</td>
   </tr>
   <tr>
     <td width="40%"><strong>common attributes</strong></td>
diff --git a/extensions/amp-youtube/0.1/amp-youtube.js b/extensions/amp-youtube/0.1/amp-youtube.js
index e08fcc71c55a..3ed8f04f3505 100644
--- a/extensions/amp-youtube/0.1/amp-youtube.js
+++ b/extensions/amp-youtube/0.1/amp-youtube.js
@@ -260,7 +260,7 @@ class AmpYoutube extends AMP.BaseElement {
   layoutCallback() {
     // See https://developers.google.com/youtube/iframe_api_reference
     const iframe = createFrameFor(this, this.getVideoIframeSrc_());
-    iframe.setAttribute('title', 'AMP YouTube video');
+    iframe.title = this.element.title || 'YouTube video';
 
     // This is temporary until M74 launches.
     // TODO(aghassemi, #21247)
diff --git a/extensions/amp-youtube/amp-youtube.md b/extensions/amp-youtube/amp-youtube.md
index a811f0ee5c7c..c57832366f49 100644
--- a/extensions/amp-youtube/amp-youtube.md
+++ b/extensions/amp-youtube/amp-youtube.md
@@ -118,6 +118,10 @@ If you want to use the [YouTube player in privacy-enhanced mode](http://www.goog
 
 Usually YouTube sets its cookies when the player is loaded. In privacy-enhanced mode cookies are set when the user has clicked on the player.
 
+### title (optional)
+
+Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"YouTube video"`.
+
 ### common attributes
 
 This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components.