[wp-trac] [WordPress Trac] #34436: Issue with wp.customizer.panel('name').focus().

[WordPress Trac]

#34436: Issue with wp.customizer.panel('name').focus().
-------------------------------------------------+-------------------------
 Reporter:  wpweaver                             |       Owner:  dlh
     Type:  defect (bug)                         |      Status:  assigned
 Priority:  normal                               |   Milestone:  5.9
Component:  Customize                            |     Version:  4.3.1
 Severity:  normal                               |  Resolution:
 Keywords:  good-first-bug has-patch needs-      |     Focuses:  javascript
  testing                                        |
-------------------------------------------------+-------------------------
Changes (by costdev):

 * keywords:  good-first-bug has-patch => good-first-bug has-patch needs-
     testing


Comment:

 I've updated the PR with a check to make sure that the panel has more than
 one section. While this may only be with the widgets panel currently, this
 should facilitate any other panel that contains only one section in the
 future.

 Adding `needs-testing`.

 == Testing Instructions

 1. Login to WordPress with an account that can view the Customizer.
 2. Load the Customizer.
 3. Open DevTools:
   - On Windows, press `Ctrl + Shift + J`.
   - On Mac, press `Cmd + Option + J`.
 4. Paste the code below into the box and press `Enter`.
 5. Minimize DevTools.
 6. Follow the instructions on the right of your screen.

 {{{#!javascript
 const style = document.createElement('style'),
       panelSections = document.querySelectorAll('[id^=accordion-section],
 [id^=accordion-panel'),
       sections = document.querySelectorAll('[id^=accordion-section], [id
 ^=accordion-panel'),
       css = `
         .test-suite {
             background: #fff;
             bottom: 0;
             box-sizing: border-box;
             display: flex;
             flex-direction: column;
             height: 100vh;
             overflow-y: scroll;
             padding: 20px;
             position: fixed;
             right: 0;
             width: 400px;
             z-index: 9999999;
         }

         .test-suite p {
             margin-block: .5em;
         }

         .test-option {
             cursor: pointer;
             padding: 10px;
             transition: all .1s ease-in-out;
             user-select: none;
         }

         .test-option:nth-of-type(1) {
             border-top: 1px solid #ddd;
             margin-top: 1em;
         }

         .test-option:not(:last-of-type) {
             border-bottom: 1px solid #ddd;
         }

         .test-option:hover {
             background: #000;
             color: #fff;
         }
       `;

 let areasToTest = [];
 panelSections.forEach( (panelSection) => {
     if ( 'accordion-section-themes' !== panelSection.id
         && 'accordion-section-publish_settings' !== panelSection.id ) {
         areasToTest.push({
             'name': panelSection.id.replace( 'accordion-section-', ''
 ).replace( 'accordion-panel-', '' ),
             'type': 0 === panelSection.id.indexOf('accordion-section-') ?
 'section' : 'panel'
         });
     }
 });

 const testSuite = document.createElement('div');
 testSuite.classList.add('test-suite');
 testSuite.innerHTML = `
     <h1>
         <a href='https://core.trac.wordpress.org/ticket/34436' title='Open
 ticket #34436 in a new tab' target='_blank'>#34436</a>
         Test Suite
     </h1>
     <p>
         Thank you for taking the time to test this patch!
     </p>
     <p>
         Please click on each area below to check that it is focused.
     </p>
     <p>
         Test every scenario you can think of, including double-clicking
 each area, quick-clicking, etc.
     </p>
     <p>
         When you're done, please leave a comment on <a
 href='https://core.trac.wordpress.org/ticket/34436' title='Open ticket
 #34436 in a new tab' target='_blank'>the ticket</a> and let us know your
 results.
     </p>
     <p>
         Thanks again!<br>
         <strong><a href='https://github.com/costdev'>@costdev</a></strong>
     </p>
 `;
 document.body.appendChild(testSuite);

 areasToTest.sort((a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1
 : 0))
 areasToTest.forEach( area => {
     const option = document.createElement('div');
     option.classList.add('test-option');

     option.tabIndex = '0';

     let name = area.name.replaceAll('_', ' ').replaceAll('-', ' ').split('
 ');
     clean_name = '';
     name.forEach( word => clean_name += word[0].toUpperCase() +
 word.slice(1) + ' ' );
     option.innerHTML = clean_name.replace('[', ' ').replace(']', '');
     option.addEventListener('click', () => {
         if ( 'section' === area.type ) {
             wp.customize.section( area.name ).focus()
         } else if ( 'panel' === area.type ) {
             wp.customize.panel( area.name ).focus()
         }
     })
     option.addEventListener('keypress', () => {
         if ( 'section' === area.type ) {
             wp.customize.section( area.name ).focus()
         } else if ( 'panel' === area.type ) {
             wp.customize.panel( area.name ).focus()
         }
     })
     testSuite.appendChild(option)
 })

 if (style.styleSheet) {
     style.styleSheet.cssText = css;
 } else {
     style.appendChild(document.createTextNode(css));
 }

 document.head.appendChild(style);
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/34436#comment:13>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform