Component is Inaccessible

[malcalevak]

I like the look and general function of this lightbox, but anyone who relies on the keyboard or accessible tech to navigate would be locked out of using this component. You could "fake" it by adding role="button", tabindex="0", and some keyboard handlers that trigger the same event as a click when space or return/enter are pressed, but it should really be using buttons. On the plus side, the images that have click handlers do have alt text, which is important for screen readers (so long as it's accurate).

That said, once opened, you are using buttons, but they have no accessible names. This could easily be remedied by adding aria-label="button purpose". They also don't have focus states, which should mirror the hover states (this would apply to the image "buttons" above as well).

You can't close the lightbox with the escape key.

The main image being a background image creates an interesting challenge, since it's semantically a meaningless div; I imagine there's a good reason for it, but it would be preferably to actually use a native image element, along with the same alt text. There's probably a better way to associate the description with the image as well, though I can't think of how off the top of my head. Technically, though, it actually isn't hidden from screen readers.

I realize this isn't the most well worded ticket, but it would be great to see this become a fully accessible option!