The navItems are not clickable with vimium (accessibility)

[michaelfresco]

Pre-requisites

• [X] I have double-checked my configuration
• [X] I can confirm the issue exists when I tested with :latest
• [X] I have searched existing issues and could not find a match for this bug
• [X] I'd like to contribute the fix myself (see contributing guide)

What happened/what did you expect to happen?

The nav-bar items are not clickable with Vimium. In the screenshot above I included a fix for it. If you add: role="checkbox" it becomes clickable!

Version

latest

Paste a small workflow that reproduces the issue. We must be able to run the workflow; don't enter a workflows that uses private images.

• install vimium: https://github.com/philc/vimium
• hit f and see that not all ui elements are clickable

Logs from the workflow controller

N/A

Logs from in your workflow's wait container

N/A

[michaelfresco]

https://github.com/argoproj/argo-ui/blob/4848ea1a2f6fa4e34b72fb84ff0ee91453dfbe26/src/components/nav-bar/nav-bar.tsx#L39

I think that if we add role="checkbox" to that line, it would work.

                        <div className={classNames('nav-bar__item', { active: isActiveRoute(locationPath, item.path) })}
                            onClick={() => context.router.history.push(item.path)} role="checkbox">
                            <i className={item.iconClassName}/>