markup and semantics

[Peter Weil]

First and foremost, thanks for this! I also think it's great that this allows flexibility in the markup. However, I suggest either adding a role of header to the dt element (as in the WAI example), or better yet, dispense with all of the aria roles and go with a header-paragraph pattern (optionally making the latter a region). As it stands, the roles render the definition list as a generic container. This being the case, why not drop the definition list elements and just use a real header element plus either a generic block (e.g.,

) or optionally use the region element?

[Stuart Nelson]

Hi @plweil,

Thanks for getting in touch and for your suggestion! I'm trying to think back to why I didn't add role="header" with JavaScript. I think it was for 3 reasons;

1. I initially forgot...
2. Ideally, I want to get away from using the word header in my JS selectors as I think it can be confusing. Ideally, I want to do a refactor to change it to trigger. I think I was planning on adding it in then.
3. If I add the role with JavaScript as I have done with all the other aria attributes I would need a new JavaScript selector. The "trigger" element (<button>) currently confusingly has the JS selector of js-badger-accordion-header.

I'm a little unsure about what you mean by

header-paragraph pattern

Would you mind showing me a simple example? Then I feel I can make the best decision for backwards compatibility as well as for making the accordion the best it can be.

Thanks again for your feedback.

[Peter Weil]

I meant something similar to Heydon Pickering's Progressive Collapsibles. Basically a heading containing a button (the "Accordion Header"), followed by a div (the "Accordion Panel"). Does that help?

I think the WAI design patterns are not really intended as recommendations for implementation (at least not all of them). A number of them can be done "natively" with simple(r) html and less ARIA.

I came across your project while searching for an accessible accordion done in vanilla to replace the current one in our main WordPress theme. The theme is used campus-wide (UW–Madison), and this is part of a big push to improve web accessibility here.

[Stuart Nelson]

Got it, that example makes a lot of sense. I did not know that about WAI patterns.

So how about I make the role="presentation" & role="region" optional. By default, they will be added but you can disable it if you wish. If I have time when doing it I could allow you to pass in an object so you could if you wanted to keep one of them;

const accordion = new BadgerAccordion(accordionDomNode, {
    // disable all roles
    roles: false

    // disable just region role
    roles: {
        region: false
    }
}); 

I feel this way I keep supporting what is already in place but give the choice to create a more flexible pattern if you wish. What do you think?

It's SUPER exciting for me that you might use the accordion for UW-Madison to improve accessibility! I'm going to put together a showcase of other developers using the accordion. If you use it would you be interested in featuring in it? (Especially if you would be following the "heading paragraph" approach). I think it would be really useful to other devs to see an example in the wild!

[Peter Weil]

Hi Stuart,

I think making the region role an option is a good idea. But I am not sure about the presentation role. I'm still kind of trying to work this through in my head....presentation negates all semantics. It depends on what your markup is. If this is for backwards compatibility, I think the dt may be sitting out there with no dl container, unless you give the dt the header role. Maybe that is what we were talking about initially (sorry, random memory loss)? If so, I think that will work. Then devs can disable these at their own peril, I suppose. But if you change the default markup to the Pickering pattern, then the presentation role is probably unwarranted (what would it be applied to? A div?) If we do use this accordion, I have to think about how to get it integrated with our WP theme (which gets uses node to build css and install js).

[Stuart Nelson]

I'm also unsure now about the presentation role now... For backwards compatibility sake, I'm going to apply as an option this in the next update. Where the example below is the default;

const accordion = new BadgerAccordion(accordionDomNode, {
    roles: {
        region: true,
        presentation: true
    }
});

Your theme sounds interesting! I've not heard of using node to build assets for WP theme before.