[wp-trac] [WordPress Trac] #55575: 6.0 Regression: Duplicate HTML id attribute in Quick/Bulk Edit

[WordPress Trac]

#55575: 6.0 Regression: Duplicate HTML id attribute in Quick/Bulk Edit
-------------------------------------+----------------------------
 Reporter:  GregLone                 |       Owner:  joedolson
     Type:  defect (bug)             |      Status:  accepted
 Priority:  normal                   |   Milestone:  6.0
Component:  Quick/Bulk Edit          |     Version:  trunk
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch needs-testing  |     Focuses:  accessibility
-------------------------------------+----------------------------

Comment (by ironprogrammer):

 Thank you @sabernhardt and @joedolson for the patch and refresh!

 == Test Report

 [https://core.trac.wordpress.org/attachment/ticket/55575/55575.2.diff
 Patch 55575 refresh via @joedolson]

 === Env
 * WordPress 6.0-RC1-53341-src
 * Chrome 101.0.4951.54
 * macOS 12.3.1 (Monterey)
 * Theme: Twenty Twenty-One

 === Steps to Reproduce
 1. Navigate to the main Posts page, ''Posts > All Posts''.
 2. Verify there is at least one post displayed in the table. Create a
 sample post if necessary. This is required to verify Steps 5-7 below.
 3. Open DevTools (or your browser's equivalent), and in the JavaScript
 "Console" run/evaluate the following expression:
 `document.querySelectorAll('#inline-edit-legend')` (or use the `$$(...)`
 function shorthand).
 4. 🐞 Observe that `2` nodes are returned in the console, indicating that
 the element ID `inline-edit-legend` exists more than once in the DOM (for
 both the "quick" and "bulk" -edit legend elements).
 5. Hover over a post in the list, activating the contextual row actions,
 and click the "Quick Edit" link to expand the inline post editor.
 6. Re-run the expression from Step 3.
 7. 🐞 Observe that now `3` nodes are returned, as the existing element ID
 `inline-edit-legend` has been cloned into the row.

 === Steps to Test Patch
 1. After applying patch 🛠, run `npm run build:dev` to recompile JS, and
 then refresh the Posts page.
 2. In the console, re-run the expression: `document.querySelectorAll
 ('#inline-edit-legend')`.
 3. ✅ Observe that `0` nodes are returned, confirming that the previously
 duplicated ID (`inline-edit-legend`) is no longer present in the DOM.
 4. In the console, run the expression: `document.querySelectorAll('#quick-
 edit-legend')`.
 5. ✅ Observe that `1` node is returned, and the ID `quick-edit-legend` is
 not used elsewhere.
 6. In the console, run the expression: `document.querySelectorAll('#bulk-
 edit-legend')`.
 7. ✅ Observe that `1` node is returned, and the ID `bulk-edit-legend` is
 not used elsewhere.
 8. Hover over a post in the list, activating the contextual row actions,
 and click the "Quick Edit" link to expand the inline post editor.
 9. Re-run the expression from Step 4.
 10. ✅ Observe that `1` node is returned, and the ID `quick-edit-legend`
 is not used elsewhere (the ID is removed via script after being cloned
 into the row).

 === Expected Results
 - The issue described by the reporter was reproduced successfully. ✅
 - The patch addressed the reported issue. ✅

 === Additional Notes
 - If in Step 10 above you see `2` nodes returned, make sure that the
 `inline-edit-post.js` file was compiled and deployed correctly to your
 environment.

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