fix: The navItems are not clickable with vimium (accessibility)

[michaelfresco]

Motivation

• This PR adds a tag role="checkbox" to the navItems. This has the benefit that keyboard users can use vimium to navigate the user interface. At the moment, the navItems do not show up as links, because they do not contain a typical <a href>

• Adding role="checkbox" works around that issue, and makes them clickable

• Please also see the original issue: The navItems are not clickable with vimium (accessibility) argo-workflows#12813

[agilgur5]

• At the moment, the navItems do not show up as links, because they do not contain a typical <a href>

why not use an actual <Link> component here? Same as #222 (comment), that would resolve #166 as well

[michaelfresco]

I tried a few variations with a <Link> component but I don't know how to make this work. (I have little experience with web development). However, I think that it is a Tooltip-thing. If you look at other Tooltip examples, they have the same issue. Like here, https://react-tooltip.com/docs/getting-started, the Tooltip buttons are clickable but do not show up as real links.

[tooptoop4]

where @michaelfresco

[michaelfresco]

Hi @tooptoop4, and @agilgur5,

A link like this also works:

                    <Tooltip content={item.title} placement='right' arrow={true} key={item.path + item.title}>
                    <a href="#">
                        <div className={classNames('nav-bar__item', { active: isActiveRoute(locationPath, item.path) })}
                            onClick={() => context.router.history.push(item.path)}>
                            <i className={item.iconClassName}/>
                        </div>
                    </a>
                    </Tooltip>

(I verified this with a locally built Argo Workflows image)

[tooptoop4]

@crenshaw-dev 📦 pls

[michaelfresco]

This version actually has some side effects. Sorry for all noise! I made a new PR, based on gaurav5430's work.