UI: External links are not rendered as anchor elements

tvandinther commented 2 months ago

Pre-requisites

[X] I have double-checked my configuration
[X] I have tested with the :latest image tag (i.e. quay.io/argoproj/workflow-controller:latest) and can confirm the issue still exists on :latest. If not, I have explained why, in detail, in my description below.
[X] I have searched existing issues and could not find a match for this bug
[ ] I'd like to contribute the fix myself (see contributing guide)

What happened? What did you expect to happen?

I tried to right click on the button and select "Open in new tab" from the context menu. This option was not there as the button is rendered as a <button> element rather than <a>.

I found while looking through the code that you can hold ctrl while clicking to get the same effect, but this is not intuitive for users. These "external link" buttons should follow the HTML standards to enhance usability.

Version(s)

524406451f4dfa57bf3371fb85becdb56a2b309a

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

Configure links to be displayed on the UI
Try to right click on the link-button

Logs from the workflow controller

N/A

Logs from in your workflow's wait container

N/A

agilgur5 commented 2 months ago

Configure links to be displayed on the UI

Can you specify which links you configured? There are multiple scopes, and they don't necessarily all render the same.

Some of these are due to upstream: https://github.com/argoproj/argo-ui/issues/166

Or because all the other elements in the row are buttons and they just use the same element. They should be anchors, but the same styling also needs to apply, so it may not be a simple fix as such

tvandinther commented 2 months ago

Sorry, yes I specifically configured workflow scoped links in my test. I had a look through the UI code and it was quite a tunnel to follow. The fix would most likely require an addition to a discriminator of sorts to the button definitions so a similarly styled <a> element can be used in place of a button. There is also the <link-button> custom component which is currently defined as a <button>, though I couldn't trace its usage during my first glance. When I have some more time I can take a deeper look at what may be required if the maintainers are happy with the proposition that these buttons should be anchors.

agilgur5 commented 2 months ago

if the maintainers are happy with the proposition that these buttons should be anchors.

They should be; I believe it's also an accessibility issue when they're not

tooptoop4 commented 3 weeks ago

dupe of https://github.com/argoproj/argo-workflows/issues/10370

agilgur5 commented 3 weeks ago

dupe of #10370

This is specifically about the links feature, that one is about the home button. Likely same root cause though of not using proper HTML semantics, which this has a good bit more detail on

argoproj / argo-workflows