🎉 a11y: improves a11y by tab navigation

[ibrahimcesar]

• Added tabIndex 0 to div container
• Changed internal div to button

Thanks @PixeledCode for report the issue!

resolves #21

[PixeledCode]

Hi, @ibrahimcesar thanks for the update. It does make it focusable by keyboard users but it's still not accessible.

I'm using NVDA for testing and it declares the button like 'button'. That's very hard for them to know what button is it.

Officially, Youtube does it like, 'Watch {Video Title} link'

So here's what I suggest:

• For the div, we can remove tabindex since it's making video focusable 2 times.
• For the Button, add an aria-label of Watch, {titleName}

So when a user focuses on the video, it will announce it as, "clickable watch, video title, button"

Let me know what you think and thanks a lot for taking your time to improve accessibility of the tool.