"rose-button-body" in some desktop browser width configurations can prevent click on links

[driskell]

Describe the bug

In some UI areas, such as Targets listing, you can experience problems clicking the target name because it won't be clickable.

Upon inspection you can see a 1px by 1px box is preventing click - I think Safari on macOS may be making the clickable area larger than 1px by 1px to ensure accessible.

To Reproduce

Open Targets with a long list of targets of at least maybe 50 entries. Set your browser width in macOS Safari 17.1 to 1876x896.

Hover around the Target name column links and notice that only the left side and the top part of the links show a cursor hand icon for click ability, and then just hover still on the other region of the blue text and you'll see "Copy to Clipboard" appear.

Upon inspection you'll see it's the rose-button-body around the hidden Copy to Clipboard text in the far column where you can copy to clipboard. It's set to move off screen but is only using -1000px for top and left so it's far from off screen, and on most desktops is likely still on screen.

You can see the offset here: https://github.com/hashicorp/boundary-ui/blob/adfa118ae55fa3918a48420cfb6b7534691e9fb9/addons/rose/app/styles/rose/utilities/_button.scss#L40-L47

Expected behavior

Links to always be clickable.

Possibly have -10000px instead of just 1 thousand so it's far off. It should also be set to have z-index to move it below everything and possibly even ignore cursor events.

Additional context

N/A

[driskell]

Probably worth improving that as it might suffer from "smudging" without the white-space: nowrap as I think some screenreader will see it as a word per line because the width 1px wraps it, and then read it super fast like there's no spaces.

Found this: https://www.a11yproject.com/posts/how-to-hide-content/

[calcaide]

@driskell Thank you for your patience and the details provided.

We were unable to reproduce the described issue, but with the Desktop Client 2.0.1 release we deprecated the component that was causing the issue, as per your description the rose-button-body. Now a new component is in place and we see no issues with the new component.

Please, let us know if you still reproducing the issue with this new version.

[driskell]

Hi @calcaide

This issue refers to the in-browser UI included with Boundary itself. When I mention "desktop browser" it's because it only causes issue on a screen where the -1000px causes it to overlap something.

Indeed, this is still an issue in Boundary 0.15.0-HCP

[driskell]

I have noticed however in 0.15.0-HCP, for myself anyway in Safari 17.3.1 on macOS 14.3.1, it doesn't prevent the click as often - I think previously maybe something was causing the click area to be much wider than 1px by 1px. Now it's less an issue as it looks like the unclickable region is now genuinely 1px by 1px. I can't confirm if this is my browser settings or something else though - so it's possible this still causes some issues in some places.

Generally speaking though, an offset of -1000px isn't correct for hiding something.

[calcaide]

Hi @driskell

Understood, my apology for the confusion. We also roll out this change on the Admin UI available in HCP. The version you are currently running 0.15.0-HCP will need to be updated to 0.15.1-HCP to have this change available.

Please, when you update the HCP version, let us know if you are still suffering this issue.