Class name inconsistency js-accordion__header [potential bug]

[KieranGreenwood]

The js-accordion__header class starts on the <hx> element but when JavaScript takes over the element is given js-accordion__title and the child <button> is given js-accordion__header. E.g:

h2.js-accordion__header

Becomes

h2.js-accordion__title.custom-accordion__title
  button.js-accordion__header.custom-accordion__header

I require both non/javascript versions to have the same style so I applied custom-accordion__header to my source HTML. This causes style problems because custom-accordion__header ends up being nested inside itself. Like so:

h2.js-accordion__title.custom-accordion__header
  button.js-accordion__header.custom-accordion__header

I did try changing the classes generated with:

var other_accordion = van11yAccessibleAccordionAria({
    ACCORDION_HEADER_STYLE: 'accordion__button'
});
other_accordion.attach();

This solved the style problem, but broke the toggle functionality. The following was logged to the console.

"Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#[data-hashaccordion-id="otef8le46q"]' is not a valid selector."

In the end, I have had to drop the use of custom prefixes and only use js-accordion__xxx which isn't the end of the world.

Possible solution to this problem Have the heading element keep js_accordion__header and the generated button be given a class of js-accordion__button

[patrickcate]

"Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#[data-hashaccordion-id="otef8le46q"]' is not a valid selector."

I'm running into this same problem.