oncode/handorgel

Accessible W3C conform accordion written in ES6.

handorgel's Issues

Demo

Some functional pictures, gif, or demo link would be very helpful!

seems npm needs to be updated?

:-)

Nesting - height: auto

Hi! First thank you for your work!
I am trying to use handorgel inside another handorgel. It actually does not even have to be handorgel just anything that changes height.

The issue is that obviously the height of content is fixed px number. I understand this is needed for the animation back. The solution probably would be to have middlestep with height: auto. I am wondering if you've given this any thought - maybe its a bad idea.

var accordion = new handorgel(el, {});
accordion.on('fold:opened', (fold) => {
	fold.content.style.height = 'auto';
});

accordion.on('fold:close', (fold) => {	
	fold.content.style.height = fold.content.offsetHeight + 'px';
});

This naive solution works for the nested handorgel the parent handrogel.content is height: auto so it works nicely. The problem si closing - first the event seems to fire after the resize so it animates instantly it goes from height: auto to height: 0px. Then there are things like the resize that has to also use 'auto'. But i am just wondering if there is some reason why you didn't go for this kind of implementation? Is it better to solve nesting by using events and recalculate parent handorgel accordigly (this approach seemed to work even worse for me)?

Auto Generate handorgel__header

It seems like it would make things a lot easier if the handorgel__header element could be auto generated based on the handorgel__content if it had a data-handorgel__header to specify the header text.

Have you considered this?

Close animation

Currently Handorgel sets the .handorgel__content element to height: auto after the opening transition, presumably so that the wrapper's height will be correct when the viewport is resized etc.

However, this means there can't be a close animation as you cannot transition from height: auto to height: 0. Would it make sense to change Handorgel so that it does not set height: auto after the opening transition? Or am I missing something?

[aria-*] attributes do not match their roles

I'm getting this alert in the latest version of Lighthouse:

[aria-*] attributes do not match their roles

Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes. Learn more.

Failing elements:

<div class="handorgel" id="handorgel1" aria-multiselectable="true">

I'm not very good with aria stuff, so I'm not exactly sure what the problem is, but the alert seems to indicate that it's the multiselectable attribute. Perhaps a role needs added to the container as well?

If this is something I can fix on my end, please do let me know, I just don't have much experience with aria so I'm not sure where to even find the appropriate documentation.

handorgel is not a constructor

Package version: 0.4.9

JS

const handorgel = require('handorgel');
const options = {
  multiSelectable: true
}
var h = new handorgel(document.querySelector('.handorgel'), options);

Error image link

Use other element than a button..

i needed to place these accordion inside a form and the fact
that i cant choose the trigger element by type / class is a problem.

Anyway around that?

Add option to specify handorgel classes

It'd be awesome if we could specify our own classes for each element of the handorgel instance. Something like:

{
    containerClass: 'handorgel',
    headerClass: 'handorgel__header',
    buttonClass: 'handorgel__header__button',
    contentClass: 'handorgel__content',
    contentInnerClass: 'handorgel__content__inner',
}

Some notes:

• containerClass may not be necessary, because I think it's specified in the first parameter that gets passed.
• I'm not sure if all classes are 100% necessary as it is, so some of these may be pointless to add. If I recall correctly, I think only the container, button, and content elements are truly required, but I'll have to double check when I get moment.

If you'd like, I can look in to what it would take to implement and possibly submit a pull request.

Styling with only animations

It would be usefull if we had bare-bones version of css, just with animations and nothing like background color, font size etc.

Uncaught ReferenceError: Handorgel is not defined

Hi there

I seem to have done everything to make it work, but I am getting the above JS error on this page:

http://rimesweb.staging.wpengine.com/privacy-confidentiality-2/

Ta for any help!

Init Handorgel only on mobile

Hi, thanks a lot for this great plugin!
Is it possible to activate Handorgel only on certain viewports?
(The content should nevertheless be displayed on all viewports.)

IE10 Support

Currently the script is not compatible with IE10 and I can't find the problem. I guess it's in the function proto.emitEvent. But I'm not sure. Can you have a look please?

--open classes don't always get removed when a handorgel closes

In some cases, the --open classes aren't removed once a handorgel is closed. I'm having difficulty figuring out exactly when this happens, but it seems to happen more often when you quickly open and close. In the screenshot below, you can see that the handorgel__content has height: 0px; set, but both it and its related handorgel__header both still have their --open modifiers. This may be Firefox specific; the issue occurs in Firefox Developer Edition 84.0b4, but not in Chrome 87.0.4280.66 (both tested on Windows 10). I haven't had a chance to test in other browsers yet.

Import SASS from node_modules

Love the library, one thing I noticed in the documentation. To properly import SASS from node_modules directory the code should be formatted like @import '~handorgel/src/style';

Nested Accordions Issue

While using Nested accordions like:

---accordion A

--accordion A.1
--accordion A.2
--accordion A.3

--accordion B

--accordion B.1
--accordion B.2

If I am trying to open accordion A.1 after opening accordion A i.e the parent accordion. The height of the content of accordion A "the parent accordion" is not getting recalculated.

Resulting the content of Accordion A.1 to overflow out of the accordion A content's allocated height. Which is breaking the view.

So the question is:
Is it feasible to nest the accordions using Handorgel?

• If No: Fine.
• If Yes: How to solve this issue?

Different Markup

How can I make it works with markup like this one:

<div class="handorgel">
  <div class="card>
    <h3 class="handorgel__header">
      <button class="handorgel__header__button">
        Title
      </button>
    </h3>
    <div class="handorgel__content" data-open>
      <div class="handorgel__content__inner">
        Content openened by default
      </div>
    </div>
  </div>
  <div class="card>
    <h3 class="handorgel__header">
      <button class="handorgel__header__button">
        Title
      </button>
    </h3>
    <div class="handorgel__content" data-open>
      <div class="handorgel__content__inner">
        Content openened by default
      </div>
    </div>
  </div>
</div>

?

Can I open an accordion using an external trigger?

I have the footnotes for a financial table hidden inside an accordion. It works great, but I want to be able to anchor the notes in the table down to the accordion, which will then open.

(The functionality of how the accordion opens is less important than it opening.)

I realise this may be outside of the accordion's scope, but thanks for getting this far.