The JS in uswds_accordion.js has a couple of jQuery selectors that match all USWDS accordions on the page, even if they were not created by this module. This JS is changing their "id" and "aria-controls" attributes, which is resulting in JS errors when the USWDS tries to run its code.
Have a USWDS accordion baked on the page, such as in a template file. Then add an accordion in Ckeditor and save the page. You should see a JS error.
For our purposes we have patched this module to add ".text-formatted" to the jQuery selectors, to ensure that this module only targets accordions that were created in Ckeditor. I'm not 100% this "text-formatted" class is always there though (maybe it is just our theme).
I'm interested in feedback. I'm happy to post our patch if that would help.
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | fix-accord-js-by-adding-text-formatted-to-selector.patch | 944 bytes | jnicola |
Comments
Comment #2
jnicola commentedWe were able to fix this by adding ".text-formatted" selector to the accordion JS selectors, restricting this functionality in theory to just the WYSIWYG content. It worked for us, but we can't guarantee the selector will apply to your situation, and may not warrant a PR since the class can't for sure be relied on.
Comment #3
brockfanning commentedWe've noticed already that the selector in #2 can miss certain scenarios, like accordions created in webforms. Probably the safest approach would be for this code to target only those accordions that don't already have the "aria-controls" and "id" attributes that it is adding.
Comment #4
smustgrave commentedComment #6
smustgrave commentedTweaked #2 to not update aria or id if they are already there.
Comment #7
brockfanning commented@smustgrave I was wondering if the jQuery selector itself could maybe specify elements without the attributes. We noticed that in some cases the "text-formatted" class cannot be relied on. For example, in webforms.