WordPress.org

Make WordPress Core

Changeset 33069


Ignore:
Timestamp:
07/03/2015 08:18:17 PM (6 years ago)
Author:
ocean90
Message:

Customizer: Accessibility enhancements.

  • Move tabindex/focus code into onChangeExpanded so that it works for cases where expand() is called directly.
  • Use visibility: hidden to hide hidden elements from keyboard focus and screen readers.

props celloexpressions.
fixes #31336.

Location:
trunk/src/wp-admin
Files:
2 edited

Legend:

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

    r33045 r33069  
    490490}
    491491
     492.wp-full-overlay.section-open #customize-controls .wp-full-overlay-sidebar-content {
     493    visibility: hidden;
     494    overflow-y: hidden;
     495}
     496
     497.wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open {
     498    visibility: visible;
     499}
     500
     501.wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open .accordion-section-content {
     502    overflow-y: auto;
     503}
     504
    492505p.customize-section-description {
    493506    font-style: normal;
  • trunk/src/wp-admin/js/customize-controls.js

    r32976 r33069  
    525525         */
    526526        attachEvents: function () {
    527             var section = this,
    528                 backBtn = section.container.find( '.customize-section-back' ),
    529                 sectionTitle = section.container.find( '.accordion-section-title' ).first();
     527            var section = this;
    530528
    531529            // Expand/Collapse accordion sections on click.
     
    538536                if ( section.expanded() ) {
    539537                    section.collapse();
    540                     backBtn.attr( 'tabindex', '-1' );
    541                     sectionTitle.attr( 'tabindex', '0' );
    542                     sectionTitle.focus();
    543538                } else {
    544539                    section.expand();
    545                     sectionTitle.attr( 'tabindex', '-1' );
    546                     backBtn.attr( 'tabindex', '0' );
    547                     backBtn.focus();
    548540                }
    549541            });
     
    593585                content = section.container.find( '.accordion-section-content' ),
    594586                overlay = section.container.closest( '.wp-full-overlay' ),
     587                backBtn = section.container.find( '.customize-section-back' ),
     588                sectionTitle = section.container.find( '.accordion-section-title' ).first(),
    595589                expand;
    596590
     
    607601                        scroll = container.scrollTop();
    608602                        content.css( 'margin-top', ( 45 - position - scroll ) );
     603                        content.css( 'height', ( window.innerHeight - 90 ) );
     604                        sectionTitle.attr( 'tabindex', '-1' );
     605                        backBtn.attr( 'tabindex', '0' );
     606                        backBtn.focus();
    609607                        if ( args.completeCallback ) {
    610608                            args.completeCallback();
     
    635633                content.css( 'margin-top', 'inherit' );
    636634                container.scrollTop( 0 );
    637                 section.container.find( '.accordion-section-title' ).focus();
     635                backBtn.attr( 'tabindex', '-1' );
     636                sectionTitle.attr( 'tabindex', '0' );
     637                sectionTitle.focus();
    638638                if ( args.completeCallback ) {
    639639                    args.completeCallback();
Note: See TracChangeset for help on using the changeset viewer.