Better Keyboard A11y + Navigation

[aryanpingle]

Keyboard accessibility is super important, and not just for the visually impaired. It's common practice to TAB through a website when your mouse is faulty and/or you can't be bothered to reach for it. The options components aren't very keyboard-accessible; this PR aims to change that.

Changes include:

• Making all input types react to keyboard focus
• Minor design improvements in this scope

Visual Comparison

In both before and after I TAB to the Advanced Settings expander, and then TAB to the end. If it feels like I'm not doing anything in the before changes video... well, that's the issue. I also try to make the checkboxes feel like Material UI, but I can only get so far without a complete overhaul.

Before changes - Little to no focus effects After changes - 100% support for keyboard navigation

[aryanpingle]

Hi @argyleink, do the changes look good to you? Before/After comparisons are in the description, and I've made the branch up-to-date with dev :)

[argyleink]

sorry for the delay here, I got super sick last week and was out for a few days. I'm ramping back up this week and have this on my todo list 👍🏻

[aryanpingle]

@argyleink Ahh no worries at all, hope you're feeling better now 😄

[aryanpingle]

@argyleink I added some new changes, would love to hear your thoughts :)

1. I added the focus outline to the save/import buttons, and made them conditionally disabled (instead of just reducing the opacity)
2. The back button now has a simple blue pulse outline animation on focus. Nothing too fancy, just something to make it stand out against the light/dark backgrounds (image below)