Changeset 37246 for branches/4.5

Timestamp:

04/19/2016 08:47:36 PM (10 years ago)

Author:

ocean90

Message:

TinyMCE, inline link: Fix VoiceOver in Safari for search suggestions.

Merge of [37228] to the 4.5 branch.

Props afercia.
Fixes #36458.

Location:

branches/4.5

Files:

• . (modified) (1 prop)
• src/wp-includes/js/tinymce/plugins/wplink/plugin.js (modified) (1 diff)

branches/4.5/src/wp-includes/js/tinymce/plugins/wplink/plugin.js

@@ -441 +441 @@
                                                 }
                                         } )
+                                        // Returns a jQuery object containing the menu element.
                                         .autocomplete( 'widget' )
                                                 .addClass( 'wplink-autocomplete' )
                                                 .attr( 'role', 'listbox' )
-                                                .removeAttr( 'tabindex' ); // Remove the `tabindex=0` attribute added by jQuery UI.
+                                                .removeAttr( 'tabindex' ) // Remove the `tabindex=0` attribute added by jQuery UI.
+                                                /*
+                                                 * Looks like Safari and VoiceOver need an `aria-selected` attribute. See ticket #33301.
+                                                 * The `menufocus` and `menublur` events are the same events used to add and remove
+                                                 * the `ui-state-focus` CSS class on the menu items. See jQuery UI Menu Widget.
+                                                 */
+                                                .on( 'menufocus', function( event, ui ) {
+                                                        ui.item.attr( 'aria-selected', 'true' );
+                                                })
+                                                .on( 'menublur', function() {
+                                                        /*
+                                                         * The `menublur` event returns an object where the item is `null`
+                                                         * so we need to find the active item with other means.
+                                                         */
+                                                        $( this ).find( '[aria-selected="true"]' ).removeAttr( 'aria-selected' );
+                                                });
                                 }