Problem/Motivation

Patch adds display variants to the accordion which are ARIA and 508 compliant.
Also updated info file to be Drupal 11 compliant.

Patch to add classes and form interfaces as well as rendering.

CommentFileSizeAuthor
#7 ckeditor_accordion-provide-accessible-variant-3124167-49-2024-11-15-.patch22.19 KBemptyvoid
2024-08-27-ckeditor_accordion-2_2-accessible-D11.patch21.99 KBemptyvoid

Comments

emptyvoid created an issue. See original summary.

emptyvoid’s picture

emptyvoid commented
Status: Active » Needs review
charles belov’s picture

charles belov
he/him
Primary language English
Location San Francisco, CA, US
commented

Tested. Due to existing issues #3468229: Adding accordion to CKEditor toolbar gets error and #3468404: Make CKEditor be forgiving of enabling something that's already enabled, I had to manually remove the definition tags. 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.

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>).

I then removed the definition tags from Source Editing and applied the changes.

However, when I add an accordion to the text body of a page, then save and publish the page, I'm still seeing the <dd> and <dt> tags, not <div> and <h2>, being output to the anonymously-viewable page, as well as not seeing any ARIA attributes.

I didn't change this to "Needs work" in the event there was an error in my workflow. It would be good to have someone else check this out as well.

emptyvoid’s picture

emptyvoid commented

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'
charles belov’s picture

charles belov
he/him
Primary language English
Location San Francisco, CA, US
commented

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.

emptyvoid’s picture

emptyvoid commented

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?

emptyvoid’s picture

emptyvoid commented
StatusFileSize
new ckeditor_accordion-provide-accessible-variant-3124167-49-2024-11-15-.patch22.19 KB

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.

majorrobot’s picture

majorrobot commented

@emptyvoid -- curious what the difference between this issue and patch and https://www.drupal.org/project/ckeditor_accordion/issues/3124167?