Ticket #21283: 21283.5.diff

File 21283.5.diff, 9.1 KB (added by lessbloat, 7 months ago)
Line 
1Index: wp-includes/class-wp-customize-section.php
2===================================================================
3--- wp-includes/class-wp-customize-section.php  (revision 22254)
4+++ wp-includes/class-wp-customize-section.php  (working copy)
5@@ -80,7 +80,7 @@
6        protected function render() {
7                ?>
8                <li id="customize-section-<?php echo esc_attr( $this->id ); ?>" class="control-section customize-section">
9-                       <h3 class="customize-section-title" title="<?php echo esc_attr( $this->description ); ?>"><?php echo esc_html( $this->title ); ?></h3>
10+                       <h3 class="customize-section-title" tabindex="0" title="<?php echo esc_attr( $this->description ); ?>"><?php echo esc_html( $this->title ); ?></h3>
11                        <ul class="customize-section-content">
12                                <?php
13                                foreach ( $this->controls as $control )
14Index: wp-includes/class-wp-customize-control.php
15===================================================================
16--- wp-includes/class-wp-customize-control.php  (revision 22254)
17+++ wp-includes/class-wp-customize-control.php  (working copy)
18@@ -521,7 +521,7 @@
19                        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
20 
21                        <div class="customize-control-content">
22-                               <div class="dropdown preview-thumbnail">
23+                               <div class="dropdown preview-thumbnail" tabindex="0">
24                                        <div class="dropdown-content">
25                                                <?php if ( empty( $src ) ): ?>
26                                                        <img style="display:none;" />
27@@ -537,7 +537,7 @@
28                        <div class="library">
29                                <ul>
30                                        <?php foreach ( $this->tabs as $id => $tab ): ?>
31-                                               <li data-customize-tab='<?php echo esc_attr( $id ); ?>'>
32+                                               <li data-customize-tab='<?php echo esc_attr( $id ); ?>' tabindex='0'>
33                                                        <?php echo esc_html( $tab['label'] ); ?>
34                                                </li>
35                                        <?php endforeach; ?>
36Index: wp-admin/customize.php
37===================================================================
38--- wp-admin/customize.php      (revision 22254)
39+++ wp-admin/customize.php      (working copy)
40@@ -70,7 +70,7 @@
41                <div id="customize-header-actions" class="wp-full-overlay-header">
42                        <?php
43                                $save_text = $wp_customize->is_theme_active() ? __( 'Save &amp; Publish' ) : __( 'Save &amp; Activate' );
44-                               submit_button( $save_text, 'primary', 'save', false );
45+                               submit_button( $save_text, 'primary save', 'save', false );
46                        ?>
47                        <span class="spinner"></span>
48                        <a class="back button" href="<?php echo esc_url( $return ? $return : admin_url( 'themes.php' ) ); ?>">
49@@ -83,9 +83,9 @@
50                        $cannot_expand = ! ( $screenshot || $wp_customize->theme()->get('Description') );
51                ?>
52 
53-               <div class="wp-full-overlay-sidebar-content">
54+               <div class="wp-full-overlay-sidebar-content" tabindex="-1">
55                        <div id="customize-info" class="customize-section<?php if ( $cannot_expand ) echo ' cannot-expand'; ?>">
56-                               <div class="customize-section-title">
57+                               <div class="customize-section-title" tabindex="0">
58                                        <span class="preview-notice"><?php
59                                                /* translators: %s is the theme name in the Customize/Live Preview pane */
60                                                echo sprintf( __( 'You are previewing %s' ), '<strong class="theme-name">' . $wp_customize->theme()->display('Name') . '</strong>' );
61@@ -113,6 +113,15 @@
62                </div>
63 
64                <div id="customize-footer-actions" class="wp-full-overlay-footer">
65+                       <?php
66+                               $save_text = $wp_customize->is_theme_active() ? __( 'Save &amp; Publish' ) : __( 'Save &amp; Activate' );
67+                               submit_button( $save_text, 'primary save', 'save', false );
68+                       ?>
69+                       <span class="spinner"></span>
70+                       <a class="back button" href="<?php echo esc_url( $return ? $return : admin_url( 'themes.php' ) ); ?>">
71+                               <?php _e( 'Cancel' ); ?>
72+                       </a>
73+                       
74                        <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
75                                <span class="collapse-sidebar-arrow"></span>
76                                <span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
77Index: wp-admin/js/customize-controls.js
78===================================================================
79--- wp-admin/js/customize-controls.js   (revision 22254)
80+++ wp-admin/js/customize-controls.js   (working copy)
81@@ -94,11 +94,21 @@
82                                        else
83                                                statuses.hide();
84                                };
85-
86+                       
87+                       var toggleFreeze = false;
88+                       
89                        // Support the .dropdown class to open/close complex elements
90-                       this.container.on( 'click', '.dropdown', function( event ) {
91+                       this.container.on( 'click focus', '.dropdown', function( event ) {
92                                event.preventDefault();
93-                               control.container.toggleClass('open');
94+                               
95+                               if (!toggleFreeze)
96+                                       control.container.toggleClass('open');
97+                               
98+                               // Don't want to fire focus and click at same time
99+                               toggleFreeze = true;
100+                               setTimeout(function () {
101+                                       toggleFreeze = false;
102+                               }, 400);
103                        });
104 
105                        this.setting.bind( update );
106@@ -210,7 +220,11 @@
107                        });
108 
109                        // Bind tab switch events
110-                       this.library.children('ul').on( 'click', 'li', function( event ) {
111+                       this.library.children('ul').on( 'click keydown', 'li', function( event ) {
112+                               
113+                               if ( event.type === 'keydown' &&  13 !== event.which )
114+                                       return;
115+                               
116                                var id  = $(this).data('customizeTab'),
117                                        tab = control.tabs[ id ];
118 
119@@ -774,7 +788,7 @@
120                                activated = state.create('activated');
121 
122                        state.bind( 'change', function() {
123-                               var save = $('#save'),
124+                               var save = $('.save'),
125                                        back = $('.back');
126 
127                                if ( ! activated() ) {
128@@ -814,11 +828,26 @@
129                }());
130 
131                // Temporary accordion code.
132-               $('.customize-section-title').click( function( event ) {
133+               var accordianFrozen = false;
134+               $('.customize-section-title').bind('click keydown', function( event ) {
135+                       
136+                       if ( event.type === 'keydown' &&  13 !== event.which ) // enter
137+                                       return;
138+                       
139                        var clicked = $( this ).parents( '.customize-section' );
140 
141-                       if ( clicked.hasClass('cannot-expand') )
142+                       if ( clicked.hasClass('cannot-expand') || accordianFrozen )
143                                return;
144+                       
145+                       // Don't want to fire focus and click at same time
146+                       accordianFrozen = true;
147+                       setTimeout(function () {
148+                               accordianFrozen = false;
149+                       }, 400);
150+                       
151+                       // Scroll up if on #customize-section-title_tagline
152+                       if ('customize-section-title_tagline' === clicked.attr('id'))
153+                               $('.wp-full-overlay-sidebar-content').scrollTop(0);
154 
155                        $( '.customize-section' ).not( clicked ).removeClass( 'open' );
156                        clicked.toggleClass( 'open' );
157@@ -826,10 +855,25 @@
158                });
159 
160                // Button bindings.
161-               $('#save').click( function( event ) {
162+               $('.save').click( function( event ) {
163                        previewer.save();
164                        event.preventDefault();
165+               }).keydown( function( event ) {
166+                       if ( 9 === event.which ) // tab
167+                               return;
168+                       if ( 13 === event.which ) // enter
169+                               previewer.save();
170+                       event.preventDefault();
171                });
172+               
173+               $('.back').keydown( function( event ) {
174+                       if ( 9 === event.which ) // tab
175+                               return;
176+                       var thisHref = $(this).attr('href');
177+                       if ( 13 === event.which ) // enter
178+                               window.location = thisHref;
179+                       event.preventDefault();
180+               });
181 
182                $('.collapse-sidebar').click( function( event ) {
183                        overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
184@@ -948,6 +992,14 @@
185                });
186 
187                api.trigger( 'ready' );
188+
189+               // Make sure left column gets focus
190+               var topBackButton = $('#customize-header-actions .back');
191+               topBackButton.focus();
192+               setTimeout(function () {
193+                       topBackButton.focus();
194+               }, 800);
195+
196        });
197 
198 })( wp, jQuery );
199\ No newline at end of file
200Index: wp-admin/css/wp-admin.css
201===================================================================
202--- wp-admin/css/wp-admin.css   (revision 22254)
203+++ wp-admin/css/wp-admin.css   (working copy)
204@@ -5455,6 +5455,10 @@
205        margin: 0;
206 }
207 
208+.wp-full-overlay-sidebar .wp-full-overlay-footer {
209+       height: 80px;
210+}
211+
212 .wp-full-overlay-sidebar .wp-full-overlay-header {
213        top: 0;
214        border-top: 0;
215@@ -5472,7 +5476,7 @@
216 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
217        position: absolute;
218        top: 45px;
219-       bottom: 45px;
220+       bottom: 80px;
221        left: 0;
222        right: 0;
223        overflow: auto;
224Index: wp-admin/css/customize-controls.css
225===================================================================
226--- wp-admin/css/customize-controls.css (revision 22254)
227+++ wp-admin/css/customize-controls.css (working copy)
228@@ -67,7 +67,8 @@
229 
230 .control-section:hover .customize-section-title,
231 .control-section .customize-section-title:hover,
232-.control-section.open .customize-section-title {
233+.control-section.open .customize-section-title,
234+.customize-section-title:focus {
235        color: #fff;
236        text-shadow: 0 -1px 0 #333;
237        background: #808080;
238@@ -126,6 +127,11 @@
239        color: #999;
240 }
241 
242+#customize-info .customize-section-title:focus .preview-notice {
243+       color: #ccc;
244+       text-shadow: 0 -1px 0 #333;
245+}
246+
247 #customize-info .theme-name {
248        font-size: 20px;
249        font-weight: 200;
250@@ -135,6 +141,11 @@
251        text-shadow: 0 1px 0 #fff;
252 }
253 
254+#customize-info .customize-section-title:focus .theme-name {
255+       color: #fff;
256+       text-shadow: 0 -1px 0 #333;
257+}
258+
259 #customize-info .theme-screenshot {
260        width: 258px;
261        border: 1px solid #ccc;
262@@ -155,16 +166,19 @@
263        margin: 0;
264 }
265 
266+#customize-footer-actions .button-primary,
267 #customize-header-actions .button-primary {
268        float: right;
269        margin-top: 10px;
270 }
271 
272+#customize-footer-actions .spinner,
273 #customize-header-actions .spinner {
274        margin-top: 16px;
275        margin-right: 4px;
276 }
277 
278+.saving #customize-footer-actions .spinner,
279 .saving #customize-header-actions .spinner {
280        display: block;
281 }