added accordion with composition api and accessibility standards

[vinnycodes]

Updated this to work with the transition styles in css and the vue js functions. I realize one issue has to do with me using the wrong class in css. Instead of "&-enter" it needed to be "&-enter-from".

I could be wrong but according to accessibility standards, accordions should be buttons.

[khamer]

Getting real close!

ARIA example - Using a button tag for the clickable part (.accordion__header) would be fine, we're more or less doing that by setting the tabindex and aria role. If you wanted to use a button tag for that element, you could, though make sure you remove properties we don't need then (probably tabindex and role.)

The outer wrapper element that includes both the clickable header and the unclickable content should not be a <button>.

Other than that, I think you still need @after-enter="endTransition" if you open an accordion resize the browser you'll see the content bleed out, whereas that doesn't happen with the current version because the hardcoded height is only present for the transition.

Lastly, there's a minor eslint error still kicking around, but if that was it I would have just fixed it and merged.

[TristanMNorton]

@vinnycodes Just another stylistic issue. I wouldn't animate on a scaleY transform. Looks strange with all the content "squishing" as it closes.

I would programmatically animate on exact height, but be careful to remove the inline height style when the transition is complete.