ChangeLog

2017-04-20  Aaron Chu  <aaron_chu@apple.com>

        AX: Modern Media Controls Timeline slider should be operable

        https://bugs.webkit.org/show_bug.cgi?id=170250

        Reviewed by NOBODY (OOPS!).

        Added a "change" event listener and aria-valuetext to the slider so that when a

        VoiceOver user operates the timeline control, VO speaks the updated timestamp

        Test: media/modern-media-controls/scrubber/scrubber-has-correct-ax-label.html

        * English.lproj/modern-media-controls-localized-strings.js:

        * Modules/modern-media-controls/controls/scrubber.js:

        (Scrubber.prototype.set inputAccessibleLabel):

        (Scrubber.prototype._formatTime):

        * Modules/modern-media-controls/controls/slider.js:

        (Slider.prototype.handleEvent):

        (Slider.prototype._handleInputEvent): Deleted.

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

        (TimeControl.prototype.updateScrubberLabel):

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

        (TimeLabel.prototype.commitProperty):

        (TimeLabel.prototype._formattedTime):

        * Modules/modern-media-controls/main.js:

        (formatTimeByUnit):

        (unitizeTime):

2017-04-16  Chris Dumez  <cdumez@apple.com>

        CMD+R / CMD+Q is considered as user interaction and beforeunload alert is shown

Source/WebCore/English.lproj/modern-media-controls-localized-strings.js

@@const UIStrings = {

    "Exit Full Screen": "Exit Full Screen",

    "Error": "Error",

    "Forward": "Forward",

9 "Hour": "Hour",

10 "Hours": "Hours",

    "Invalid": "Invalid",

    "Skip Back 30 seconds": "Skip Back 30 seconds",

    "Live Broadcast": "Live Broadcast",

    "Loading": "Loading",

15 "Minute": "Minute",

16 "Minutes": "Minutes",

    "Media Selection": "Media Selection",

    "Mute": "Mute",

    "Pause": "Pause",

@@const UIStrings = {

    "Rewind": "Rewind",

    "Scale to Fill": "Scale to Fill",

    "Scale to Fit": "Scale to Fit",

25 "Second": "Second",

26 "Seconds": "Seconds",

    "Subtitles": "Subtitles",

    "Start": "Start",

    "This video is playing in Picture in Picture": "This video is playing in Picture in Picture",

Source/WebCore/Modules/modern-media-controls/controls/scrubber.js

@@class Scrubber extends Slider

        this.needsLayout = true;

    }

    set inputAccessibleLabel(timeValue)

    {

        this._input.element.setAttribute("aria-valuetext", this._formatTime(timeValue));

    }

    layoutTraitsDidChange()

    {

        this.height = (this.layoutTraits & LayoutTraits.Compact) ? 15 : 23; 

@@class Scrubber extends Slider

    // Protected

    _formatTime(timeInSeconds)

    {

        const time = formatTimeByUnit(timeInSeconds);

        const timeStrings = [unitizeTime(time.minutes, "Minute"), unitizeTime(time.seconds, "Second")];

        if (time.hours > 0)

            timeStrings.unshift(unitizeTime(time.hours, "Hour"));

        return timeStrings.join(" ");

    }

    draw(ctx)

    {

        const width = this.width;

Source/WebCore/Modules/modern-media-controls/controls/slider.js

@@class Slider extends LayoutItem

        this._input = new LayoutNode(`<input type="range" min="0" max="1" step="0.001" />`);

        this._input.element.addEventListener("mousedown", this);

        this._input.element.addEventListener("input", this);

41 this._input.element.addEventListener("change", this);

        this.isActive = false;

        this.value = 0;

@@class Slider extends LayoutItem

        case "mouseup":

            this._handleMouseupEvent();

            break;

79 case "change":

7880 case "input":

79 this._handl~~eInputEvent~~();

81 this._valueDidChange();

            break;

        }

    }

@@class Slider extends LayoutItem

        this.needsLayout = true;

    }

126 _handl~~eInputEvent~~()

128 _valueDidChange()

    {

        if (this.uiDelegate && typeof this.uiDelegate.controlValueDidChange === "function")

            this.uiDelegate.controlValueDidChange(this);

Source/WebCore/Modules/modern-media-controls/controls/time-control.js

@@class TimeControl extends LayoutItem

        this.remainingTimeLabel.x = this.scrubber.x + this.scrubber.width + ScrubberMargin;

    }

    updateScrubberLabel()

    {

        this.scrubber.inputAccessibleLabel = this.elapsedTimeLabel.value;

    }

9195}

Source/WebCore/Modules/modern-media-controls/controls/time-label.js

@@class TimeLabel extends LayoutNode

    commitProperty(propertyName)

    {

57 if (propertyName === "value")

57 if (propertyName === "value") {

5858 this.element.textContent = this._formattedTime();

            if (this._timeControl)

                this._timeControl.updateScrubberLabel();

        }

        else

            super.commitProperty(propertyName);

    }

@@class TimeLabel extends LayoutNode

    _formattedTime()

    {

        const time = this._value || 0;

        const absTime = Math.abs(time);

        const intSeconds = Math.floor(absTime % 60).toFixed(0);

        const intMinutes = Math.floor((absTime / 60) % 60).toFixed(0);

        const intHours = Math.floor(absTime / (60 * 60)).toFixed(0);

        const value = this._value || 0;

        const time = formatTimeByUnit(value);

        const timeStrings = [time.minutes, time.seconds];

        if (time.hours > 0 || (this._timeControl && this._timeControl.useSixDigitsForTimeLabels))

            timeStrings.unshift(time.hours);

7275

        const timeStrings = [intMinutes, intSeconds];

        if (intHours > 0 || (this._timeControl && this._timeControl.useSixDigitsForTimeLabels))

            timeStrings.unshift(intHours);

        const sign = time < 0 ? "-" : "";

76 const sign = value < 0 ? "-" : "";

        return sign + timeStrings.map(x => `00${x}`.slice(-2)).join(":");

    }

Source/WebCore/Modules/modern-media-controls/main.js

@@function UIString(string)

    console.error(`Localization for "${string}" not found.`);

    return "LOCALIZED STRING NOT FOUND";

}

function formatTimeByUnit(value)

{

    const time = value || 0;

    const absTime = Math.abs(time);

    return {

        "seconds": Math.floor(absTime % 60).toFixed(0),

        "minutes": Math.floor((absTime / 60) % 60).toFixed(0),

        "hours": Math.floor(absTime / (60 * 60)).toFixed(0)

    };

}

function unitizeTime(value, unit)

{

    let returnedUnit = UIString(unit);

    if (value > 1)

        returnedUnit = UIString(`${unit}s`);

    return `${value} ${returnedUnit}`;

}

LayoutTests/ChangeLog

2017-04-20  Aaron Chu  <aaron_chu@apple.com>

        AX: Modern Media Controls Timeline slider should be operable

        https://bugs.webkit.org/show_bug.cgi?id=170250

        Reviewed by NOBODY (OOPS!).

        * media/modern-media-controls/scrubber/scrubber-has-correct-ax-label-expected.txt: Added.

        * media/modern-media-controls/scrubber/scrubber-has-correct-ax-label.html: Added.

2017-04-16  Joseph Pecoraro  <pecoraro@apple.com>

        test262: test262/test/built-ins/Object/prototype/toLocaleString/primitive_this_value.js

LayoutTests/media/modern-media-controls/scrubber/scrubber-has-correct-ax-label-expected.txt

Testing for an accessibility text on the scrubber that correctly reflects the changes in media.currentTime.

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".

PASS scrubberInput.getAttribute('aria-valuetext') is "0 Minute 0 Second"

PASS media.currentTime is 2

PASS scrubberInput.getAttribute('aria-valuetext') === '0 Minute 2 Seconds' became true

PASS successfullyParsed is true

TEST COMPLETE

LayoutTests/media/modern-media-controls/scrubber/scrubber-has-correct-ax-label.html

<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>

<style type="text/css" media="screen">

    video, #host {

        position: absolute;

        top: 0;

        left: 0;

        width: 800px;

        height: 240px;

    }

</style>

<video src="../../content/test.mp4" style="width: 320px; height: 240px;" controls></video>

<div id="host"></div>

<script type="text/javascript">

window.jsTestIsAsync = true;

description("Testing for an accessibility text on the scrubber that correctly reflects the changes in media.currentTime.");

const container = document.querySelector("div#host");

const media = document.querySelector("video");

const mediaController = createControls(container, media, null);

mediaController.controls.showsStartButton = false;

const scrubberNodes = mediaController.controls.timeControl.scrubber.children;

const scrubberInput = scrubberNodes[scrubberNodes.length - 1].element;

media.addEventListener("canplay", () => {

    shouldBeEqualToString("scrubberInput.getAttribute('aria-valuetext')", "0 Minute 0 Second");

    media.currentTime = 2;

    shouldBe("media.currentTime", "2");

    shouldBecomeEqual("scrubberInput.getAttribute('aria-valuetext') === '0 Minute 2 Seconds'", "true", finishJSTest);

})

</script>

<script src="../../../resources/js-test-post.js"></script>

</body>