V2.2 - Accessibility ARIA/508 - D11 compliance patch

I am unable to test this code due to existing issues 🐛 Adding accordion to CKEditor toolbar gets error Active and ✨ Make CKEditor be forgiving of enabling something that's already enabled Active . But it seems this patch has not fully shed the <dl> tag.

Details follow:

I added CKEditor Accordion module to Drupal core in SimplyTest.me and applied this patch.

• Drupal 10.3.2
• CKEditor Accordion 2.2.0
• plus patch https://www.drupal.org/files/issues/2024-08-27/2024-08-27-ckeditor_accor... →

I believe this patch has been applied, as when I go to /admin/config/content/ckeditor-accordion I see the following setting:

Variant
Default: Default HTML structure which uses <div> <h2> <div> style tags.
Select the variant to be used.

and that is the only selection available. (Is this correct? Would I expect to see the original <dl> option? Perhaps not if it doesn't meet WCAG.)

However, when I go to /admin/config/content/formats/manage/basic_html and drag the accordion icon from Available Buttons to Active Toolbar, I get the following error:

The following tag(s) are already supported by enabled plugins and should not be added to the Source Editing "Manually editable HTML tags" field: accordion (<dl>).

So, even though with this patch we are no longer using the <dl> tag, the CKEditor 5 module still "thinks" we are trying to use that tag.

Please read the extended "README.MD" as it details additional libraries you'll have to install for it to work.

INSTALLATION:
--------
1. Download external library from https://github.com/smillart/WAI-ARIA-Patterns-And-Widgets.
2. Place the library in the root libraries folder (/libraries).
3. Install & Enable the module
4. Open Administration > Configuration > Content authoring >
   Text formats and editors (admin/config/content/formats)
5. Edit a text format's settings (usually Basic HTML)
6. Drag n Drop the Accordion -button to the toolbar to show it to the editors
7. Review available options at /admin/config/content/ckeditor-accordion

Composer installation:
--------
Add package to the repositories section:
        {
            "type": "package",
            "package": {
                "name": "smillart/wai-aria-patterns-and-widgets",
                "version": "1.0.6",
                "type": "drupal-library",
                "dist": {
                    "url": "https://github.com/smillart/WAI-ARIA-Patterns-And-Widgets/archive/refs/tags/1.0.6.zip",
                    "type": "zip"
                },
                "require": {
                    "composer/installers": "^2"
                }
            }
        }

include it in our build:
composer require 'smillart/wai-aria-patterns-and-widgets'

Ah, if that comment was directed at me then I'm not going to be able to test it. I'm QA not a developer.

As of version 2.1 now I get the following errors in the JavaScript console

accordion.min.js?v=1.x:2 Uncaught Error: Accordion constructor argument domNode has direct descendant elements that do not match with H2-H6 [data-aria-accordion-heading] or DIV [data-aria-accordion-panel] as required.
    at new o (accordion.min.js?v=1.x:2:7767)
    at accordion.min.js?v=1.x:2:10828
    at NodeList.forEach (<anonymous>)
    at accordion.min.js?v=1.x:2:10805

It would appear that the rendering of the input is somehow being overriden and the attributes are being stripped from the rendered accordion. The accordion still renders and the user can interact via keyboard and mouse.

But this error is posted to the console on page load.

Anyone familar with this and or how the new code highjacks the input rendering?

Ok created a patch which fixes the client-side error and properly defines the meta data structure of the variant.

Though I've noticed to fix existing accordions I have to manually rebuild each either in a page or block and save it for the rendering to work as expected.