Ticket #28873: 28873.4.patch

src/wp-admin/css/forms.css

@@ -748 +748 @@
         box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
 }
 
+.pressthis button.show-pressthis-code {
+        margin-left: 2em;
+}
+
+.pressthis-code-wrap {
+        /* avoid a few pixels jump on slideToggle making this a new formatting context */
+        overflow: hidden;
+}
+
+.pressthis-code-wrap textarea.pressthis-code {
+        height: 100px;
+        width: 60em;
+        max-width: 100%;
+        margin: 1em 0;
+}
+
 /*------------------------------------------------------------------------------
   20.0 - Settings
 ------------------------------------------------------------------------------*/

src/wp-admin/tools.php

@@ -41 +41 @@
         <p><?php _e('Press This is a bookmarklet: a little app that runs in your browser and lets you grab bits of the web.');?></p>
 
         <p><?php _e('Use Press This to clip text, images and videos from any web page. Then edit and add more straight from Press This before you save or publish it in a post on your site.'); ?></p>
-        <p class="description"><?php _e('Drag-and-drop the following link to your bookmarks bar or right click it and add it to your favorites for a posting shortcut.') ?></p>
-        <p class="pressthis"><a onclick="return false;" oncontextmenu="if(window.navigator.userAgent.indexOf('WebKit')!=-1||window.navigator.userAgent.indexOf('MSIE')!=-1){jQuery('.pressthis-code').show().find('textarea').focus().select();return false;}" href="<?php echo htmlspecialchars( get_shortcut_link() ); ?>"><span><?php _e('Press This') ?></span></a></p>
-        <div class="pressthis-code" style="display:none;">
-        <p class="description"><?php _e('If your bookmarks toolbar is hidden: copy the code below, open your Bookmarks manager, create new bookmark, type Press This into the name field and paste the code into the URL field.') ?></p>
-        <p><textarea rows="5" cols="120" readonly="readonly"><?php echo htmlspecialchars( get_shortcut_link() ); ?></textarea></p>
+        <p class="description"><?php _e( 'Drag-and-drop the following link to your bookmarks bar or copy the link code and follow instructions for a posting shortcut.' ) ?></p>
+        <p class="pressthis">
+                <a onclick="return false;" oncontextmenu="return false;" href="<?php echo htmlspecialchars( get_shortcut_link() ); ?>"><span><?php _e( 'Press This link' ) ?></span></a>
+                <button type="button" class="button button-large show-pressthis-code" aria-expanded="false" aria-controls="pressthis-code-wrap"><?php _e( 'Copy Press This code' ); ?></button>
+        </p>
+        <div class="pressthis-code-wrap hidden" id="pressthis-code-wrap">
+        <p class="description" id="pressthis-code-desc"><?php _e( 'Copy the selected code below, open your Bookmarks manager, create new bookmark, type Press This into the name field and paste the code into the URL field.' ) ?></p>
+        <label for="pressthis-code" class="screen-reader-text"><?php _e( 'Press This code' ); ?></label>
+        <textarea rows="5" cols="120" readonly="readonly" id="pressthis-code" class="pressthis-code" aria-labelledby="pressthis-code-desc"><?php echo htmlspecialchars( get_shortcut_link() ); ?></textarea>
         </div>
+        <script>
+        jQuery( document ).ready( function( $ ) {
+                var $pressthisCode = $( '.pressthis-code' );
+
+                $( 'button.show-pressthis-code' ).on( 'click', function( event ) {
+                        var $that = $( this );
+                        $( '.pressthis-code-wrap' ).slideToggle( 200, function() {
+                                if ( $( this ).is( ':visible' ) ) {
+                                        // Give screen readers time to announce "expanded".
+                                        setTimeout( function() { $pressthisCode.focus(); }, 1000 );
+                                        $that.attr( 'aria-expanded', true );
+                                } else {
+                                        $that.attr( 'aria-expanded', false );
+                                }
+                        });
+                });
+                // Select code even when tabbing inside already open textarea.
+                $pressthisCode.on( 'focus', function() {
+                        var self = this;
+                        setTimeout( function() { self.select(); }, 50 );
+                });
+        });
+        </script>
 </div>
 <?php
 endif;