This Print action button uses a div element.

Print Page

This Mute toggle button uses an a element.

Mute

Go to original example.

Lessons learned:

  • Original example has handlers for both keyup and keydown events on the action button. They both trigger the same function using the same methods, and I wasn't able to identify why it was done this way. I opted to handle the events in the same keydown listener.
  • Coming from React experience, I found it interesting that I could not access the parent's on:click handler like normal props. I instead create a Component event that handles both click and keyboard click, and the parent handles a single click event.
  • <svelte:fragment /> is new as of Mar 2021, and the documentation can be found at sveltejs/svelte#6097.
  • I think I would have preferred to have a single Button element that would allow for rendering a dynamic element type (see sveltejs/svelte#2324), but that would lean more towards an implementation for a design system rather than an example implementation which is the focus of the ARIA authoring practices.