The `uswds_ckeditor_integration` module incorrectly loads admin/debugging CSS (`accordion.admin.css`) on front-end pages when viewing content types that have Comments enabled with a CKEditor text format that includes the USWDS Accordion plugin. This causes red dashed borders and "USWDS Accordion" overlay text to appear on ALL elements with the `.usa-accordion` class, including the USA Banner and primary navigation, defacing production pages.
This creates an unprofessional appearance on production sites, with debugging visual aids visible to end users.
1. Install and enable `uswds_ckeditor_integration` module
2. Enable USWDS Accordion plugin in a CKEditor5 text format (e.g., `basic_html`)
3. Configure a content type (e.g., Article) to:
- Allow comments
- Use the text format with USWDS Accordion enabled for the comment field
4. Create content of that content type (does NOT need to have accordion components in the content itself)
5. Save the content
6. View the content as an anonymous user (or in an incognito browser)
7. Scroll to the comment form at the bottom of the page
8. **Observe**: Red dashed borders appear around:
- The USA Banner (government website notice at top)
- The primary navigation menu
- Any other elements with `.usa-accordion` class
9. **Observe**: "USWDS Accordion" text overlay appears at top-left of affected elements
**Key insight**: The issue is triggered by the **comment form's CKEditor instance**, not by embedded accordion content in the article body. Any page with a CKEditor instance using a text format that has the USWDS Accordion plugin enabled will trigger this bug.
**Root cause**:
- The `uswds_accordion` library (lines 2-9 of libraries.yml) incorrectly includes `css/accordion.admin.css`
- CKEditor5 loads a plugin's `library` when viewing content with embedded components
- This causes admin debugging CSS to load on front-end pages
- The CSS uses low-specificity selectors (`.usa-accordion`) that affect site-wide USWDS components
Remove `accordion.admin.css` from the main `uswds_accordion` library in `uswds_ckeditor_integration.libraries.yml`.
The admin CSS should only be in the `uswds_accordion.admin` library, which is correctly loaded only when editing content, not when viewing it.
n/a
n/a
n/a
none
| Comment | File | Size | Author |
|---|---|---|---|
| #9 | Screenshot 2025-12-02 at 12.06.46 PM.png | 28.13 KB | smustgrave |
| #8 | accordion_all_fine_with_fix.jpg | 670.26 KB | oivanov |
| #2 | uswds_ckeditor_integration-accordion-admin-css-3556038.patch | 429 bytes | oivanov |
| 2025-11-04_12-50-55.jpg | 157.17 KB | oivanov | |
| 2025-11-04_11-35-41.jpg | 425.63 KB | oivanov |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes, plain diff MR !102
Comments
Comment #2
oivanov commentedplease see the patch attached
Comment #4
oivanov commentedThe merge request is ready for review
Comment #5
smustgrave commentedI appreciate the report! I’ll check it out this week
Comment #6
smustgrave commentedThis needs more work.
1.
I can't replicate on the frontend seeing the admin css load2. The css on the edit form is now missing
Comment #7
smustgrave commentedIn theory admin_library should load in the editor and then the MR would be fine.
The CSS needs to load in the ckeditor so maybe the selectors need to be more specific to not bleed out.
Comment #8
oivanov commented"2. The css on the edit form is now missing" - just to make sure I understand what you mean - after I implement the fix by commenting out the lines in question, the USWDS Accordion is fully functional in the CKEditor on both Edit mode of content nodes, and in the Comments add/edit form - see accordion_all_fine_with_fix.jpg file attached.
Something else is not working? We can have a call and look at the code if you want
Comment #9
smustgrave commentedBut this is gone.
Comment #10
oivanov commentedGot it! now I understand the issue better.
how about now? the new fix is ready for review
Comment #12
smustgrave commentedWorks for me.