`<wa-animated-image>` is not operable by keyboard or assistive technology

[extra808]

Describe the bug

Animated Image has no controls in the focus order so the animation can't be played/paused using a keyboard. Because it has no controls with a role or name, they can't be played/paused using assistive technologies (AT) like a screen reader or voice control.

This is an accessibility bug. This web component is a great way to make animated images meet WCAG success criterion 2.2.2 Pause, Stop, Hide but as implemented it fails other criteria, including 2.1.1: Keyboard and 4.1.2 Name, Role, Value.

To Reproduce

Steps to reproduce the behavior:

1. Go to Shoelace sl-animated-image example
2. Use Tab key to focus "button before" button
3. Press Tab again to focus the next focusable element
4. See focus is on "button after," <sl-animated-image> has been skipped

Demo

Codepen example

Screenshots

Video of reproduced behavior. Description: Pressing Tab focuses "button before," pressing Tab again focuses "button after," pressing Shift-Tab focuses "button before" again (keypresses displayed on-screen).

Tabbing.through.page.with.sl-animated-image.focus.is.only.on.buttons.before.and.after.mov

Browser / OS

The problem is not browser or OS-specific.

Additional information

• Slotting in elements for the play/pause buttons doesn't help because the click listeners are on the elements.
• Adding a click listener to [part="control-box"] should allow slotted-in elements to work but keyboard and AT operability should instead be provided by default. A single button should suffice (e.g. make part="control-box" a instead of a
  ), the icon and name of the button should change based on the element's play state ("play" and "pause" icons and names should still overridable using slots).
• The button(s) should always be in the focus order; when focused, the button should be visible, even if the animation is playing.
• BTW, because the component uses the write-to-<canvas> technique, it works not only with animated GIF and WebP but with any animated image format, like animated PNG or AVIF.