Ticket #36458: 33301.voiceover.diff

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

@@ -440 +440 @@
                                                         $input.autocomplete( 'search' );
                                                 }
                                         } )
+                                        // 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' );
+                                                });
                                 }
 
                                 tinymce.$( input ).on( 'keydown', function( event ) {