Update "Try another way" input to use a disclosure menu

[gcamacho079]

Description

• Changes the “Try another way” button to a disclosure instead of a select-type component.
• Implements a new spinner web component with visually hidden "Loading" text. This presents an alternative to using a live region for announcing loading states, as using the focus method results in the message being surfaced to screen reader users. (See attached video for VoiceOver demo)

Screen.Recording.2024-06-06.at.10.24.44.AM.mov

In the video above, selecting an option from the disclosure menu causes the menu to close, and programmatic focus is moved to the spinner; because the spinner has a visually hidden text node, “Loading“ is announced. The spinner is then hidden, and focus is moved to the new form field.

Related issues

Resolves PT-1693

[linear]

PT-1693 Update "Try another way" input to use a disclosure menu

[brandonkelly]

Couple things that could be better:

• The chevron icon color should match the text color (dark gray; blue on hover).

• The spinner is pretty jarring. Maybe lock the height of the container and center the spinner within it, so at least the pane height isn’t changing twice rapidly.

[gcamacho079]

Couple things that could be better:

Thanks for reviewing, @brandonkelly! Just made those modifications. 🙏🏼

[brandonkelly]

@gcamacho079 Thanks!!