WordPress.org

Make WordPress Core

Changeset 38520


Ignore:
Timestamp:
09/04/16 21:50:22 (16 months ago)
Author:
afercia
Message:

Accessibility: Improve the Customizer and Theme Installer initial focus.

The Customizer and Theme Installer open in full overlays that need to receive
focus. Also, keyboard navigation should be constrained within the overlays. Using
CSS visibility to hide all the content except the overlays, makes them the only
available and focusable content and allows browsers to handle focus natively.

See #29158.
Fixes #33228, #27705.

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/themes.css

    r38172 r38520  
    11831183body.full-overlay-active { 
    11841184    overflow: hidden; 
     1185    /* Hide all the content, the Customizer overlay is then made visible to be the only available content. */ 
     1186    visibility: hidden; 
    11851187} 
    11861188 
     
    16141616} 
    16151617 
    1616 .customize-active #customize-container { 
    1617     display: block; 
     1618/* Make the Customizer and Theme installer overlays the only available content. */ 
     1619#customize-container, 
     1620.theme-install-overlay { 
     1621    visibility: visible; 
    16181622} 
    16191623 
  • trunk/src/wp-admin/js/customize-controls.js

    r38513 r38520  
    36213621        } 
    36223622 
    3623         var parent, topFocus, 
     3623        var parent, 
    36243624            body = $( document.body ), 
    36253625            overlay = body.children( '.wp-full-overlay' ), 
     
    42354235 
    42364236        api.trigger( 'ready' ); 
    4237  
    4238         // Make sure left column gets focus 
    4239         topFocus = closeBtn; 
    4240         topFocus.focus(); 
    4241         setTimeout(function () { 
    4242             topFocus.focus(); 
    4243         }, 200); 
    4244  
    42454237    }); 
    42464238 
  • trunk/src/wp-admin/js/theme.js

    r38218 r38520  
    867867 
    868868    render: function() { 
    869         var self = this, currentPreviewDevice, 
    870             data = this.model.toJSON(); 
     869        var self = this, 
     870            currentPreviewDevice, 
     871            data = this.model.toJSON(), 
     872            $body = $( document.body ); 
     873 
     874        $body.attr( 'aria-busy', 'true' ); 
    871875 
    872876        this.$el.removeClass( 'iframe-ready' ).html( this.html( data ) ); 
     
    880884 
    881885        this.$el.fadeIn( 200, function() { 
    882             $( 'body' ).addClass( 'theme-installer-active full-overlay-active' ); 
    883             $( '.close-full-overlay' ).focus(); 
     886            $body.addClass( 'theme-installer-active full-overlay-active' ); 
    884887        }); 
    885888 
     
    891894    iframeLoaded: function() { 
    892895        this.$el.addClass( 'iframe-ready' ); 
     896        $( document.body ).attr( 'aria-busy', 'false' ); 
    893897    }, 
    894898 
  • trunk/src/wp-includes/js/customize-loader.js

    r37339 r38520  
    184184         */ 
    185185        opened: function() { 
    186             Loader.body.addClass( 'customize-active full-overlay-active' ); 
    187         }, 
    188  
    189         /** 
    190          * Close the Customizer overlay and return focus to the link that opened it. 
     186            Loader.body.addClass( 'customize-active full-overlay-active' ).attr( 'aria-busy', 'true' ); 
     187        }, 
     188 
     189        /** 
     190         * Close the Customizer overlay. 
    191191         */ 
    192192        close: function() { 
     
    209209            if ( this.originalDocumentTitle ) { 
    210210                document.title = this.originalDocumentTitle; 
    211             } 
    212  
    213             // Return focus to link that was originally clicked. 
    214             if ( this.link ) { 
    215                 this.link.focus(); 
    216211            } 
    217212        }, 
     
    228223            Loader.body.removeClass( 'customize-active full-overlay-active' ).removeClass( 'customize-loading' ); 
    229224            $( window ).off( 'beforeunload', Loader.beforeunload ); 
     225            /* 
     226             * Return focus to the link that opened the Customizer overlay after 
     227             * the body element visibility is restored. 
     228             */ 
     229            if ( Loader.link ) { 
     230                Loader.link.focus(); 
     231            } 
    230232        }, 
    231233 
     
    234236         */ 
    235237        loaded: function() { 
    236             Loader.body.removeClass('customize-loading'); 
     238            Loader.body.removeClass( 'customize-loading' ).attr( 'aria-busy', 'false' ); 
    237239        }, 
    238240 
Note: See TracChangeset for help on using the changeset viewer.