REGRESSION(r184722) AX: WebKit video playback toolbar removed from DOM; no longer...
authorjcraig@apple.com <jcraig@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 8 Aug 2015 02:14:43 +0000 (02:14 +0000)
committerjcraig@apple.com <jcraig@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 8 Aug 2015 02:14:43 +0000 (02:14 +0000)
https://bugs.webkit.org/show_bug.cgi?id=145684

Reviewed by Dean Jackson.

Source/WebCore:

Updated Apple Video controls to add an invisible but focusable button that allows VoiceOver
users (and when unblocked, keyboard users) to re-display the video controls.

Test: media/video-controls-show-on-kb-or-ax-event.html

* English.lproj/mediaControlsLocalizedStrings.js:
* Modules/mediacontrols/mediaControlsApple.css:
(audio::-webkit-media-show-controls):
(video::-webkit-media-show-controls):
* Modules/mediacontrols/mediaControlsApple.js:
(Controller.prototype.createControls):
(Controller.prototype.handleFullscreenChange):
(Controller.prototype.handleShowControlsClick):
(Controller.prototype.handleWrapperMouseMove):
(Controller.prototype.updateForShowingControls):
(Controller.prototype.showControls):
(Controller.prototype.hideControls):
(Controller.prototype.setNeedsUpdateForDisplayedWidth):
* Modules/mediacontrols/mediaControlsiOS.css:
(audio::-webkit-media-show-controls):
(video::-webkit-media-show-controls):

LayoutTests:

* http/tests/contentextensions/text-track-blocked-expected.txt: Minor update to test case expectation.
* media/video-controls-show-on-kb-or-ax-event-expected.txt: Added.
* media/video-controls-show-on-kb-or-ax-event.html: New test validates video controls can be displayed without the need for a mouse.
* platform/mac/media/track/track-cue-rendering-horizontal-expected.txt: Minor update to test case expectation.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@188182 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/http/tests/contentextensions/text-track-blocked-expected.txt
LayoutTests/media/video-controls-show-on-kb-or-ax-event-expected.txt [new file with mode: 0644]
LayoutTests/media/video-controls-show-on-kb-or-ax-event.html [new file with mode: 0644]
LayoutTests/platform/mac/media/track/track-cue-rendering-horizontal-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/English.lproj/mediaControlsLocalizedStrings.js
Source/WebCore/Modules/mediacontrols/mediaControlsApple.css
Source/WebCore/Modules/mediacontrols/mediaControlsApple.js
Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css

index 1d50a83..8cc80d4 100644 (file)
@@ -1,3 +1,15 @@
+2015-08-07  James Craig  <jcraig@apple.com>
+
+        REGRESSION(r184722) AX: WebKit video playback toolbar removed from DOM; no longer accessible to VoiceOver
+        https://bugs.webkit.org/show_bug.cgi?id=145684
+
+        Reviewed by Dean Jackson.
+
+        * http/tests/contentextensions/text-track-blocked-expected.txt: Minor update to test case expectation.
+        * media/video-controls-show-on-kb-or-ax-event-expected.txt: Added.
+        * media/video-controls-show-on-kb-or-ax-event.html: New test validates video controls can be displayed without the need for a mouse.
+        * platform/mac/media/track/track-cue-rendering-horizontal-expected.txt: Minor update to test case expectation.
+
 2015-08-07  Myles C. Maxfield  <mmaxfield@apple.com>
 
         [Mac] Test gardening
index 75c8db2..fc476f9 100644 (file)
@@ -14,3 +14,5 @@ layer at (8,26) size 320x240
   RenderVideo {VIDEO} at (0,18) size 320x240
 layer at (8,26) size 320x240
   RenderFlexibleBox {DIV} at (0,0) size 320x240
+layer at (8,256) size 320x10
+  RenderButton {BUTTON} at (0,230) size 320x10 [bgcolor=#C0C0C0] [border: (2px outset #C0C0C0)]
diff --git a/LayoutTests/media/video-controls-show-on-kb-or-ax-event-expected.txt b/LayoutTests/media/video-controls-show-on-kb-or-ax-event-expected.txt
new file mode 100644 (file)
index 0000000..1446b00
--- /dev/null
@@ -0,0 +1,6 @@
+This tests that, after the video controls fade out, they can be shown when VoiceOver or a keyboard user clicks the hidden "Show Controls" button.
+
+PASS
+
+
+
diff --git a/LayoutTests/media/video-controls-show-on-kb-or-ax-event.html b/LayoutTests/media/video-controls-show-on-kb-or-ax-event.html
new file mode 100644 (file)
index 0000000..01ae7e5
--- /dev/null
@@ -0,0 +1,42 @@
+<body>
+<p>
+    This tests that, after the video controls fade out, they can be shown when VoiceOver or a keyboard user clicks the hidden "Show Controls" button.
+</p>
+<p id="result">
+    FAIL: Test did not run.<br>
+</p>
+<video id="video" controls autoplay onplaying="playing()" src="content/long-test.mp4"></video><br>
+<script>
+    if (window.testRunner) {
+        testRunner.waitUntilDone();
+        testRunner.dumpAsText();
+    }
+
+    function playing() {
+
+        // Mouse over the video then mouse out to hide controls more quickly.
+        eventSender.mouseMoveTo(100,100);
+        eventSender.mouseMoveTo(1,1);
+
+        setTimeout(function() {
+            var result = document.getElementById("result");
+            result.innerHTML = "";
+            var root = internals.shadowRoot(document.getElementById("video"))
+            
+            var button = root.firstChild.querySelector('button');
+            if (button) {
+                button.focus();
+                eventSender.keyDown(' '); // Use keyboard to press the selected button.
+            } else {
+                result.innerHTML += 'FAIL: "Show Controls" button is not available.<br>';      
+            }
+
+            // Verifies the toolbar is back in the DOM.
+            var controls = root.firstChild.querySelector('[role="toolbar"]');
+            result.innerHTML += controls ? 'PASS': 'FAIL: Test ending, but toolbar is not visible.';
+
+            testRunner.notifyDone();
+        }, 300) // Wait for video toolbar to hide.
+    }
+</script>
+</body>
index bc0b7db..d2bf8b9 100644 (file)
@@ -60,3 +60,5 @@ layer at (8,220) size 320x14
       RenderInline {SPAN} at (0,0) size 275x14 [bgcolor=#000000CC]
         RenderText {#text} at (0,0) size 275x14
           text run at (0,0) width 275: "Cue 6: should be on top of bottom positioned cue 5."
+layer at (8,238) size 320x10
+  RenderButton {BUTTON} at (0,230) size 320x10 [bgcolor=#C0C0C0] [border: (2px outset #C0C0C0)]
index 4949aa4..27d02aa 100644 (file)
@@ -1,3 +1,32 @@
+2015-08-07  James Craig  <jcraig@apple.com>
+
+        REGRESSION(r184722) AX: WebKit video playback toolbar removed from DOM; no longer accessible to VoiceOver
+        https://bugs.webkit.org/show_bug.cgi?id=145684
+
+        Reviewed by Dean Jackson.
+
+        Updated Apple Video controls to add an invisible but focusable button that allows VoiceOver 
+        users (and when unblocked, keyboard users) to re-display the video controls.
+
+        Test: media/video-controls-show-on-kb-or-ax-event.html
+
+        * English.lproj/mediaControlsLocalizedStrings.js:
+        * Modules/mediacontrols/mediaControlsApple.css:
+        (audio::-webkit-media-show-controls):
+        (video::-webkit-media-show-controls):
+        * Modules/mediacontrols/mediaControlsApple.js:
+        (Controller.prototype.createControls):
+        (Controller.prototype.handleFullscreenChange):
+        (Controller.prototype.handleShowControlsClick):
+        (Controller.prototype.handleWrapperMouseMove):
+        (Controller.prototype.updateForShowingControls):
+        (Controller.prototype.showControls):
+        (Controller.prototype.hideControls):
+        (Controller.prototype.setNeedsUpdateForDisplayedWidth):
+        * Modules/mediacontrols/mediaControlsiOS.css:
+        (audio::-webkit-media-show-controls):
+        (video::-webkit-media-show-controls):
+
 2015-08-07  Alex Christensen  <achristensen@webkit.org>
 
         Build more testing binaries with CMake on Windows
index 561c9bf..2418113 100644 (file)
@@ -27,6 +27,7 @@ var UIStringTable = {
     'Remaining': 'Remaining',
     'Rewind': 'Rewind',
     'Rewind ##sec## Seconds': 'Rewind ##sec## Seconds',
+    'Show Controls': 'Show Controls',
     'Stalled': 'Stalled',
     'Start Playback': 'Start Playback',
     'Subtitles': 'Subtitles',
index a14874b..2a768a6 100644 (file)
@@ -106,6 +106,22 @@ video::-webkit-media-controls-panel:hover {
     opacity: 1;
 }
 
+audio::-webkit-media-show-controls {
+    display: none !important;
+}
+video::-webkit-media-show-controls {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    display: block;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 10px;
+    opacity: 0;
+    -webkit-appearance: none;
+}
+
 video::-webkit-media-controls-panel-background-container,
 audio::-webkit-media-controls-panel-background-container {
     position: absolute;
index c321c2f..8b8de0c 100644 (file)
@@ -495,6 +495,14 @@ Controller.prototype = {
         wirelessTargetPicker.setAttribute('aria-label', this.UIString('Choose Wireless Display'));
         this.listenFor(wirelessTargetPicker, 'click', this.handleWirelessPickerButtonClicked);
 
+        // Show controls button is an accessibility workaround since the controls are now removed from the DOM. http://webkit.org/b/145684
+        var showControlsButton = this.showControlsButton = document.createElement('button');
+        showControlsButton.setAttribute('pseudo', '-webkit-media-show-controls');
+        showControlsButton.hidden = true;
+        showControlsButton.setAttribute('aria-label', this.UIString('Show Controls'));
+        this.listenFor(showControlsButton, 'click', this.handleShowControlsClick);
+        this.base.appendChild(showControlsButton);
+
         if (!Controller.gSimulateWirelessPlaybackTarget)
             wirelessTargetPicker.classList.add(this.ClassNames.hidden);
     },
@@ -794,6 +802,15 @@ Controller.prototype = {
         }
     },
 
+    handleShowControlsClick: function(event)
+    {
+        if (!this.video.controls && !this.isFullScreen())
+            return;
+
+        if (this.controlsAreHidden())
+            this.showControls(true);
+    },
+
     handleWrapperMouseMove: function(event)
     {
         if (!this.video.controls && !this.isFullScreen())
@@ -1405,7 +1422,7 @@ Controller.prototype = {
         }
     },
 
-    showControls: function()
+    showControls: function(focusControls)
     {
         this.updateShouldListenForPlaybackTargetAvailabilityEvent();
         if (!this.video.controls && !this.isFullScreen())
@@ -1415,7 +1432,10 @@ Controller.prototype = {
         if (this.shouldHaveControls() && !this.controls.panel.parentElement) {
             this.base.appendChild(this.controls.inlinePlaybackPlaceholder);
             this.base.appendChild(this.controls.panel);
+            if (focusControls)
+                this.controls.playButton.focus();
         }
+        this.showControlsButton.hidden = true;
     },
 
     hideControls: function()
@@ -1428,6 +1448,7 @@ Controller.prototype = {
         this.controls.panel.classList.remove(this.ClassNames.show);
         if (this.controls.panelBackground)
             this.controls.panelBackground.classList.remove(this.ClassNames.show);
+        this.showControlsButton.hidden = false;
     },
 
     setNeedsUpdateForDisplayedWidth: function()
index 4cad2ed..7818ce5 100644 (file)
@@ -132,6 +132,22 @@ video::-webkit-media-controls-panel-background.paused {
     opacity: 1;
 }
 
+audio::-webkit-media-show-controls {
+    display: none !important;
+}
+video::-webkit-media-show-controls {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    display: block;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 10px;
+    opacity: 0;
+    -webkit-appearance: none;
+}
+
 audio::-webkit-media-controls-panel,
 video::-webkit-media-controls-panel {
     box-sizing: border-box;