Make level buttons accessible

[megcrenshaw]

Tackles https://codedotorg.atlassian.net/browse/A11Y-153 from the Accessibility Hackathon by making buttons on the following four level types tab navigable:

1. Curriculum Reference: http://localhost-studio.code.org:3000/s/allthethings/lessons/35/levels/1?noautoplay=true, https://user-images.githubusercontent.com/9142121/207218129-2a33fea6-cba5-41e8-a131-9e42a7b29f83.mov
2. External: http://localhost-studio.code.org:3000/s/self-paced-pl-csd5-2022/lessons/5/levels/3, https://user-images.githubusercontent.com/9142121/207218016-c0042678-0af4-463f-9dbd-9b0997fec630.mov
3. Dialog: http://localhost-studio.code.org:3000/s/csa2-2022/lessons/1/levels/6, https://user-images.githubusercontent.com/9142121/207218057-887b80a7-fa0d-4dd0-8b70-6c32b3da48f7.mov
4. Match: http://localhost-studio.code.org:3000/s/csa2-2022/lessons/1/levels/3, https://user-images.githubusercontent.com/9142121/207218083-a40eb0ea-2871-405e-b7ed-60c157fc0b77.mov

The box shadow on hover now appears –– should I work to remove that? I wasn't sure, as standalone_video (e.g. https://levelbuilder-studio.code.org/levels/42684), as well as other pages (login_code and sections/show) all have the box shadow on hover as well.

With the shadow:

No shadow:

Links

Testing story

Deployment strategy

Follow-up work

If you do a search for "%a.btn" in our repo, you'll see there are more instances of fake buttons –– this work is tracked at https://codedotorg.atlassian.net/browse/A11Y-207.

There are also multiple choice answers that are not tab navigable –– tracked at https://codedotorg.atlassian.net/browse/A11Y-206.

Privacy

Security

Caching

PR Checklist:

• Tests provide adequate coverage
• Privacy and Security impacts have been assessed
• Code is well-commented
• New features are translatable or updates will not break translations
• Relevant documentation has been added or updated
• User impact is well-understood and desirable
• Pull Request is labeled appropriately
• Follow-up work items (including potential tech debt) are tracked and linked

[epeach]

👏 Love to see this! And thanks for tracking the follow-up work!
As far as the shadow, I say: let's keep it as similar as possible to what exists. And just to verify, are there other visual indicators than the box shadow on hover?

[megcrenshaw]

No, it's only the box shadow –– unless you count the change in cursor. Example: https://studio.code.org/s/allthethings/lessons/35/levels/1?noautoplay=true

I think that's another reason to keep the shadow, but happy for pushback here.