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
+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
--- /dev/null
+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
+
--- /dev/null
+<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>
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
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;
{
document.body.appendChild(timeLabel.element);
document.body.appendChild(remainingTimeLabel.element);
+ document.body.appendChild(elaspedTimeLabel.element);
+
style = window.getComputedStyle(timeLabel.element);
shouldBeEqualToString("style.position", "absolute");
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("");
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
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 ]
+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
constructor(type)
{
- super(`<div class="time-label"></div>`);
+ super(`<div role="text" class="time-label"></div>`);
this._type = type;
this.setValueWithNumberOfDigits(0, 4);