Skip to content

LG-5456: Implement confirmation tooltip for clipboard button#8307

Merged
aduth merged 3 commits intomainfrom
aduth-clipboard-button-tooltip
May 8, 2023
Merged

LG-5456: Implement confirmation tooltip for clipboard button#8307
aduth merged 3 commits intomainfrom
aduth-clipboard-button-tooltip

Conversation

@aduth
Copy link
Contributor

@aduth aduth commented Apr 28, 2023

🎫 Ticket

LG-5456

🛠 Summary of changes

Adds a new tooltip to be shown when activating "Copy" buttons, using the U.S. Web Design System Tooltip component with alterations to display the tooltip only once the button is activated.

For accessibility reasons (SC 2.2.3 No Timing), the tooltip will remain visible as long as the button has focus (or as long as the cursor remains over the button in the case of Safari cursor click, due to intentional browser-specific button mechanics).

Note that this is currently temporarily set to merge to aduth-lgds-7 only because it's expected to land soon and would have conflicts with what's being introduced here. I'll rebase against main once the other branch is merged.

📜 Testing Plan

  1. Go to http://localhost:3000/components/inspect/clipboard_button/preview
  2. Click the button
  3. Observe the "Copied!" tooltip

👀 Screenshots

Screen Shot 2023-04-28 at 2 45 39 PM

@aduth aduth requested a review from a team April 28, 2023 19:19
Copy link
Contributor

@jmdembe jmdembe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍🏾 LGTM

@aduth
Copy link
Contributor Author

aduth commented May 2, 2023

I was planning to rebase this against main to avoid a dependency on #8093, but it looks like the tooltip.setup function used in the implementation is only available in USWDS 3+ 😬 Might need to expedite that other pull request.

Base automatically changed from aduth-lgds-7 to main May 5, 2023 13:13
aduth added 2 commits May 5, 2023 09:14
changelog: User-Facing Improvements, Copy Button, Add confirmation tooltip to Copy buttons
Hidden elements are valid as references for idref
@aduth aduth force-pushed the aduth-clipboard-button-tooltip branch from 7c2e24d to 2dcee73 Compare May 5, 2023 13:14
@aduth
Copy link
Contributor Author

aduth commented May 5, 2023

I rebased against main now that #8093 is merged.

In some final testing on my phone, I spotted an issue in how USWDS implements the tooltip that conflicts with our mobile button display, causing the buttons to no longer appear full-width. I'm going to try to find a workaround, pending an upstream fix.

image

@aduth aduth merged commit 73f0559 into main May 8, 2023
@aduth aduth deleted the aduth-clipboard-button-tooltip branch May 8, 2023 14:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants