WordPress.org

Make WordPress Core

Ticket #23560: 23560.3diff

File 23560.3diff, 5.1 KB (added by lessbloat, 7 years ago)
Line 
1Index: wp-includes/js/media-views.js
2===================================================================
3--- wp-includes/js/media-views.js       (revision 23919)
4+++ wp-includes/js/media-views.js       (working copy)
5@@ -1974,7 +1974,12 @@
6                        if ( ! this.views.attached || ! this.$el.is(':visible') )
7                                return this;
8 
9-                       this.$el.hide();
10+                       // Hide modal and remove restricted media modal tab focus once it's closed
11+                       this.$el.hide().undelegate( 'keydown' );
12+
13+                       // Put focus back in useful location once modal is closed
14+                       $('#wpbody-content').focus();
15+
16                        this.propagate('close');
17 
18                        // If the `freeze` option is set, restore the container's scroll position.
19@@ -2020,6 +2025,22 @@
20                                this.escape();
21                                return;
22                        }
23+
24+                       // Keep tab focus within media modal while it's open
25+                       if ( $.ui.keyCode.TAB !== event.keyCode )
26+                               return;
27+
28+                       var tabbables = $( ':tabbable', this.$el ),
29+                               first = tabbables.filter( ':first' ),
30+                               last  = tabbables.filter( ':last' );
31+
32+                       if ( event.target === last[0] && !event.shiftKey ) {
33+                               first.focus();
34+                               return false;
35+                       } else if ( event.target === first[0] && event.shiftKey ) {
36+                               last.focus();
37+                               return false;
38+                       }
39                }
40        });
41 
42@@ -2828,6 +2849,11 @@
43                className: 'attachment',
44                template:  media.template('attachment'),
45 
46+               attributes: {
47+                       tabIndex: 0,
48+                       role: 'checkbox'
49+               },
50+
51                events: {
52                        'click .attachment-preview':      'toggleSelectionHandler',
53                        'change [data-setting]':          'updateSetting',
54@@ -2836,7 +2862,8 @@
55                        'change [data-setting] textarea': 'updateSetting',
56                        'click .close':                   'removeFromLibrary',
57                        'click .check':                   'removeFromSelection',
58-                       'click a':                        'preventDefault'
59+                       'click a':                        'preventDefault',
60+                       'keydown':                                                'toggleSelectionHandler'
61                },
62 
63                buttons: {},
64@@ -2844,6 +2871,8 @@
65                initialize: function() {
66                        var selection = this.options.selection;
67 
68+                       this.$el.attr('aria-label', this.model.attributes.title).attr('aria-checked', false);
69+
70                        this.model.on( 'change:sizes change:uploading', this.render, this );
71                        this.model.on( 'change:title', this._syncTitle, this );
72                        this.model.on( 'change:caption', this._syncCaption, this );
73@@ -2934,6 +2963,9 @@
74                toggleSelectionHandler: function( event ) {
75                        var method;
76 
77+                       if ( 'keydown' === event.type && $.ui.keyCode.ENTER !== event.keyCode && $.ui.keyCode.SPACE !== event.keyCode )
78+                               return;
79+
80                        if ( event.shiftKey )
81                                method = 'between';
82                        else if ( event.ctrlKey || event.metaKey )
83@@ -3017,7 +3049,7 @@
84                        if ( ! selection || ( collection && collection !== selection ) )
85                                return;
86 
87-                       this.$el.addClass('selected');
88+                       this.$el.addClass('selected').attr('aria-checked', true);
89                },
90 
91                deselect: function( model, collection ) {
92@@ -3029,7 +3061,7 @@
93                        if ( ! selection || ( collection && collection !== selection ) )
94                                return;
95 
96-                       this.$el.removeClass('selected');
97+                       this.$el.removeClass('selected').attr('aria-checked', false);
98                },
99 
100                details: function( model, collection ) {
101@@ -3211,6 +3243,10 @@
102                tagName:   'ul',
103                className: 'attachments',
104 
105+               attributes: {
106+                       tabIndex: -1
107+               },
108+
109                cssTemplate: media.template('attachments-css'),
110 
111                events: {
112Index: wp-includes/media-template.php
113===================================================================
114--- wp-includes/media-template.php      (revision 23919)
115+++ wp-includes/media-template.php      (working copy)
116@@ -15,6 +15,8 @@
117 function wp_print_media_templates() {
118        global $is_IE;
119        $class = 'media-modal wp-core-ui';
120+       if ( $is_IE )
121+               $class .= ' isIE';
122        if ( $is_IE && strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false )
123                $class .= ' ie7';
124        ?>
125@@ -134,7 +136,7 @@
126                        <# } else if ( 'image' === data.type ) { #>
127                                <div class="thumbnail">
128                                        <div class="centered">
129-                                               <img src="{{ data.size.url }}" draggable="false" />
130+                                               <img src="{{ data.size.url }}" draggable="false" alt="" />
131                                        </div>
132                                </div>
133                        <# } else { #>
134@@ -149,7 +151,7 @@
135                        <# } #>
136 
137                        <# if ( data.buttons.check ) { #>
138-                               <a class="check" href="#" title="<?php _e('Deselect'); ?>"><div class="media-modal-icon"></div></a>
139+                               <a class="check" href="#" title="<?php _e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
140                        <# } #>
141                </div>
142                <#
143Index: wp-includes/css/media-views.css
144===================================================================
145--- wp-includes/css/media-views.css     (revision 23919)
146+++ wp-includes/css/media-views.css     (working copy)
147@@ -431,8 +431,7 @@
148        border-right: 0;
149 }
150 
151-.media-router > a:active,
152-.media-router > a:focus {
153+.media-router > a:active {
154        outline: none;
155 }
156 
157@@ -635,12 +634,25 @@
158        user-select:         none;
159 }
160 
161+.attachment:focus {
162+       box-shadow: 0px 0px 2pt 2pt #1e8cbe;
163+       outline: none;
164+}
165+
166+.isIE .attachment:focus {
167+       outline: #1e8cbe solid;
168+}
169+
170 .selected.attachment {
171        box-shadow:
172                0 0 0 1px #fff,
173                0 0 0 3px #ccc;
174 }
175 
176+.isIE .attachment.selected {
177+       outline: #1e8cbe solid;
178+}
179+
180 .details.attachment {
181        box-shadow:
182                0 0 0 1px #fff,
183@@ -864,6 +876,7 @@
184        right: 300px;
185        bottom: 0;
186        overflow: auto;
187+       outline: none;
188 }
189 
190 .attachments-browser .instructions {