Critical Action Button in Web Components

[enowak1031]

[rhenness]

can you add a link to the specs when they are ready? my team may have availability to work on this @enowak1031

[msankaran0712]

Hey @ryan-henness-trimble Please refer to https://docs.google.com/document/d/1fdoD60sLyEywfnXk_zpGlCeR5ZAUGKEVS6TU4UR9Xx8/edit for the specs

please correct me if it is not the correct document @enowak1031

[msankaran0712]

@ryan-henness-trimble is your team planning to work on this issue?

[cjwinsor]

Follow the specs from https://docs.google.com/document/d/1fdoD60sLyEywfnXk_zpGlCeR5ZAUGKEVS6TU4UR9Xx8/edit and the styleguide.

[rhenness]

@ryan-henness-trimble is your team planning to work on this issue?

Our availability is low at the moment - we won't plan on taking this one on

[cjwinsor]

@ryan-henness-trimble We are in the process of planning out when we'll tackle it 👍

[cjwinsor]

Create a new property on the modus button which adds the press/hold/progress indicator as described for the critical action button. Just like Danger and Special, we will call out this variant as Critical Action Button, which is specifically a Danger button with this property set to true. We won't implement this property if the color isn't set to danger. That is something that can be added later if a strong need is brought up. We should make it clear in the writeup that this property only affects danger buttons.

The animation for the progress should reverse on mouse up at the same rate. If they mouse up and back down before it resets to 0, pick up where they left off.

Interactive example https://www.figma.com/design/6Z8p2NuEyPnD4GBVHuA6cL/Critical-Action-Button-Animation?node-id=1-1480&t=9nGd9csfkVk3XEAC-1

[coliff]

Accessibility Report: I raised concern about including this before but I don't think this 'hold down button' paradigm is accessible at the moment.

• Right now holding down the button does nothing on an iPad.
• The action is not announced to screen readers
• The long-press action is already in use on Windows with touch screens and works everywhere, including web browsers. The effect of executing custom action on long press can be therefore unpredictable and it could depend on the operating system and/or browser.

Unless you have some solid workaround of this problem, you should not ignore this shortcoming, especially when designing web UI, which is expected to be platform independent. Without solid workaround available, I would categorize the severity of this problem as a stopper.

Long-pressing a button isn't a known action on web for desktops, it simply doesn't exist (that's why you need to use JavaScript for this to work) and you won't see it in other style guides.

We need to at least fix the iPad and screen reader issues above and display messaging for users with JavaScript and provide a warning/guidance about using this in production.

For the style guide, I think we should mention about instead of using this button consider asking the user to confirm the action again. Smashing Magazine posted an excellent article 'How To Manage Dangerous Actions In User Interfaces' last week with ideas: https://www.smashingmagazine.com/2024/09/how-manage-dangerous-actions-user-interfaces/

---

COMMENT UPDATE : I wanted to mention that although I'm not a fan of this pattern, the way it functions on desktop is great - good work. :-)

[enowak1031]

@coliff I think we should add the button and add a warning label both in Storybook and on the style guide that it might not be accessible. I created a separate issue to address this: trimble-oss/website-modus.trimble.com#944