Skip to content
This repository has been archived by the owner on Sep 24, 2019. It is now read-only.

Commit

Permalink
Added basic testing for flash object captions per #93.
Browse files Browse the repository at this point in the history
  • Loading branch information
Kevin Miller committed Mar 2, 2014
1 parent 49c6b0f commit 606e1f4
Show file tree
Hide file tree
Showing 4 changed files with 141 additions and 1 deletion.
77 changes: 77 additions & 0 deletions src/js/custom/scriptFocusIndicatorVisible.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
quail.scriptFocusIndicatorVisible = function() {
quail.html.find(quail.focusElements).each(function() {

// Preparation for test: remove focus indicators done with CSS
var sheet, rules, rulesCache, rule;

rulesCache = [];

for (var i = 0, l = document.styleSheets.length; i < l; ++i) {
sheet = document.styleSheets[i];
rules = sheet.cssRules || sheet.rules;

for (var j = rules.length - 1; j >= 0; --j) {
rule = rules[j];
if (rule.selectorText && rule.selectorText.indexOf(':focus') !== -1) {
rulesCache.push({
css: rule.cssText,
index: j,
sheet: i
});

sheet.deleteRule(j);
}
}
}

var noFocus = {
borderWidth : $(this).css('border-width'),
borderColor : $(this).css('border-color'),
backgroundColor : $(this).css('background-color'),
boxShadow : $(this).css('box-shadow'),
outlineWidth : $(this).css('outline-width'),
outlineColor : $(this).css('outline-color')
};

$(this).focus();

// it is sufficient to not remove the default outline on focus: pass test
var outlineWidth = quail.components.convertToPx($(this).css('outline-width'));
if(outlineWidth > 2 && outlineWidth !== quail.components.convertToPx(noFocus.outlineWidth)) {
$(this).blur();
return;
}

// in any other case, it is acceptable to change other visual components


if(noFocus.backgroundColor !== $(this).css('background-color')) {
$(this).blur();
return;
}

var borderWidth = quail.components.convertToPx($(this).css('border-width'));
if(borderWidth > 2 && borderWidth !== quail.components.convertToPx(noFocus.borderWidth)) {
$(this).blur();
return;
}

var boxShadow = ($(this).css('box-shadow') && $(this).css('box-shadow') !== 'none') ? $(this).css('box-shadow').match(/(-?\d+px)|(rgb\(.+\))/g) : false;
if(boxShadow && $(this).css('box-shadow') !== noFocus.boxShadow && quail.components.convertToPx(boxShadow[3]) > 3) {
$(this).blur();
return;
}

$(this).blur();

var ruleCache;

for (var k = rulesCache.length - 1; k >= 0; --i) {
ruleCache = rulesCache[k];

document.styleSheets[ruleCache.sheet].insertRule(ruleCache.css, ruleCache.index);
}

quail.testFails('scriptFocusIndicatorVisible', $(this));
});
};
24 changes: 24 additions & 0 deletions src/js/custom/videosEmbeddedOrLinkedNeedCaptions.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,30 @@ quail.videosEmbeddedOrLinkedNeedCaptions = function() {
}
});
});
quail.html.find('object').each(function() {
var $object = $(this);
if(!$object.find('param').length) {
return;
}
var isVideo = false;
$object.find('param').each(function() {
if($(this).attr('value').search('.flv') > -1) {

This comment has been minimized.

Copy link
@hannolans

hannolans Mar 4, 2014

Contributor

we might add .mp4 as well.

isVideo = true;
}
});
if(isVideo) {
var hasCaptions = false;
$object.find('param[name=flashvars]').each(function() {
if($(this).attr('value').search('captions') > -1 &&
$(this).attr('value').search('.srt') > -1) {
hasCaptions = true;
}
});
if(!hasCaptions) {
quail.testFails('videosEmbeddedOrLinkedNeedCaptions', $object);
}
}
});
quail.html.find('video').each(function() {
var $video = $(this);
var $captions = $video.find('track[kind=subtitles], track[kind=captions]');
Expand Down
21 changes: 21 additions & 0 deletions src/resources/tests.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3383,6 +3383,27 @@ radioMarkedWithFieldgroupAndLegend:
- "content"
options:
selector: "input[type=radio]:not(fieldset input[type=radio])"
scriptFocusIndicatorVisible:
type: "custom"
title:
en: "Script focus indicators have high visibility"
description:
en: "When a focus indicator is used with script, it should have enough contrast with the background and big enough to be highly visible."
guidelines:
wcag:
2.4.7:
techniques:
- "C15"
- "G165"
- "G195"
- "SCR31"
tags:
- "focus"
- "content"
components:
- "color"
- "convertToPx"
callback: "scriptFocusIndicatorVisible"
scriptContentAccessibleWithScriptsTurnedOff:
type: "selector"
testability: 0
Expand Down
20 changes: 19 additions & 1 deletion test/accessibility-tests/videosEmbeddedOrLinkedNeedCaptions.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,16 @@
</video>
</div>

<div class="quail-test limit-chrome" data-expected="fail" data-accessibility-test="videosEmbeddedOrLinkedNeedCaptions" title="Object with no subtitles">
<object id="movie-contentblock-0120192e-2452-4d96-9ba7-8a004d1415bf" width="100%" height="100%" type="application/x-shockwave-flash" data="/behaviour/flash/govvid-v2-mediaplayer.swf" bgcolor="#000000" name="movie-contentblock-0120192e-2452-4d96-9ba7-8a004d1415bf" tabindex="0" class="quail-failed-element">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="seamlesstabbing" value="true">
<param name="wmode" value="opaque">
<param name="flashvars" value="netstreambasepath=http%3A%2F%2Fwww.rijksoverheid.nl%2Fdocumenten-en-publicaties%2Fvideos%2F2014%2F01%2F24%2Fpersconferentie-na-ministerraad-24-januari-2014.html&id=movie-contentblock-0120192e-2452-4d96-9ba7-8a004d1415bf&className=govvid&file=http%3A%2F%2Fserver.rijksoverheidsvideo.nl%2Fflash%2FMP-240114-5081.flv&image=http%3A%2F%2Fserver.rijksoverheidsvideo.nl%2Ffoto%2FMP-240114-5081.jpg&skin=%2Fbehaviour%2Fflash%2Fgovvid-v2-skin-video.zip&stretching=exactfit&plugins=http%3A%2F%2Fwww.rijksoverheid.nl%2Fbehaviour%2Fflash%2Fcaptions.swf%2Chttp%3A%2F%2Fwww.rijksoverheid.nl%2Fbehaviour%2Fflash%2Faudiodescription.swf&captions.state=false&captions.fontsize=16&captions.pluginmode=FLASH&audiodescription.file=http%3A%2F%2Fserver.rijksoverheidsvideo.nl%2Faudio%2FMP-240114-5081.mp3&audiodescription.state=false&audiodescription.pluginmode=FLASH&controlbar.position=bottom&playlist.position=none&dock=false">
</object>
</div>

<div class="quail-test" data-expected="pass" data-accessibility-test="videosEmbeddedOrLinkedNeedCaptions">
<p>
Hey, check
Expand All @@ -50,7 +60,15 @@
<track kind="subtitles" src="../assets/subtitle.srt" srclang="en"></track>
</video>
</div>

<div class="quail-test limit-chrome" data-expected="pass" data-accessibility-test="videosEmbeddedOrLinkedNeedCaptions" title="Object with subtitles">
<object id="movie-contentblock-0120192e-2452-4d96-9ba7-8a004d1415bf" width="100%" height="100%" type="application/x-shockwave-flash" data="/behaviour/flash/govvid-v2-mediaplayer.swf" bgcolor="#000000" name="movie-contentblock-0120192e-2452-4d96-9ba7-8a004d1415bf" tabindex="0">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="seamlesstabbing" value="true">
<param name="wmode" value="opaque">
<param name="flashvars" value="netstreambasepath=http%3A%2F%2Fwww.rijksoverheid.nl%2Fdocumenten-en-publicaties%2Fvideos%2F2014%2F01%2F24%2Fpersconferentie-na-ministerraad-24-januari-2014.html&id=movie-contentblock-0120192e-2452-4d96-9ba7-8a004d1415bf&className=govvid&file=http%3A%2F%2Fserver.rijksoverheidsvideo.nl%2Fflash%2FMP-240114-5081.flv&image=http%3A%2F%2Fserver.rijksoverheidsvideo.nl%2Ffoto%2FMP-240114-5081.jpg&skin=%2Fbehaviour%2Fflash%2Fgovvid-v2-skin-video.zip&stretching=exactfit&plugins=http%3A%2F%2Fwww.rijksoverheid.nl%2Fbehaviour%2Fflash%2Fcaptions.swf%2Chttp%3A%2F%2Fwww.rijksoverheid.nl%2Fbehaviour%2Fflash%2Faudiodescription.swf&captions.file=http%3A%2F%2Fserver.rijksoverheidsvideo.nl%2Fondertiteling%2FMP-240114-5081.srt&captions.state=false&captions.fontsize=16&captions.pluginmode=FLASH&audiodescription.file=http%3A%2F%2Fserver.rijksoverheidsvideo.nl%2Faudio%2FMP-240114-5081.mp3&audiodescription.state=false&audiodescription.pluginmode=FLASH&controlbar.position=bottom&playlist.position=none&dock=false">
</object>
</div>
<script src="../testrunner.js"></script>
</body>
</html>

0 comments on commit 606e1f4

Please sign in to comment.