Make WordPress Core

source: trunk/src/js/_enqueues/lib/ajax-response.js @ 58455

Last change on this file since 58455 was 58455, checked in by joedolson, 5 weeks ago

Administration: A11y: Add role="alert" on JS injected admin notices.

Add the attribute role="alert" on 12 instances of admin notices that are injected into the DOM using JavaScript. The role="alert" attribute allows screen readers to recognize the addition to the DOM and announce the errors to users.

Props afercia, cyrus11, rcreators, joedolson.
Fixes #47111.

  • Property svn:eol-style set to native
File size: 3.7 KB
Line 
1/**
2 * @output wp-includes/js/wp-ajax-response.js
3 */
4
5 /* global wpAjax */
6
7window.wpAjax = jQuery.extend( {
8        unserialize: function( s ) {
9                var r = {}, q, pp, i, p;
10                if ( !s ) { return r; }
11                q = s.split('?'); if ( q[1] ) { s = q[1]; }
12                pp = s.split('&');
13                for ( i in pp ) {
14                        if ( typeof pp.hasOwnProperty === 'function' && !pp.hasOwnProperty(i) ) { continue; }
15                        p = pp[i].split('=');
16                        r[p[0]] = p[1];
17                }
18                return r;
19        },
20        parseAjaxResponse: function( x, r, e ) { // 1 = good, 0 = strange (bad data?), -1 = you lack permission.
21                var parsed = {}, re = jQuery('#' + r).empty(), err = '', noticeMessage = '';
22
23                if ( x && typeof x === 'object' && x.getElementsByTagName('wp_ajax') ) {
24                        parsed.responses = [];
25                        parsed.errors = false;
26                        jQuery('response', x).each( function() {
27                                var th = jQuery(this), child = jQuery(this.firstChild), response;
28                                response = { action: th.attr('action'), what: child.get(0).nodeName, id: child.attr('id'), oldId: child.attr('old_id'), position: child.attr('position') };
29                                response.data = jQuery( 'response_data', child ).text();
30                                response.supplemental = {};
31                                if ( !jQuery( 'supplemental', child ).children().each( function() {
32
33                                        if ( this.nodeName === 'notice' ) {
34                                                noticeMessage += jQuery(this).text();
35                                                return;
36                                        }
37
38                                        response.supplemental[this.nodeName] = jQuery(this).text();
39                                } ).length ) { response.supplemental = false; }
40                                response.errors = [];
41                                if ( !jQuery('wp_error', child).each( function() {
42                                        var code = jQuery(this).attr('code'), anError, errorData, formField;
43                                        anError = { code: code, message: this.firstChild.nodeValue, data: false };
44                                        errorData = jQuery('wp_error_data[code="' + code + '"]', x);
45                                        if ( errorData ) { anError.data = errorData.get(); }
46                                        formField = jQuery( 'form-field', errorData ).text();
47                                        if ( formField ) { code = formField; }
48                                        if ( e ) { wpAjax.invalidateForm( jQuery('#' + e + ' :input[name="' + code + '"]' ).parents('.form-field:first') ); }
49                                        err += '<p>' + anError.message + '</p>';
50                                        response.errors.push( anError );
51                                        parsed.errors = true;
52                                } ).length ) { response.errors = false; }
53                                parsed.responses.push( response );
54                        } );
55                        if ( err.length ) {
56                                re.html( '<div class="notice notice-error" role="alert">' + err + '</div>' );
57                                wp.a11y.speak( err );
58                        } else if ( noticeMessage.length ) {
59                                re.html( '<div class="notice notice-success is-dismissible" role="alert"><p>' + noticeMessage + '</p></div>');
60                                jQuery(document).trigger( 'wp-updates-notice-added' );
61                                wp.a11y.speak( noticeMessage );
62                        }
63                        return parsed;
64                }
65                if ( isNaN( x ) ) {
66                        wp.a11y.speak( x );
67                        return ! re.html( '<div class="notice notice-error" role="alert"><p>' + x + '</p></div>' );
68                }
69                x = parseInt( x, 10 );
70                if ( -1 === x ) {
71                        wp.a11y.speak( wpAjax.noPerm );
72                        return ! re.html( '<div class="notice notice-error" role="alert"><p>' + wpAjax.noPerm + '</p></div>' );
73                } else if ( 0 === x ) {
74                        wp.a11y.speak( wpAjax.broken );
75                        return ! re.html( '<div class="notice notice-error" role="alert"><p>' + wpAjax.broken  + '</p></div>' );
76                }
77                return true;
78        },
79        invalidateForm: function ( selector ) {
80                return jQuery( selector ).addClass( 'form-invalid' ).find('input').one( 'change wp-check-valid-field', function() { jQuery(this).closest('.form-invalid').removeClass( 'form-invalid' ); } );
81        },
82        validateForm: function( selector ) {
83                selector = jQuery( selector );
84                return !wpAjax.invalidateForm( selector.find('.form-required').filter( function() { return jQuery('input:visible', this).val() === ''; } ) ).length;
85        }
86}, wpAjax || { noPerm: 'Sorry, you are not allowed to do that.', broken: 'Something went wrong.' } );
87
88// Basic form validation.
89jQuery( function($){
90        $('form.validate').on( 'submit', function() { return wpAjax.validateForm( $(this) ); } );
91});
Note: See TracBrowser for help on using the repository browser.