Fix unclosed li element in plugin-editor.php

[dkarfa]

Actual Behavior
In src/wp-admin/plugin-editor.php at line 287, there is an opening <li> tag with role="treeitem" and other attributes, but it doesn't have any content directly inside it before the nested <ul> element, and there's no closing </li> tag.

Steps to Reproduce

1. Navigate to src/wp-admin/plugin-editor.php
2. Look at line 287 where there's an opening <li> tag.
3. Notice that there's no closing </li> tag for this element.

Expected Behavior
The <li> element should either have content before the nested <ul> or be properly closed with a </li> tag after the nested <ul> element. This would ensure proper HTML structure and accessibility compliance.

This issue is important to fix because:

1. It creates an invalid HTML structure.
2. It may cause accessibility issues since the ARIA roles are being used.
3. It could potentially cause rendering inconsistencies across browsers.

This commit ensures that the list item element in the plugin file tree navigation is closed adequately with a </li> tag. The HTML structure in plugin-editor.php now correctly nests the tree structure with proper opening and closing tags.

This improves HTML validity and accessibility compliance for screen readers and other assistive technologies that rely on proper DOM structure, especially important for elements using ARIA roles like "treeitem" and "group".

Trac ticket: https://core.trac.wordpress.org/ticket/63546

Props dkarfa

[pmbaldha]

Test Report

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/8937.diff

Steps to Reproduce or Test

1. Go to Admin Dashboard > Tools > Plugin Editor.
2. Right-click in the browser or press CTRL + U on the keyboard. It will open the HTML source file of the webpage
3. Press CTRL + F to find strings in the view source.
4. Find "templateside" strings and locate the templateside div.
5. 🐞 In the templateside div, see the two li (<li>) tags opened, but only one li tag (</li>) closed. It is a bug.

Expected Results

When testing a patch to validate it works as expected:

• ✅ The issue has been resolved. In the templateside div, the two li (<li>) tags should be opened and two li tag (</li>) should be closed.

When reproducing a bug:

• 🐞 Error condition occurs.

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 137.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

When reproducing a bug/defect:

• 🐞 In the templateside div, see the two li (<li>) tags opened, but only one li tag (</li>) closed.

When testing the bugfix patch:

• ✅ Issue resolved with patch. In the templateside div, see the two li (<li>) tags opened and two li tags (</li>) closed.

[sandeepdahiya]

Bug reproduction and Test Report

Description

✅ This report validates that the indicated patch works as expected.

Patch tested: ​Patch-8937.diff

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Firefox 139.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. Bug reproduction: Upon visiting view-source:http://localhost:8889/wp-admin/plugin-editor.php, there was no closing </li> tag for the line

   <li role="treeitem" tabindex="-1" aria-expanded="true" aria-level="1" aria-posinset="1" aria-setsize="1">
   

   Checkout ​the bug screenshot.

2. ✅ Issue resolved with patch and </li> tag added for the above code. Checkout the ​after patch screenshot.

Additional Notes

Reproduction steps:

• Visit: ​http://localhost:8889/wp-admin/plugin-editor.php
• Right-click the page → Click “View Page Source” or use Ctrl+U.
• Find (ctrl+F) and search "treeitem" and you will find the bug as shown in above image.

===Screenshots

• ​the bug screenshot
• ​after patch screenshot

[cikrimcin]

Replying to sandeepdahiya:

Bug reproduction and Test Report

Description

✅ This report validates that the indicated patch works as expected.

Patch tested: ​Patch-8937.diff

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Firefox 139.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. Bug reproduction: Upon visiting view-source:http://localhost:8889/wp-admin/plugin-editor.php, there was no closing </li> tag for the line

   <li role="treeitem" tabindex="-1" aria-expanded="true" aria-level="1" aria-posinset="1" aria-setsize="1">
   

   Checkout ​the bug screenshot.

2. ✅ Issue resolved with patch and </li> tag added for the above code. Checkout the ​after patch screenshot.

Additional Notes

Reproduction steps:

• Visit: ​http://localhost:8889/wp-admin/plugin-editor.php
• Right-click the page → Click “View Page Source” or use Ctrl+U.
• Find (ctrl+F) and search "treeitem" and you will find the bug as shown in above image.

===Screenshots

• ​the bug screenshot
• ​after patch screenshot

The solution appears to be working, but it's also affecting other elements in the tree view structure. Please ensure that the <li> elements are properly closed and structured so that all nested items render correctly and maintain accessibility. It's important to verify that other tree items remain aligned and functional across the interface, especially since ARIA roles are involved and could impact assistive technologies.

[joedolson]

In 60479:

General: Add missing closing li in plugin editor.

Adds a missing closing li tag in the plugin editor file list.

Props dkarfa, pmbaldha, sandeepdahiya, cikrimcin, westonruter, audrasjb, joedolson.
Fixes #63546.