Changeset 158455 in webkit


Ignore:
Timestamp:
Nov 1, 2013 2:23:51 PM (10 years ago)
Author:
commit-queue@webkit.org
Message:

AX: Regression: media controls are no longer accessible
​https://bugs.webkit.org/show_bug.cgi?id=121990

Patch by James Craig <​jcraig@apple.com> on 2013-11-01
Reviewed by Jer Noble.

Source/WebCore:

Updated existing test coverage.
Added ARIA roles, attrs, and labels to the new media controls shadow DOM.
Localization will be handled in ​http://webkit.org/b/120956

  • Modules/mediacontrols/mediaControlsApple.js:

(Controller.prototype.UIString):
(Controller.prototype.createControls):
(Controller.prototype.handleLoadStart):
(Controller.prototype.handleError):
(Controller.prototype.handleAbort):
(Controller.prototype.handleSuspend):
(Controller.prototype.handleStalled):
(Controller.prototype.handleWaiting):
(Controller.prototype.handleFullscreenChange):
(Controller.prototype.handleMuteButtonClicked):
(Controller.prototype.handleMinButtonClicked):
(Controller.prototype.handleMaxButtonClicked):
(Controller.prototype.handleVolumeSliderChange):
(Controller.prototype.updatePlaying):

LayoutTests:

Removed failure expectation and updated expected render dump output.

  • platform/mac/TestExpectations:
  • platform/mac/accessibility/media-element-expected.txt:
Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r158450 r158455  
     12013-11-01  James Craig  <jcraig@apple.com>
     2
     3        AX: Regression: media controls are no longer accessible
     4        https://bugs.webkit.org/show_bug.cgi?id=121990
     5
     6        Reviewed by Jer Noble.
     7
     8        Removed failure expectation and updated expected render dump output.
     9
     10        * platform/mac/TestExpectations:
     11        * platform/mac/accessibility/media-element-expected.txt:
     12
    1132013-11-01  Afonso R. Costa Jr.  <afonso.costa@samsung.com>
    214

  • trunk/LayoutTests/platform/mac/TestExpectations

    r158436 r158455  
    12101210webkit.org/b/114193 transitions/cancel-transition.html [ Pass Failure ]
    12111211
    1212 webkit.org/b/121990 accessibility/media-element.html [ Failure ]
    12131212webkit.org/b/121992 media/media-volume-slider-rendered-below.html [ Failure ]
    12141213webkit.org/b/121992 media/media-volume-slider-rendered-normal.html [ Timeout Failure ]

  • trunk/LayoutTests/platform/mac/accessibility/media-element-expected.txt

    r151852 r158455  
    55State at 'canplaythrough' event:
    66
    7     description: AXDescription: video playback
    8     role: AXRole: AXToolbar
     7    description: AXDescription:
     8    role: AXRole: AXGroup
    99
    1010
    11         description: AXDescription: back 30 seconds
    12         role: AXRole: AXButton
     11        description: AXDescription: Video Playback
     12        role: AXRole: AXToolbar
    1313
    1414
    15         description: AXDescription: play
    16         role: AXRole: AXButton
     15            description: AXDescription: Rewind 30 Seconds
     16            role: AXRole: AXButton
    1717
    1818
    19         description: AXDescription: elapsed time
    20         role: AXRole: AXGroup
    21         subrole: AXSubrole: AXApplicationTimer
     19            description: AXDescription: Play
     20            role: AXRole: AXButton
    2221
    2322
    24             description: AXDescription:
     23            description: AXDescription: Elapsed
    2524            role: AXRole: AXGroup
     25            subrole: AXSubrole: AXApplicationTimer
    2626
    2727
    2828                description: AXDescription:
    29                 role: AXRole: AXStaticText
     29                role: AXRole: AXGroup
    3030
    3131
    32         description: AXDescription:
    33         role: AXRole: AXSlider
    34         subrole: AXSubrole: AXTimeline
     32                    description: AXDescription:
     33                    role: AXRole: AXStaticText
    3534
    3635
    37             description: AXDescription:
    38             role: AXRole: AXValueIndicator
    39 
    40 
    41         description: AXDescription: remaining time
    42         role: AXRole: AXGroup
    43         subrole: AXSubrole: AXApplicationTimer
    44 
    45 
    46             description: AXDescription:
    47             role: AXRole: AXGroup
     36            description: AXDescription: Duration
     37            role: AXRole: AXSlider
    4838
    4939
    5040                description: AXDescription:
    51                 role: AXRole: AXStaticText
     41                role: AXRole: AXValueIndicator
    5242
    5343
    54         description: AXDescription: enter fullscreen
    55         role: AXRole: AXButton
     44            description: AXDescription: Remaining
     45            role: AXRole: AXGroup
     46            subrole: AXSubrole: AXApplicationTimer
    5647
    5748
    58         description: AXDescription: mute
    59         role: AXRole: AXButton
     49                description: AXDescription:
     50                role: AXRole: AXGroup
     51
     52
     53                    description: AXDescription:
     54                    role: AXRole: AXStaticText
     55
     56
     57            description: AXDescription: Mute
     58            role: AXRole: AXCheckBox
     59
     60
     61            description: AXDescription: Display Full Screen
     62            role: AXRole: AXCheckBox
    6063
    6164

  • trunk/Source/WebCore/ChangeLog

    r158453 r158455  
     12013-11-01  James Craig  <jcraig@apple.com>
     2
     3        AX: Regression: media controls are no longer accessible
     4        https://bugs.webkit.org/show_bug.cgi?id=121990
     5
     6        Reviewed by Jer Noble.
     7
     8        Updated existing test coverage.
     9        Added ARIA roles, attrs, and labels to the new media controls shadow DOM.
     10        Localization will be handled in http://webkit.org/b/120956
     11
     12        * Modules/mediacontrols/mediaControlsApple.js:
     13        (Controller.prototype.UIString):
     14        (Controller.prototype.createControls):
     15        (Controller.prototype.handleLoadStart):
     16        (Controller.prototype.handleError):
     17        (Controller.prototype.handleAbort):
     18        (Controller.prototype.handleSuspend):
     19        (Controller.prototype.handleStalled):
     20        (Controller.prototype.handleWaiting):
     21        (Controller.prototype.handleFullscreenChange):
     22        (Controller.prototype.handleMuteButtonClicked):
     23        (Controller.prototype.handleMinButtonClicked):
     24        (Controller.prototype.handleMaxButtonClicked):
     25        (Controller.prototype.handleVolumeSliderChange):
     26        (Controller.prototype.updatePlaying):
     27
    1282013-11-01  Andreas Kling  <akling@apple.com>
    229

  • trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js

    r158112 r158455  
    7878    },
    7979
     80    // Localized string accessor
     81    UIString: function(s){
     82        if (this.localizedStrings[s])
     83            return this.localizedStrings[s];
     84        else
     85            return s; // FIXME: log something if string not localized.
     86    },
     87    localizedStrings: {
     88        // FIXME: Move localization to ext strings file <http://webkit.org/b/120956>
     89        'Aborted': 'Aborted',
     90        'Audio Playback': 'Audio Playback',
     91        'Display Full Screen': 'Display Full Screen',
     92        'Duration': 'Duration',
     93        'Error': 'Error',
     94        'Fast Forward': 'Fast Forward',
     95        'Loading': 'Loading',
     96        'Maximum Volume': 'Maximum Volume',
     97        'Minimum Volume': 'Minimum Volume',
     98        'Mute': 'Mute',
     99        'Play': 'Play',
     100        'Pause': 'Pause',
     101        'Rewind': 'Rewind',
     102        'Rewind %%sec%% Seconds': 'Rewind %%sec%% Seconds',
     103        'Show Captions': 'Show Captions',
     104        'Stalled': 'Stalled',
     105        'Suspended': 'Suspended',
     106        'Elapsed': 'Elapsed',
     107        'Remaining': 'Remaining',
     108        'Video Playback': 'Video Playback',
     109        'Volume': 'Volume',
     110        'Waiting': 'Waiting'
     111    },
     112
    80113    listenFor: function(element, eventName, handler, useCapture)
    81114    {
    … …  
    198231        var panel = this.controls.panel = document.createElement('div');
    199232        panel.setAttribute('pseudo', '-webkit-media-controls-panel');
     233        panel.setAttribute('aria-label', (this.isAudio() ? this.UIString('Audio Playback') : this.UIString('Video Playback')));
     234        panel.setAttribute('role', 'toolbar');
    200235        this.listenFor(panel, 'mousedown', this.handlePanelMouseDown);
    201236        this.listenFor(panel, 'transitionend', this.handlePanelTransitionEnd);
    … …  
    205240        var rewindButton = this.controls.rewindButton = document.createElement('button');
    206241        rewindButton.setAttribute('pseudo', '-webkit-media-controls-rewind-button');
     242        rewindButton.setAttribute('aria-label', this.UIString('Rewind %%sec%% Seconds').replace('%%sec%%', this.RewindAmount));
    207243        this.listenFor(rewindButton, 'click', this.handleRewindButtonClicked);
    208244
    209245        var seekBackButton = this.controls.seekBackButton = document.createElement('button');
    210246        seekBackButton.setAttribute('pseudo', '-webkit-media-controls-seek-back-button');
     247        seekBackButton.setAttribute('aria-label', this.UIString('Rewind'));
    211248        this.listenFor(seekBackButton, 'mousedown', this.handleSeekBackMouseDown);
    212249        this.listenFor(seekBackButton, 'mouseup', this.handleSeekBackMouseUp);
    … …  
    214251        var seekForwardButton = this.controls.seekForwardButton = document.createElement('button');
    215252        seekForwardButton.setAttribute('pseudo', '-webkit-media-controls-seek-forward-button');
     253        seekForwardButton.setAttribute('aria-label', this.UIString('Fast Forward'));
    216254        this.listenFor(seekForwardButton, 'mousedown', this.handleSeekForwardMouseDown);
    217255        this.listenFor(seekForwardButton, 'mouseup', this.handleSeekForwardMouseUp);
    … …  
    219257        var playButton = this.controls.playButton = document.createElement('button');
    220258        playButton.setAttribute('pseudo', '-webkit-media-controls-play-button');
     259        playButton.setAttribute('aria-label', this.UIString('Play'));
    221260        this.listenFor(playButton, 'click', this.handlePlayButtonClicked);
    222261
    … …  
    230269        var currentTime = this.controls.currentTime = document.createElement('div');
    231270        currentTime.setAttribute('pseudo', '-webkit-media-controls-current-time-display');
     271        currentTime.setAttribute('aria-label', this.UIString('Elapsed'));
     272        currentTime.setAttribute('role', 'timer');
    232273
    233274        var timeline = this.controls.timeline = document.createElement('input');
    234275        timeline.setAttribute('pseudo', '-webkit-media-controls-timeline');
     276        timeline.setAttribute('aria-label', this.UIString('Duration'));
    235277        timeline.type = 'range';
    236278        this.listenFor(timeline, 'change', this.handleTimelineChange);
    … …  
    251293        var remainingTime = this.controls.remainingTime = document.createElement('div');
    252294        remainingTime.setAttribute('pseudo', '-webkit-media-controls-time-remaining-display');
     295        remainingTime.setAttribute('aria-label', this.UIString('Remaining'));
     296        remainingTime.setAttribute('role', 'timer');
    253297
    254298        var muteBox = this.controls.muteBox = document.createElement('div');
    … …  
    257301        var muteButton = this.controls.muteButton = document.createElement('button');
    258302        muteButton.setAttribute('pseudo', '-webkit-media-controls-mute-button');
     303        muteButton.setAttribute('aria-label', this.UIString('Mute'));
     304        muteButton.setAttribute('role', 'checkbox');
     305        muteButton.setAttribute('aria-checked', 'false');
    259306        this.listenFor(muteButton, 'click', this.handleMuteButtonClicked);
    260307
    261308        var minButton = this.controls.minButton = document.createElement('button');
    262309        minButton.setAttribute('pseudo', '-webkit-media-controls-volume-min-button');
     310        minButton.setAttribute('aria-label', this.UIString('Minimum Volume'));
    263311        this.listenFor(minButton, 'click', this.handleMinButtonClicked);
    264312
    265313        var maxButton = this.controls.maxButton = document.createElement('button');
    266314        maxButton.setAttribute('pseudo', '-webkit-media-controls-volume-max-button');
     315        maxButton.setAttribute('aria-label', this.UIString('Maximum Volume'));
    267316        this.listenFor(maxButton, 'click', this.handleMaxButtonClicked);
    268317
    … …  
    272321        var volume = this.controls.volume = document.createElement('input');
    273322        volume.setAttribute('pseudo', '-webkit-media-controls-volume-slider');
     323        volume.setAttribute('aria-label', this.UIString('Volume'));
    274324        volume.type = 'range';
    275325        volume.min = 0;
    … …  
    280330        var captionButton = this.controls.captionButton = document.createElement('button');
    281331        captionButton.setAttribute('pseudo', '-webkit-media-controls-toggle-closed-captions-button');
     332        captionButton.setAttribute('aria-label', this.UIString('Show Captions'));
     333        captionButton.setAttribute('role', 'checkbox');
     334        captionButton.setAttribute('aria-checked', 'false');
    282335        this.listenFor(captionButton, 'click', this.handleCaptionButtonClicked);
    283336
    284337        var fullscreenButton = this.controls.fullscreenButton = document.createElement('button');
    285338        fullscreenButton.setAttribute('pseudo', '-webkit-media-controls-fullscreen-button');
     339        fullscreenButton.setAttribute('aria-label', this.UIString('Display Full Screen'));
     340        fullscreenButton.setAttribute('role', 'checkbox');
     341        fullscreenButton.setAttribute('aria-checked', 'false');
    286342        this.listenFor(fullscreenButton, 'click', this.handleFullscreenButtonClicked);
    287343    },
    … …  
    360416    handleLoadStart: function(event)
    361417    {
    362         // FIXME: Needs localization <http://webkit.org/b/120956>
    363         this.controls.statusDisplay.innerText = 'Loading';
     418        this.controls.statusDisplay.innerText = this.UIString('Loading');
    364419    },
    365420
    366421    handleError: function(event)
    367422    {
    368         // FIXME: Needs localization <http://webkit.org/b/120956>
    369         this.controls.statusDisplay.innerText = 'Error';
     423        this.controls.statusDisplay.innerText = this.UIString('Error');
    370424    },
    371425
    372426    handleAbort: function(event)
    373427    {
    374         // FIXME: Needs localization <http://webkit.org/b/120956>
    375         this.controls.statusDisplay.innerText = 'Aborted';
     428        this.controls.statusDisplay.innerText = this.UIString('Aborted');
    376429    },
    377430
    378431    handleSuspend: function(event)
    379432    {
    380         // FIXME: Needs localization <http://webkit.org/b/120956>
    381         this.controls.statusDisplay.innerText = 'Suspended';
     433        this.controls.statusDisplay.innerText = this.UIString('Suspended');
    382434    },
    383435
    384436    handleStalled: function(event)
    385437    {
    386         // FIXME: Needs localization <http://webkit.org/b/120956>
    387         this.controls.statusDisplay.innerText = 'Stalled';
     438        this.controls.statusDisplay.innerText = this.UIString('Stalled');
    388439    },
    389440
    390441    handleWaiting: function(event)
    391442    {
    392         // FIXME: Needs localization <http://webkit.org/b/120956>
    393         this.controls.statusDisplay.innerText = 'Waiting';
     443        this.controls.statusDisplay.innerText = this.UIString('Waiting');
    394444    },
    395445
    … …  
    470520        if (this.isFullScreen()) {
    471521            this.controls.fullscreenButton.classList.add(this.ClassNames.exit);
     522            this.controls.fullscreenButton.setAttribute('aria-checked', 'true');
    472523            this.setControlsType(Controller.FullScreenControls);
    473524        } else {
    474525            this.controls.fullscreenButton.classList.remove(this.ClassNames.exit);
     526            this.controls.fullscreenButton.setAttribute('aria-checked', 'false');
    475527            this.setControlsType(Controller.InlineControls);
    476528        }
    … …  
    616668    {
    617669        this.video.muted = !this.video.muted;
     670        if (this.video.muted)
     671            this.controls.muteButton.setAttribute('aria-checked', 'true');
    618672    },
    619673
    620674    handleMinButtonClicked: function(event)
    621675    {
    622         if (this.video.muted)
     676        if (this.video.muted) {
    623677            this.video.muted = false;
     678            this.controls.muteButton.setAttribute('aria-checked', 'false');
     679        }
    624680        this.video.volume = 0;
    625681    },
    … …  
    627683    handleMaxButtonClicked: function(event)
    628684    {
    629         if (this.video.muted)
     685        if (this.video.muted) {
    630686            this.video.muted = false;
     687            this.controls.muteButton.setAttribute('aria-checked', 'false');
     688        }
    631689        this.video.volume = 1;
    632690    },
    … …  
    634692    handleVolumeSliderChange: function(event)
    635693    {
    636         if (this.video.muted)
     694        if (this.video.muted) {
    637695            this.video.muted = false;
     696            this.controls.muteButton.setAttribute('aria-checked', 'false');
     697        }
    638698        this.video.volume = this.controls.volume.value;
    639699    },
    … …  
    744804            this.controls.panel.classList.add(this.ClassNames.paused);
    745805            this.controls.playButton.classList.add(this.ClassNames.paused);
     806            this.controls.playButton.setAttribute('aria-label', this.UIString('Play'));
    746807        } else {
    747808            this.controls.panel.classList.remove(this.ClassNames.paused);
    748809            this.controls.playButton.classList.remove(this.ClassNames.paused);
     810            this.controls.playButton.setAttribute('aria-label', this.UIString('Pause'));
    749811
    750812            this.controls.panel.classList.remove(this.ClassNames.show);
Note: See TracChangeset for help on using the changeset viewer.