feat(locale): add aria and locale title (justinribeiro#1)

cshawaus · Nov 18, 2019 · 4b6a91b · 4b6a91b
1 parent 7bec194
commit 4b6a91b
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -10,6 +10,8 @@
 * It's fast yo.
 * It's Shadow Dom encapsulated!
 * It's responsive (just style it like you normally would with height and width and things)
+* It's accessible via keyboard and will set ARIA via the `videotitle` attribute
+* It's locale ready; you can set the `videoplay` to have a properly locale based label
 
 ## Install
 
@@ -30,24 +32,46 @@ After install, import into your project:
 import '@justinribeiro/lite-youtube';
 ```
 
-Finally, use as required:
+## Install with CDN
+
+If you want the paste-and-go version, you can simply load it via CDN:
 
 ```html
-<lite-youtube videoid="guJLfqTFfIw"></lite-youtube>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@0.2.0/lite-youtube.js">
 ```
 
-## Install with CDN
+## Basic Usage
 
-If you want the paste-and-go version, you can simply load it via CDN:
+```html
+<lite-youtube videoid="guJLfqTFfIw"></lite-youtube>
+```
+
+## Add Video Title
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@0.1.1/lite-youtube.js">
+<lite-youtube videoid="guJLfqTFfIw" videotitle="This is a video title"></lite-youtube>
 ```
 
-Finally, use as required:
+## Change "Play" for Locale</h3>
+```html
+<lite-youtube
+   videoid="guJLfqTFfIw"
+   videoplay="Mirar"
+   videotitle="Mis hijos se burlan de mi español">
+</lite-youtube>
+```
 
+## Style It
+Add a class or just style it directly. Height and Width are responsive in the container (there is a min-height requirement of 315px to make the basic embed work easier).
 ```html
-<lite-youtube videoid="guJLfqTFfIw"></lite-youtube>
+<style>
+  .styleIt {
+    width: 400px;
+    height: 400px;
+    margin: auto;
+  }
+</style>
+<lite-youtube class="styleIt" videoid="guJLfqTFfIw"></lite-youtube>
 ```
 
 ## Attributes
@@ -58,3 +82,5 @@ flexibility.
  | Name | Description | Default |
  | --- | --- | --- |
  | `videoid` | The YouTube videoid | ` ` |
+ | `videotitle` | The title of the video | `Video` |
+ | `videoplay` | The title of the play button (for translation) | `Play` |
diff --git a/demo/index.html b/demo/index.html
@@ -5,19 +5,60 @@
     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
     <title>lite-youtube demo</title>
     <script type="module" src="../lite-youtube.js"></script>
+    <style>
+      * {
+        box-sizing: content-box;
+      }
+      body {
+        width: 800px;
+        margin: auto;
+      }
+      pre {
+        width: 100%;
+        padding: 1em;
+        overflow-x: scroll;
+        background-clip: z;
+        background-color: #eee;
+      }
+      .styleIt {
+        width: 400px;
+        height: 400px;
+        margin: auto;
+      }
+    </style>
   </head>
   <body>
     <h3>Basic Usage</h3>
     <pre>
-      &lt;lite-youtube videoid=&quot;guJLfqTFfIw&quot;&gt;&lt;/lite-youtube&gt;
+
+&lt;lite-youtube videoid=&quot;guJLfqTFfIw&quot;&gt;&lt;/lite-youtube&gt;
     </pre>
     <lite-youtube videoid="guJLfqTFfIw"></lite-youtube>
 
+    <h3>Add Video Title</h3>
+    <pre>
+
+&lt;lite-youtube videoid=&quot;guJLfqTFfIw&quot; videotitle=&quot;This is a video title&quot;&gt;&lt;/lite-youtube&gt;
+    </pre>
+    <lite-youtube videoid="guJLfqTFfIw" videotitle="This is a video title"></lite-youtube>
+
+    <h3>Change "Play" for Locale</h3>
+    <pre>
+
+&lt;lite-youtube
+   videoid=&quot;guJLfqTFfIw&quot;
+   videoplay=&quot;Mirar&quot;
+   videotitle=&quot;Mis hijos se burlan de mi espa&ntilde;ol&quot;&gt;
+&lt;/lite-youtube&gt;
+    </pre>
+    <lite-youtube videoid="guJLfqTFfIw" videoplay="Mirar" videotitle="Mis hijos se burlan de mi español"></lite-youtube>
+
     <h3>Style It</h3>
     <p>Add a class or just style it directly. Height and Width are responsive in the container (there is a min-height requirement of 315px to make the basic embed work easier).</p>
     <pre>
-      &lt;lite-youtube videoid=&quot;guJLfqTFfIw&quot; style=&quot;width: 400px; height: 400px&quot;&gt;&lt;/lite-youtube&gt;
+
+&lt;style&gt;&#10;  .styleIt {&#10;    width: 400px;&#10;    height: 400px;&#10;    margin: auto;&#10;  }&#10;&lt;/style&gt;&#10;&lt;lite-youtube class=&quot;styleIt&quot; videoid=&quot;guJLfqTFfIw&quot;&gt;&lt;/lite-youtube&gt;
     </pre>
-    <lite-youtube videoid="guJLfqTFfIw" style="width: 400px; height: 400px"></lite-youtube>
+    <lite-youtube class="styleIt" videoid="guJLfqTFfIw"></lite-youtube>
   </body>
 </html>
diff --git a/lite-youtube.js b/lite-youtube.js
@@ -85,6 +85,7 @@ class LiteYTEmbed extends HTMLElement {
           opacity: 0.8;
           border-radius: 14%; /* TODO: Consider replacing this with YT's actual svg. Eh. */
           transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
+          border: 0;
         }
         #frame:hover .lty-playbtn {
           background-color: #f00;
@@ -114,16 +115,19 @@ class LiteYTEmbed extends HTMLElement {
         }
       </style>
       <div id="frame">
-        <div class="lty-playbtn"></div>
+        <button class="lty-playbtn"></button>
       </div>
     `;
     this.__domRefFrame = this.shadowRoot.querySelector('#frame');
+    this.__domRefPlayButton = this.shadowRoot.querySelector('.lty-playbtn');
   }
 
   setupComponent() {
     // Gotta encode the untrusted value
     // https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#rule-2---attribute-escape-before-inserting-untrusted-data-into-html-common-attributes
-    this.videoId = encodeURIComponent(this.getAttribute('videoid'));
+    this.videoId = encodeURIComponent( this.getAttribute( 'videoid' ) );
+    this.videoTitle = this.getAttribute( 'videotitle' ) || 'Video';
+    this.videoPlay = this.getAttribute('videoplay') || 'Play';
 
     /**
      * Lo, the youtube placeholder image!  (aka the thumbnail, poster image, etc)
@@ -146,6 +150,8 @@ class LiteYTEmbed extends HTMLElement {
     LiteYTEmbed.addPrefetch('preload', this.posterUrl, 'image');
     // TODO: support dynamically setting the attribute via attributeChangedCallback
     this.__domRefFrame.style.backgroundImage = `url("${this.posterUrl}")`;
+    this.__domRefPlayButton.setAttribute('aria-label', `${this.videoPlay}: ${this.videoTitle}`);
+    this.setAttribute('title', `${this.videoPlay}: ${this.videoTitle}`);
   }
 
   /**

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "url": "git@github.com:justinribeiro/lite-youtube.git"
   },
   "license": "MIT",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "main": "lite-youtube.js",
   "module": "lite-youtube.js",
   "keywords": [