As a developer I need to understand when I can use a hyperlink as a trigger for non-navigation interactions

[gusnaughton]

General Support Request

Recently a request was made to adjust all hyperlinks to have underlines, which has highlighted some usability issues with the frontend of Flight Search:

The docs provide the role:button as the only way to do this today outside the use of a traditional auro-button.

This issue exists to encapsulate the discussion surrounding the documentation and standards surrounding this use case.

Support request

Possible Solution

Context

Your Environment

• Version used:
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Link to your project:

[leeejune]

My recommendation is to replace the hyperlinks with a tertiary button. A button would make more sense as the interaction leads to a dialog instead of another page. Design adjustments might have to be made to accommodate the padding and accessibility issues.

[blackfalcon]

Looking at the design, I see the top links can be auro-hyperlink with default UI.

The bottom two links, they are floating in space. I am not understanding why the padding around role=button is an issue? Has anyone explored what a UI would look like with auro-button type secondary?

@leeejune the button type tertiary, with this new underline perspective, how does that impact the UI of that button? Currently, it does not support an underline without hovering over it, and from the attached design, it is supposed to be underlined?

[braven112]

Looking at the design, I see the top links can be auro-hyperlink with default UI.

The bottom two links, they are floating in space. I am not understanding why the padding around role=button is an issue? Has anyone explored what a UI would look like with auro-button type secondary?

@leeejune the button type tertiary, with this new underline perspective, how does that impact the UI of that button? Currently, it does not support an underline without hovering over it, and from the attached design, it is supposed to be underlined?

June and I looked at this scenario and it looks exactly the same using a tertiary button with the exception of the hover state. I think this type of scenario could be a good candidate for a new button group concept as well.

[leeejune]

Had a conversation with Erika and Amanda. @blackfalcon Apparently the tertiary button is not accessible because it has no affordance other than color (like you have mentioned). We will need to add guidelines behind using the tertiary button (having specific action icons, underline, need to brainstorm). The solution we decided on for the flight search page is to replace the current hyperlinks to tertiary buttons with chevron icons on the right. This is an action icon that will serve as a supplementary indicator for action.

[leeejune]

Will do research to edit our tertiary button.