WordPress.org

Make WordPress Core

Ticket #38678: 38678.1.patch

File 38678.1.patch, 1.7 KB (added by davidakennedy, 4 years ago)

First pass at adding accessibility improvements for video headers.

  • src/wp-includes/js/wp-custom-header.js

     
    6161        }
    6262
    6363        function nativeHandler( settings ) {
    64                 var video = document.createElement( 'video' );
     64                var video = document.createElement( 'video' ),
     65                        button = document.createElement( 'button' );
    6566
    6667                video.id = 'wp-custom-header-video';
    6768                video.autoplay = 'autoplay';
     
    7071                video.width = settings.width;
    7172                video.height = settings.height;
    7273
    73                 video.addEventListener( 'click', function() {
     74                button.setAttribute( 'type', 'button' );
     75                button.setAttribute( 'id', 'wp-custom-header-video-button' );
     76                button.setAttribute( 'class', 'wp-custom-header-video-button' );
     77                button.setAttribute( 'aria-hidden', true );
     78                button.innerHTML = 'Pause';
     79
     80                button.addEventListener( 'click', function() {
    7481                        if ( video.paused ) {
     82                                button.innerHTML = 'Pause';
    7583                                video.play();
    7684                        } else {
     85                                button.innerHTML = 'Play';
    7786                                video.pause();
    7887                        }
    7988                });
     
    8089
    8190                settings.container.innerHTML = '';
    8291                settings.container.appendChild( video );
     92                settings.container.appendChild( button );
    8393                video.src = settings.videoUrl;
    8494        }
    8595
  • src/wp-includes/theme.php

     
    14221422        }
    14231423
    14241424        return sprintf(
    1425                 '<div id="wp-custom-header" class="wp-custom-header">%s</div>',
     1425                '<div id="wp-custom-header" class="wp-custom-header" aria-hidden="true">%s</div>',
    14261426                get_header_image_tag()
    14271427        );
    14281428}