feat: Accessible clap button and other improvements

[chriswilty]

Now using a native html <button> for instant a11y improvements, including keyboard focusability and semantics.

Other improvements:

• Clap count is no longer positioned outside component bounds, which users needed to know about and allow for on their pages
• Now only need to set width on applause-button element, not height, as aspect ratio of the button is fixed as square
• Styles and event-handling code have been tidied as a result of using html button

I must admit, this one is non-trivial to review as there are plenty of changes, including to the stylesheet, which I tried to simplify a little. In a subsequent PR I will simplify this further by junking SASS in favour of pure CSS.

I suggest you check it out, run it locally using yarn test:serve then view it / click it a bit to see how it behaves. Note you'll need Node >= 18.17 to run it.

[chriswilty]

Am I right in thinking attributeChangedCallback is no longer used?

As my initial response was buried in another comment: attributeChangedCallback is a built-in method of custom elements, invoked whenever an attribute is, uh, changed. Our custom element listens for the color change, so this callback is indeed used - see also observedAttributes property.

For the record, I am somewhat confused that this custom element also exposes some properties as a way of accessing and changing state. There seems to be no particular reason for this, but we seem caught between two implementation styles here; color is the only observed attribute that triggers the actual change callback, and the rest are exposed via property setters. Sometimes people prefer properties as those can be any value, not just strings, but here we are only really interested in string values, aside from "multiclap" which is boolean, and that is easily represented as "true". I will add an issue to discuss this, but note if we change the component API then that would be a breaking change.

[github-actions[bot]]

:tada: This PR is included in version 4.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: