Changeset 37228

Timestamp:

04/17/2016 11:08:17 AM (9 years ago)

Author:

swissspidy

Message:

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

Props afercia.
Fixes #36458.

File:

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

trunk/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' );
+                        });
                 }