WordPress.org

Make WordPress Core

Ticket #33301: 33301.voiceover.diff

File 33301.voiceover.diff, 1.4 KB (added by afercia, 4 years ago)

a11y help for VoiceOver

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

     
    440440                                                        $input.autocomplete( 'search' );
    441441                                                }
    442442                                        } )
     443                                        // Returns a jQuery object containing the menu element.
    443444                                        .autocomplete( 'widget' )
    444445                                                .addClass( 'wplink-autocomplete' )
    445446                                                .attr( 'role', 'listbox' )
    446                                                 .removeAttr( 'tabindex' ); // Remove the `tabindex=0` attribute added by jQuery UI.
     447                                                .removeAttr( 'tabindex' ) // Remove the `tabindex=0` attribute added by jQuery UI.
     448                                                /*
     449                                                 * Looks like Safari and VoiceOver need an `aria-selected` attribute. See ticket #33301.
     450                                                 * The `menufocus` and `menublur` events are the same events used to add and remove
     451                                                 * the `ui-state-focus` CSS class on the menu items. See jQuery UI Menu Widget.
     452                                                 */
     453                                                .on( 'menufocus', function( event, ui ) {
     454                                                        ui.item.attr( 'aria-selected', 'true' );
     455                                                })
     456                                                .on( 'menublur', function() {
     457                                                        /*
     458                                                         * The `menublur` event returns an object where the item is `null`
     459                                                         * so we need to find the active item with other means.
     460                                                         */
     461                                                        $( this ).find( '[aria-selected="true"]' ).removeAttr( 'aria-selected' );
     462                                                });
    447463                                }
    448464
    449465                                tinymce.$( input ).on( 'keydown', function( event ) {