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

Created on 27 August 2024, 4 months ago

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.

πŸ› Bug report
Status

Active

Version

2.2

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States emptyvoid

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

  • Issue created by @emptyvoid
  • Status changed to Needs review 4 months ago
  • πŸ‡ΊπŸ‡ΈUnited States emptyvoid
  • πŸ‡ΊπŸ‡ΈUnited States charles belov San Francisco, CA, US

    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.

    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.

  • πŸ‡ΊπŸ‡ΈUnited States emptyvoid

    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'
    
  • πŸ‡ΊπŸ‡ΈUnited States charles belov San Francisco, CA, US

    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.

  • πŸ‡ΊπŸ‡ΈUnited States emptyvoid

    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?

  • πŸ‡ΊπŸ‡ΈUnited States emptyvoid

    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.

  • πŸ‡ΊπŸ‡ΈUnited States majorrobot

    @emptyvoid -- curious what the difference between this issue and patch and https://www.drupal.org/project/ckeditor_accordion/issues/3124167 πŸ“Œ Provide an accessible variant Needs review ?

Production build 0.71.5 2024