sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Press This: fix accessibility for the post options "sidebar". Fix size of the Add Category button. 

Part props afercis, joedolson. Fixes #31575.

git-svn-id: https://develop.svn.wordpress.org/trunk@31925 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz 2015-03-30 03:08:30 +00:00
parent 2fd1791bc1
commit 9369d03bc5
3 changed files with 32 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/wp-admin/css/press-this.css
View File

@ -854,7 +854,9 @@ input[type="search"].categories-search,
.add-cat-toggle { .add-cat-toggle {
float: right; float: right;
margin-top: -33px; margin-top: -45px;
line-height: 20px;
padding: 12px 10px 8px;
} }
.add-cat-toggle:focus { .add-cat-toggle:focus {
@ -863,7 +865,7 @@ input[type="search"].categories-search,
} }
.add-cat-toggle.is-toggled { .add-cat-toggle.is-toggled {
margin-top: -36px; padding: 10px;
} }
.add-cat-toggle.is-toggled .dashicons:before { .add-cat-toggle.is-toggled .dashicons:before {
@ -1185,34 +1187,32 @@ html {
vertical-align: middle; vertical-align: middle;
} }
.options-open, .options,
.options-close { .options.open .on-closed,
.options.closed .on-open {
display: none; display: none;
} }
@media (max-width: 900px) { @media (max-width: 900px) {
.options-open, .options {
.options-close {
display: block; display: block;
} }
} }
.options-open.is-hidden,
.options-close.is-hidden,
.options-panel-back.is-hidden { .options-panel-back.is-hidden {
display: none; display: none;
} }
.options-open:focus .dashicons { .options:focus .dashicons {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
.options-open .dashicons { .options .dashicons {
margin-top: 3px; margin-top: 3px;
} }
.options-close { .options {
color: #2ea2cc; color: #2ea2cc;
} }

8
src/wp-admin/includes/class-wp-press-this.php
View File

@ -1201,10 +1201,12 @@ class WP_Press_This {
<span class="current-site-name"><?php bloginfo( 'name' ); ?></span> <span class="current-site-name"><?php bloginfo( 'name' ); ?></span>
</a> </a>
</h1> </h1>
<button type="button" class="options-open button-subtle"> <button type="button" class="options button-subtle closed">
<span class="dashicons dashicons-tag"></span><span class="screen-reader-text"><?php _e( 'Show post options' ); ?></span> <span class="dashicons dashicons-tag on-closed"></span>
<span class="screen-reader-text on-closed"><?php _e( 'Show post options' ); ?></span>
<span aria-hidden="true" class="on-open"><?php _e( 'Done' ); ?></span>
<span class="screen-reader-text on-open"><?php _e( 'Hide post options' ); ?></span>
</button> </button>
<button type="button" class="options-close button-subtle is-hidden"><?php _e( 'Done' ); ?></button>
</div> </div>
<div id="scanbar" class="scan"> <div id="scanbar" class="scan">

25
src/wp-admin/js/press-this.js
View File

@ -488,11 +488,12 @@
function openSidebar() { function openSidebar() {
sidebarIsOpen = true; sidebarIsOpen = true;
$( '.options-open, .press-this-actions, #scanbar' ).addClass( isHidden ); $( '.options' ).removeClass( 'closed' ).addClass( 'open' );
$( '.options-close, .options-panel-back' ).removeClass( isHidden ); $( '.press-this-actions, #scanbar' ).addClass( isHidden );
$( '.options-panel-back' ).removeClass( isHidden );
$( '.options-panel' ).removeClass( offscreenHidden ) $( '.options-panel' ).removeClass( offscreenHidden )
.one( 'transitionend', function() { .one( transitionEndEvent, function() {
$( '.post-option:first' ).focus(); $( '.post-option:first' ).focus();
} ); } );
} }
@ -500,11 +501,12 @@
function closeSidebar() { function closeSidebar() {
sidebarIsOpen = false; sidebarIsOpen = false;
$( '.options-close, .options-panel-back' ).addClass( isHidden ); $( '.options' ).removeClass( 'open' ).addClass( 'closed' );
$( '.options-open, .press-this-actions, #scanbar' ).removeClass( isHidden ); $( '.options-panel-back' ).addClass( isHidden );
$( '.press-this-actions, #scanbar' ).removeClass( isHidden );
$( '.options-panel' ).addClass( isOffScreen ) $( '.options-panel' ).addClass( isOffScreen )
.one( 'transitionend', function() { .one( transitionEndEvent, function() {
$( this ).addClass( isHidden ); $( this ).addClass( isHidden );
// Reset to options list // Reset to options list
$( '.post-options' ).removeClass( offscreenHidden ); $( '.post-options' ).removeClass( offscreenHidden );
@ -620,8 +622,13 @@
monitorPlaceholder(); monitorPlaceholder();
monitorCatList(); monitorCatList();
$( '.options-open' ).on( 'click.press-this', openSidebar ); $( '.options' ).on( 'click.press-this', function() {
$( '.options-close' ).on( 'click.press-this', closeSidebar ); if ( $( this ).hasClass( 'open' ) ) {
closeSidebar();
} else {
openSidebar();
}
});
// Close the sidebar when focus moves outside of it. // Close the sidebar when focus moves outside of it.
$( '.options-panel, .options-panel-back' ).on( 'focusout.press-this', function() { $( '.options-panel, .options-panel-back' ).on( 'focusout.press-this', function() {
@ -632,7 +639,7 @@
if ( sidebarIsOpen && node && ! $node.hasClass( 'options-panel-back' ) && if ( sidebarIsOpen && node && ! $node.hasClass( 'options-panel-back' ) &&
( node.nodeName === 'BODY' || ( node.nodeName === 'BODY' ||
( ! $node.closest( '.options-panel' ).length && ( ! $node.closest( '.options-panel' ).length &&
! $node.closest( '.options-open' ).length ) ) ) { ! $node.closest( '.options' ).length ) ) ) {
closeSidebar(); closeSidebar();
} }