From a1da433f8b7bb73e0224f5f8bda18c7109154a28 Mon Sep 17 00:00:00 2001
From: Joe Saraceno <josephasaraceno@gmail.com>
Date: Fri, 7 Feb 2020 12:51:28 -0700
Subject: [PATCH] Jsaraceno/media service video a11y (#40)

* add contextual title to the title tag on media service elements

* use text instead of element in the title attr

* bump package version
---
 packages/content/package-lock.json              |  2 +-
 packages/content/package.json                   |  2 +-
 packages/content/src/MediaServiceVideo/index.js | 10 ++++++----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/content/package-lock.json b/packages/content/package-lock.json
index 88c24e66..329f00da 100644
--- a/packages/content/package-lock.json
+++ b/packages/content/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@healthwise-ui/content",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/content/package.json b/packages/content/package.json
index 76a0b848..15537cf3 100644
--- a/packages/content/package.json
+++ b/packages/content/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@healthwise-ui/content",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Shared React UI library to use with Healthwise content.",
   "main": "index.js",
   "unpkg": "healthwise-ui.min.js",
diff --git a/packages/content/src/MediaServiceVideo/index.js b/packages/content/src/MediaServiceVideo/index.js
index f3f0761b..ad6dc6e6 100644
--- a/packages/content/src/MediaServiceVideo/index.js
+++ b/packages/content/src/MediaServiceVideo/index.js
@@ -107,12 +107,14 @@ class MediaServiceVideo extends Component {
     const videoUrl = `${mediaServiceUrl}/html/${mediaToken}/${videoParts.id}/${videoParts.lang}?autostart=false&rt=${mediaToken}&hash=${mediaHash}&disclaimer=false`
     let abstract = null
     let type = null
-    let title = null
+    let titleText = null
+    let titleElement = null
 
     if (!hideAbstract) {
       const dom = this.parseHtml(`<div>${item.html}</div>`)
       abstract = <SpanAbstract>{item.abstract.consumer}</SpanAbstract>
-      title = <H3Title>{dom.querySelector('h3').firstChild.nodeValue}</H3Title>
+      titleText = dom.querySelector('h3').firstChild.nodeValue
+      titleElement = <H3Title>{dom.querySelector('h3').firstChild.nodeValue}</H3Title>
     }
 
     if (!hideType) {
@@ -126,14 +128,14 @@ class MediaServiceVideo extends Component {
         }}
       >
         {type}
-        {title}
+        {titleElement}
         {abstract}
         <Video
           as="iframe"
           ref={el => {
             this.videoElement = el
           }}
-          title="Video"
+          title={`Play Video ${titleText}`}
           className={`hw-slide-video`}
           src={videoUrl}
           frameBorder="0"