Title: [219983] trunk
Revision
219983
Author
[email protected]
Date
2017-07-27 07:53:04 -0700 (Thu, 27 Jul 2017)

Log Message

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 <[email protected]> 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:

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (219982 => 219983)


--- trunk/LayoutTests/ChangeLog	2017-07-27 13:00:23 UTC (rev 219982)
+++ trunk/LayoutTests/ChangeLog	2017-07-27 14:53:04 UTC (rev 219983)
@@ -1,3 +1,23 @@
+2017-07-27  Aaron Chu  <[email protected]>
+
+        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  <[email protected]>
 
         Hoist DOM binding attribute getter prologue into _javascript_Core taking advantage of DOMJIT / CheckSubClass

Copied: trunk/LayoutTests/media/modern-media-controls/time-label/ios-time-label-expected.txt (from rev 219982, trunk/LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt) (0 => 219983)


--- trunk/LayoutTests/media/modern-media-controls/time-label/ios-time-label-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/time-label/ios-time-label-expected.txt	2017-07-27 14:53:04 UTC (rev 219983)
@@ -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
+

Copied: trunk/LayoutTests/media/modern-media-controls/time-label/ios-time-label.html (from rev 219982, trunk/LayoutTests/media/modern-media-controls/time-label/time-label.html) (0 => 219983)


--- trunk/LayoutTests/media/modern-media-controls/time-label/ios-time-label.html	                        (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/time-label/ios-time-label.html	2017-07-27 14:53:04 UTC (rev 219983)
@@ -0,0 +1,83 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" 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=""
+</body>

Modified: trunk/LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt (219982 => 219983)


--- trunk/LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt	2017-07-27 13:00:23 UTC (rev 219982)
+++ trunk/LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt	2017-07-27 14:53:04 UTC (rev 219983)
@@ -14,6 +14,8 @@
 
 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

Modified: trunk/LayoutTests/media/modern-media-controls/time-label/time-label.html (219982 => 219983)


--- trunk/LayoutTests/media/modern-media-controls/time-label/time-label.html	2017-07-27 13:00:23 UTC (rev 219982)
+++ trunk/LayoutTests/media/modern-media-controls/time-label/time-label.html	2017-07-27 14:53:04 UTC (rev 219983)
@@ -31,7 +31,12 @@
 
 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;
@@ -39,6 +44,8 @@
 {
     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 @@
     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("");

Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (219982 => 219983)


--- trunk/LayoutTests/platform/ios-simulator/TestExpectations	2017-07-27 13:00:23 UTC (rev 219982)
+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations	2017-07-27 14:53:04 UTC (rev 219983)
@@ -105,6 +105,9 @@
 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

Modified: trunk/LayoutTests/platform/mac/TestExpectations (219982 => 219983)


--- trunk/LayoutTests/platform/mac/TestExpectations	2017-07-27 13:00:23 UTC (rev 219982)
+++ trunk/LayoutTests/platform/mac/TestExpectations	2017-07-27 14:53:04 UTC (rev 219983)
@@ -1587,6 +1587,7 @@
 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 ]

Modified: trunk/Source/WebCore/ChangeLog (219982 => 219983)


--- trunk/Source/WebCore/ChangeLog	2017-07-27 13:00:23 UTC (rev 219982)
+++ trunk/Source/WebCore/ChangeLog	2017-07-27 14:53:04 UTC (rev 219983)
@@ -1,3 +1,18 @@
+2017-07-27  Aaron Chu  <[email protected]>
+
+        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  <[email protected]>
 
         Hoist DOM binding attribute getter prologue into _javascript_Core taking advantage of DOMJIT / CheckSubClass

Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.js (219982 => 219983)


--- trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.js	2017-07-27 13:00:23 UTC (rev 219982)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.js	2017-07-27 14:53:04 UTC (rev 219983)
@@ -42,7 +42,7 @@
 
     constructor(type)
     {
-        super(`<div class="time-label"></div>`);
+        super(`<div role="text" class="time-label"></div>`);
 
         this._type = type;
         this.setValueWithNumberOfDigits(0, 4);
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to