Keyboard accessibility with :focus-visible

[gregswinehart]

Do we need to explicitly set `:focus-visible' in badge.js?

On the Shiny site, I'm seeing this as I tab through the navigation:

before.mov

I added:

#supported-by-posit:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(0,123,194,.25)
}

and that shows like this:

after.mov

I'm curious if you know of any other accessibility concerns we should look into as well?

[jeroenjanssens]

This is a good idea. We do need to think about the color. Have a sensible default? Make it configurable as a parameter?

I can think of two other accessibility concerns:

• The script already sets aria-label to 'Supported by Posit', so this should work with screen readers
• We could disable the hover animation when users prefer reduced motion

[jeroenjanssens]

By the way, congrats on starting the first issue!