AX: VoiceOver silent or skipping over time values on media player.

https://bugs.webkit.org/show_bug.cgi?id=174324
<rdar://problem/32021784>

Patch by Aaron Chu <aaron_chu@apple.com> on 2017-07-27
Reviewed by Antoine Quint.

Added role attribute to modern media controls time lable class so that VoiceOver can access the time label when the media is playing.

Source/WebCore:

Test Updated: media/modern-media-controls/time-label/time-label.html
Test Added: media/modern-media-controls/time-label/ios-time-label.html

* Modules/modern-media-controls/controls/time-label.js:

LayoutTests:

Updated time-label.html to test role attribute on mac.
Added ios-time-label.html to run time-label test without testing for role since accessibilityController does not expose a role property on iOS.

* media/modern-media-controls/time-label/ios-time-label-expected.txt: Copied from LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt.
* media/modern-media-controls/time-label/ios-time-label.html: Copied from LayoutTests/media/modern-media-controls/time-label/time-label.html.
* media/modern-media-controls/time-label/time-label-expected.txt:
* media/modern-media-controls/time-label/time-label.html:
* platform/ios-simulator/TestExpectations:
* platform/mac/TestExpectations:

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

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 324384a9fa78546a40303db78037c8fa84ccc9e2..4116b67182492e470664fa4c9bf1a8c17dc9d401 100644 (file)
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,23 @@
+2017-07-27  Aaron Chu  <aaron_chu@apple.com>
+
+        AX: VoiceOver silent or skipping over time values on media player.
+        https://bugs.webkit.org/show_bug.cgi?id=174324
+        <rdar://problem/32021784>
+
+        Reviewed by Antoine Quint.
+
+        Added role attribute to modern media controls time lable class so that VoiceOver can access the time label when the media is playing.
+
+        Updated time-label.html to test role attribute on mac. 
+        Added ios-time-label.html to run time-label test without testing for role since accessibilityController does not expose a role property on iOS.
+
+        * media/modern-media-controls/time-label/ios-time-label-expected.txt: Copied from LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt.
+        * media/modern-media-controls/time-label/ios-time-label.html: Copied from LayoutTests/media/modern-media-controls/time-label/time-label.html.
+        * media/modern-media-controls/time-label/time-label-expected.txt:
+        * media/modern-media-controls/time-label/time-label.html:
+        * platform/ios-simulator/TestExpectations:
+        * platform/mac/TestExpectations:
+
 2017-07-27  Yusuke Suzuki  <utatane.tea@gmail.com>
 
         Hoist DOM binding attribute getter prologue into JavaScriptCore taking advantage of DOMJIT / CheckSubClass

diff --git a/LayoutTests/media/modern-media-controls/time-label/ios-time-label-expected.txt b/LayoutTests/media/modern-media-controls/time-label/ios-time-label-expected.txt
new file mode 100644 (file)
index 0000000..2727028
--- /dev/null
+++ b/LayoutTests/media/modern-media-controls/time-label/ios-time-label-expected.txt
@@ -0,0 +1,41 @@
+Testing the TimeLabel class.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS timeLabel.value is 0
+PASS timeLabel.element.localName is "div"
+PASS timeLabel.element.className is "time-label"
+PASS style.position is "absolute"
+PASS style.fontFamily is "-apple-system-monospaced-numbers"
+PASS style.fontSize is "12px"
+
+NaNTimeLabel.element.textContent = --:--
+
+PASS elaspedLabel is "Elapsed"
+PASS remainingLabel is "Remaining"
+
+elapsedTimeLabels[3].element.textContent = 0:01
+elapsedTimeLabels[3].width = 27
+remainingTimeLabels[3].element.textContent = -0:01
+remainingTimeLabels[3].width = 33
+
+elapsedTimeLabels[4].element.textContent = 00:01
+elapsedTimeLabels[4].width = 35
+remainingTimeLabels[4].element.textContent = -00:01
+remainingTimeLabels[4].width = 40
+
+elapsedTimeLabels[5].element.textContent = 0:00:01
+elapsedTimeLabels[5].width = 46
+remainingTimeLabels[5].element.textContent = -0:00:01
+remainingTimeLabels[5].width = 52
+
+elapsedTimeLabels[6].element.textContent = 00:00:01
+elapsedTimeLabels[6].width = 54
+remainingTimeLabels[6].element.textContent = -00:00:01
+remainingTimeLabels[6].width = 59
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+

diff --git a/LayoutTests/media/modern-media-controls/time-label/ios-time-label.html b/LayoutTests/media/modern-media-controls/time-label/ios-time-label.html
new file mode 100644 (file)
index 0000000..3abf79b
--- /dev/null
+++ b/LayoutTests/media/modern-media-controls/time-label/ios-time-label.html
@@ -0,0 +1,83 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>TimeLabel</code> class.");
+
+const timeLabel = new TimeLabel;
+
+shouldBe("timeLabel.value", "0");
+shouldBeEqualToString("timeLabel.element.localName", "div");
+shouldBeEqualToString("timeLabel.element.className", "time-label");
+
+timeLabel.element.id = "elasped";
+
+const NaNTimeLabel = new TimeLabel;
+NaNTimeLabel.setValueWithNumberOfDigits(NaN, 4);
+
+const digits = [3, 4, 5, 6];
+let elapsedTimeLabels = new Map;
+let remainingTimeLabels = new Map;
+for (let numberOfDigits of digits) {
+    elapsedTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Types.Elapsed);
+    elapsedTimeLabels[numberOfDigits].setValueWithNumberOfDigits(1, numberOfDigits);
+    remainingTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Types.Remaining);
+    remainingTimeLabels[numberOfDigits].setValueWithNumberOfDigits(1, numberOfDigits);
+}
+
+const remainingTimeLabel = new TimeLabel(TimeLabel.Types.Remaining);
+remainingTimeLabel.element.id = "remaining";
+remainingTimeLabel.setValueWithNumberOfDigits(0, 4);
+
+const elaspedTimeLabel = new TimeLabel(TimeLabel.Types.Elasped);
+elaspedTimeLabel.element.id = "elasped";
+elaspedTimeLabel.setValueWithNumberOfDigits(0, 4);
+
+let style;
+let elaspedLabel;
+let remainingLabel;
+scheduler.frameDidFire = function()
+{
+    document.body.appendChild(timeLabel.element);
+    document.body.appendChild(remainingTimeLabel.element);
+    document.body.appendChild(elaspedTimeLabel.element);
+
+    style = window.getComputedStyle(timeLabel.element);
+
+    shouldBeEqualToString("style.position", "absolute");
+    shouldBeEqualToString("style.fontFamily", "-apple-system-monospaced-numbers");
+    shouldBeEqualToString("style.fontSize", "12px");
+
+    debug("");
+    debug(`NaNTimeLabel.element.textContent = ${NaNTimeLabel.element.textContent}`);
+
+    debug("");
+
+    elaspedLabel = elaspedTimeLabel.element.getAttribute("aria-label").split(":")[0];
+    remainingLabel = remainingTimeLabel.element.getAttribute("aria-label").split(":")[0];
+    shouldBeEqualToString("elaspedLabel", "Elapsed");
+    shouldBeEqualToString("remainingLabel", "Remaining");
+
+    timeLabel.element.remove();
+    remainingTimeLabel.element.remove();
+    elaspedTimeLabel.element.remove();
+
+    for (numberOfDigits of digits) {
+        debug("");
+        debug(`elapsedTimeLabels[${numberOfDigits}].element.textContent = ${elapsedTimeLabels[numberOfDigits].element.textContent}`);
+        debug(`elapsedTimeLabels[${numberOfDigits}].width = ${elapsedTimeLabels[numberOfDigits].width}`);
+        debug(`remainingTimeLabels[${numberOfDigits}].element.textContent = ${remainingTimeLabels[numberOfDigits].element.textContent}`);
+        debug(`remainingTimeLabels[${numberOfDigits}].width = ${remainingTimeLabels[numberOfDigits].width}`);
+    }
+
+    debug("");
+    finishMediaControlsTest();
+};
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>

diff --git a/LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt b/LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt
index 2727028d3feb09bec923f810301ab36a2afa6ec7..290bf002fdb5793a56d9a36c4afe582fda915de6 100644 (file)
--- a/LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt
+++ b/LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt
@@ -14,6 +14,8 @@ NaNTimeLabel.element.textContent = --:--
 
 PASS elaspedLabel is "Elapsed"
 PASS remainingLabel is "Remaining"
+PASS accessibilityController.accessibleElementById('remaining').role is "AXRole: AXStaticText"
+PASS accessibilityController.accessibleElementById('elasped').role is "AXRole: AXStaticText"
 
 elapsedTimeLabels[3].element.textContent = 0:01
 elapsedTimeLabels[3].width = 27

diff --git a/LayoutTests/media/modern-media-controls/time-label/time-label.html b/LayoutTests/media/modern-media-controls/time-label/time-label.html
index 8b3afd05de963326b5906e19d476602c4456e4bc..b951b6dce997b9e1e301883bad558646cbc7b3ba 100644 (file)
--- a/LayoutTests/media/modern-media-controls/time-label/time-label.html
+++ b/LayoutTests/media/modern-media-controls/time-label/time-label.html
@@ -31,6 +31,11 @@ for (let numberOfDigits of digits) {
 
 const remainingTimeLabel = new TimeLabel(TimeLabel.Types.Remaining);
 remainingTimeLabel.element.id = "remaining";
+remainingTimeLabel.setValueWithNumberOfDigits(0, 4);
+
+const elaspedTimeLabel = new TimeLabel(TimeLabel.Types.Elasped);
+elaspedTimeLabel.element.id = "elasped";
+elaspedTimeLabel.setValueWithNumberOfDigits(0, 4);
 
 let style;
 let elaspedLabel;
@@ -39,6 +44,8 @@ scheduler.frameDidFire = function()
 {
     document.body.appendChild(timeLabel.element);
     document.body.appendChild(remainingTimeLabel.element);
+    document.body.appendChild(elaspedTimeLabel.element);
+
     style = window.getComputedStyle(timeLabel.element);
 
     shouldBeEqualToString("style.position", "absolute");
@@ -49,12 +56,16 @@ scheduler.frameDidFire = function()
     debug(`NaNTimeLabel.element.textContent = ${NaNTimeLabel.element.textContent}`);
 
     debug("");
-    elaspedLabel = accessibilityController.accessibleElementById('elasped').description.split(": ")[1];
-    remainingLabel = accessibilityController.accessibleElementById('remaining').description.split(": ")[1];
+
+    elaspedLabel = elaspedTimeLabel.element.getAttribute("aria-label").split(":")[0];
+    remainingLabel = remainingTimeLabel.element.getAttribute("aria-label").split(":")[0];
     shouldBeEqualToString("elaspedLabel", "Elapsed");
     shouldBeEqualToString("remainingLabel", "Remaining");
+    shouldBeEqualToString("accessibilityController.accessibleElementById('remaining').role", "AXRole: AXStaticText");
+    shouldBeEqualToString("accessibilityController.accessibleElementById('elasped').role", "AXRole: AXStaticText");
     timeLabel.element.remove();
     remainingTimeLabel.element.remove();
+    elaspedTimeLabel.element.remove();
 
     for (numberOfDigits of digits) {
         debug("");

diff --git a/LayoutTests/platform/ios-simulator/TestExpectations b/LayoutTests/platform/ios-simulator/TestExpectations
index 42721d3810abd06cb3c414c33ec9154c714c5bf8..5fa26dee29777c8edb4794519846dadcd8647260 100644 (file)
--- a/LayoutTests/platform/ios-simulator/TestExpectations
+++ b/LayoutTests/platform/ios-simulator/TestExpectations
@@ -105,6 +105,9 @@ media/modern-media-controls/status-support [ Pass ]
 media/modern-media-controls/time-control [ Pass ]
 media/modern-media-controls/time-label [ Pass ]
 media/modern-media-controls/time-labels-support [ Pass ]
+
+# accessibilityController.role cannot be tested on iOS
+media/modern-media-controls/time-label/time-label.html [ Skip ]
 media/modern-media-controls/tracks-button [ Pass ]
 
 # AirPlay cannot be tested on iOS

diff --git a/LayoutTests/platform/mac/TestExpectations b/LayoutTests/platform/mac/TestExpectations
index b6ecfb29ae90bdd22cacb0b8a0cfffc47d4fe29e..38f1884332349bbddffcf2c97799d145dc259084 100644 (file)
--- a/LayoutTests/platform/mac/TestExpectations
+++ b/LayoutTests/platform/mac/TestExpectations
@@ -1587,6 +1587,7 @@ media/modern-media-controls/status-label [ Pass ]
 media/modern-media-controls/status-support [ Pass ]
 media/modern-media-controls/time-control [ Pass ]
 media/modern-media-controls/time-label [ Pass ]
+media/modern-media-controls/time-label/ios-time-label.html [ Skip ]
 media/modern-media-controls/time-labels-support [ Pass ]
 media/modern-media-controls/tracks-panel/tracks-panel-up-click-outside-media-does-not-dimiss-media-controls-when-media-is-paused.html [ Pass ]
 media/modern-media-controls/tracks-panel/tracks-panel-up-click-over-media-does-not-dimiss-media-controls-when-media-is-playing.html [ Pass ]

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 5ddab6857a13e4ec75417edbb541e5cd86b6d4c8..2e51c56ac047ff8a224abef6c29352ae0e9c129f 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,18 @@
+2017-07-27  Aaron Chu  <aaron_chu@apple.com>
+
+        AX: VoiceOver silent or skipping over time values on media player.
+        https://bugs.webkit.org/show_bug.cgi?id=174324
+        <rdar://problem/32021784>
+
+        Reviewed by Antoine Quint.
+
+        Added role attribute to modern media controls time lable class so that VoiceOver can access the time label when the media is playing.
+
+        Test Updated: media/modern-media-controls/time-label/time-label.html
+        Test Added: media/modern-media-controls/time-label/ios-time-label.html
+        
+        * Modules/modern-media-controls/controls/time-label.js:
+
 2017-07-27  Yusuke Suzuki  <utatane.tea@gmail.com>
 
         Hoist DOM binding attribute getter prologue into JavaScriptCore taking advantage of DOMJIT / CheckSubClass

diff --git a/Source/WebCore/Modules/modern-media-controls/controls/time-label.js b/Source/WebCore/Modules/modern-media-controls/controls/time-label.js
index 976a5144e1256345f22b258838496dad06e923ce..84f5c244921b7b8f1ef3cb54cbe0681d7168d92d 100644 (file)
--- a/Source/WebCore/Modules/modern-media-controls/controls/time-label.js
+++ b/Source/WebCore/Modules/modern-media-controls/controls/time-label.js
@@ -42,7 +42,7 @@ class TimeLabel extends LayoutNode
 
     constructor(type)
     {
-        super(`<div class="time-label"></div>`);
+        super(`<div role="text" class="time-label"></div>`);
 
         this._type = type;
         this.setValueWithNumberOfDigits(0, 4);