Problem/Motivation

The accordion component does not open or close after theme generation.The accordion.scss uses .is-open to show the content panel, but accordion.js calls A11yAccordion without expandedClass, so the library defaults to toggling .is-expanded a class the CSS never responds to.

Steps to reproduce

  1. Generate a theme from the Prototype Starterkit
  2. Build assets (npm install && npm run build)
  3. Add an accordion to a page and click a trigger content panel doesn't display

Proposed resolution

Pass expandedClass: 'is-open' to sync the JS with the SCSS

 new A11yAccordion(accordion, {
   triggerSelector: '.c-accordion__trigger[aria-controls]',
-  contentSelector: '.c-accordion__content',
+  contentSelector: '.c-accordion__content',
+  expandedClass: 'is-open',
 });

Issue fork prototype-3586514

Command icon Show commands

Start 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:

Comments

grgcrlsn321 created an issue. See original summary.

grgcrlsn321’s picture

Assigned: grgcrlsn321 » Unassigned
Status: Active » Needs review

Simple fix! Needs review.

grgcrlsn321’s picture

Title: Accordion component missing expandedClass » Accordion and tab-content missing expandedClass
grgcrlsn321’s picture

Similar to accordion tab-content.js is missing expandedClass: 'expanded' from the tab-content.scss. You can test it the same way by generating theme and creating tab content in the paragraphs. I've added the fix for tab-content along with accordion.

jldust made their first commit to this issue’s fork.

jldust’s picture

Status: Needs review » Fixed

This has been merged in and will be included in the next tagged release.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.