Issue 8

docs/CHANGES.rst

@@ -4,7 +4,8 @@ There's a frood who really knows where his towel is
 1.0b4 (unreleased)
 ^^^^^^^^^^^^^^^^^^
 
-- Nothing changed yet.
+- Fix WCGA and W3C validation issues (iframes) (closes `#8`_).
+  [rodfersou]
 
 
 1.0b3 (2013-07-23)
@@ -70,3 +71,5 @@ There's a frood who really knows where his towel is
 ^^^^^^^^^^^^^^^^^^^
 
 - Initial release.
+
+.. _`#8`: https://github.com/simplesconsultoria/sc.embedder/issues/8

docs/CREDITS.rst

@@ -9,6 +9,7 @@ following people:
 - Héctor Velarde
 - João S. O. Bueno
 - Juan Pablo Giménez
+- Rodrigo Ferreira de Souza
 - `et alii`_
 
 Development sponsored by `Simples Consultoria`_.

src/sc/embedder/content/embedder.py

@@ -1,6 +1,7 @@
 # -*- coding:utf-8 -*-
 
 from lxml import etree, cssselect, html
+from lxml.html import builder as E
 
 from five import grok
 
@@ -232,6 +233,39 @@ def load_oembed(self, action):
                 json_data = self.get_fallback(url)
                 if json_data is None:
                     return
+
+            ## Acessibility issues
+            # Somethimes python-oembed don't return html attribute
+            # https://github.com/abarmat/python-oembed/blob/master/oembed/__init__.py#L150-L193
+            if json_data.has_key('html'):
+                iframe = html.fromstring(json_data['html'])
+                # Somethimes the embedded data will not be an iframe
+                if iframe.tag == 'iframe':
+                    # If there is not a title we put a placeholder to be reviewed by user
+                    if json_data.has_key('title'):
+                        title = json_data['title']
+                    else:
+                        title = _('ADD THE TITLE OF THE CONTENT HERE')
+                    iframe.attrib['title'] = title
+                    # Some iframe attributes are not valid anymore, second W3C
+                    # http://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element
+                    if iframe.attrib.has_key('frameborder'):
+                        del(iframe.attrib['frameborder'])
+                    if iframe.attrib.has_key('allowfullscreen'):
+                        del(iframe.attrib['allowfullscreen'])
+                    if iframe.attrib.has_key('mozallowfullscreen'):
+                        del(iframe.attrib['mozallowfullscreen'])
+                    if iframe.attrib.has_key('webkitallowfullscreen'):
+                        del(iframe.attrib['webkitallowfullscreen'])
+                    # WCGA 1.0 and 2.0 validators says that we must add an alternative content
+                    # as an anchor if iframe is not supported by the browser
+                    a = E.A()
+                    a.attrib['href'] = url
+                    a.text = title
+                    iframe.append(a)
+                    json_data['html'] = html.tostring(iframe)
+            ## Acessibility issues
+
             for k, v in self.tr_fields.iteritems():
                 if json_data.get(k):
                     self.widgets[v].value = unicode(json_data[k])
@@ -252,6 +286,11 @@ def set_custom_embed_code(self, data):
             el.attrib['width'] = data['width'] and str(data['width']) or el.attrib['width']
         if data.get('height', None):
             el.attrib['height'] = data['height'] and str(data['height']) or el.attrib['height']
+        if data.get('IDublinCore.title', None):
+            el.attrib['title'] = data['IDublinCore.title'] and unicode(data['IDublinCore.title']) or el.attrib['title']
+            a = [a for a in el.getchildren() if a.tag == 'a'] # get the anchor
+            if a:
+                a[0].text = data['IDublinCore.title']
 
         data['embed_html'] = html.tostring(el)
 

src/sc/embedder/tests/test_content.py

@@ -23,7 +23,23 @@
 YOUTUBE_EMBED = """
 <iframe width="459" height="344" \
 src="http://www.youtube.com/embed/d8bEU80gIzQ?feature=oembed" \
-frameborder="0" allowfullscreen></iframe>
+title="Introducing Plone">\
+<a href="http://www.youtube.com/watch?v=d8bEU80gIzQ">\
+Introducing Plone</a></iframe>
+""".strip('\n')
+
+VIMEO_EMBED = """
+<iframe src="http://player.vimeo.com/video/17914974" \
+width="1280" height="720" title="The Backwater Gospel">\
+<a href="http://vimeo.com/17914974">The Backwater Gospel</a></iframe>
+""".strip('\n')
+
+VIDEOJS_EMBED = """
+<iframe src="http://nohost/plone/test-folder/@@embedder_videojs?\
+src=http%3A%2F%2Fvideo-js.zencoder.com%2Foceans-clip.webm&amp;type=video%2Fwebm" \
+class="vjs-iframe" title="ADD THE TITLE OF THE CONTENT HERE">\n<a \
+href="http://video-js.zencoder.com/oceans-clip.webm">ADD THE TITLE OF THE CONTENT HERE\
+</a></iframe>
 """.strip('\n')
 
 
@@ -140,17 +156,13 @@ def test_vimeo_oembed(self):
 
         # We trigger the action of load
         add_form.handleLoad(add_form, action)
-        iframe = '<iframe src="http://player.vimeo.com/video/17914974" ' + \
-            'width="1280" height="720" frameborder="0" ' + \
-            'webkitAllowFullScreen mozallowfullscreen ' + \
-            'allowFullScreen></iframe>'
 
         self.assertEqual(
             u'The Backwater Gospel', add_form.widgets['IDublinCore.title'].value)
         self.assertEqual(
             417, len(add_form.widgets['IDublinCore.description'].value))
         self.assertEqual(
-            iframe, add_form.widgets['embed_html'].value)
+            VIMEO_EMBED, add_form.widgets['embed_html'].value)
         self.assertEqual(
             u'1280', add_form.widgets['width'].value)
         self.assertEqual(
@@ -196,10 +208,10 @@ def test_slideshare_oembed(self):
             u'<iframe src="http://www.slideshare.net/slideshow/embed_code/1464608"',
             add_form.widgets['embed_html'].value)
         self.assertIn(
-            u'width="427" height="356"',  # XXX: why these values?
+            u'width="100%" height="356"',  # XXX: why these values?
             add_form.widgets['embed_html'].value)
         self.assertIn(
-            u'<a href="http://www.slideshare.net/baekholt/plone-4-and-5-plans-and-progress"',
+            u'<a href="https://www.slideshare.net/baekholt/plone-4-and-5-plans-and-progress"',
             add_form.widgets['embed_html'].value)
         self.assertIn(
             u'title="Plone 4 and 5, plans and progress"',
@@ -274,15 +286,10 @@ def test_videojs(self):
 
         # We trigger the action of load
         add_form.handleLoad(add_form, action)
-        iframe = u'\n<iframe src="http://nohost/plone/test-folder/@@embedder_videojs?\
-src=http%3A%2F%2Fvideo-js.zencoder.com%2Foceans-clip.webm&\
-type=video%2Fwebm"\n        class="vjs-iframe"\n        \
-allowfullscreen="1" mozallowfullscreen="1" webkitallowfullscreen="1"\n        \
-frameborder="0">\n</iframe>\n'
         self.assertEqual(
             u"", add_form.widgets['IDublinCore.title'].value)
         self.assertEqual(
-            iframe, add_form.widgets['embed_html'].value)
+            VIDEOJS_EMBED, add_form.widgets['embed_html'].value.strip('\n'))
         self.assertEqual(
             u'', add_form.widgets['width'].value)
         self.assertEqual(
@@ -294,10 +301,10 @@ def test_videojs(self):
         video.title = 'Oceans clip'
         video.width = '640'
         video.height = '264'
-        video.embed_html = iframe
+        video.embed_html = VIDEOJS_EMBED
 
         self.assertItemsEqual({u'thumb_html': u'<iframe src="http://nohost/plone/test-folder/@@embedder_videojs?src=http%3A%2F%2Fvideo-js.zencoder.com%2Foceans-clip.webm&amp;type=video%2Fwebm" class="vjs-iframe" allowfullscreen="1" mozallowfullscreen="1" webkitallowfullscreen="1" frameborder="0" width="188" height="141">\n</iframe>',
-                               u'embed_html': u'\n<iframe src="http://nohost/plone/test-folder/@@embedder_videojs?src=http%3A%2F%2Fvideo-js.zencoder.com%2Foceans-clip.webm&type=video%2Fwebm"\n        class="vjs-iframe"\n        allowfullscreen="1" mozallowfullscreen="1" webkitallowfullscreen="1"\n        frameborder="0">\n</iframe>\n',
+                               u'embed_html': u'\n<iframe src="http://nohost/plone/test-folder/@@embedder_videojs?src=http%3A%2F%2Fvideo-js.zencoder.com%2Foceans-clip.webm&type=video%2Fwebm"\n        class="vjs-iframe"\n        allowfullscreen="1" mozallowfullscreen="1" webkitallowfullscreen="1"\n        frameborder="0">\n</iframe>',
                                u'description': u'',
                                u'title': u'Oceans clip'
                                },