UX: Make recommendation for "Go to inbox" button

[brea11y]

While performing the buttons and links audit in quarter 3, we ran across the "go to inbox" button in the secure messaging area (appears to only be within empty folders). Since this is a way to navigate to the inbox and is not used to perform / complete an action, this should be a link and not a button. This list has been pulled in from the full list of audit results.

If possible, you may discuss with ENG whether it is feasible to simple switch out how this button is coded rather than changing the appearance of the "button" itself.

Detailed information:

• [ ] Go to inbox
  • Location: Health / Messages / Folders / Empty folder
  • Current component type: Button
  • Current style: Primary
  • Icon: N/A
  • What happens? Redirects you to the messages inbox
  • Recommended change: Should be a link not a button

[wavelaurenrussell]

Recommendation: Have [Go to inbox] button read as a link.

[alexandec]

@wavelaurenrussell I tried a variety of ways to change the accessibility role of this button to be "link" instead of "button". But regardless of what I tried, the screen reader still reads the role as "button". More specifically, the design system's Button component has a role of "button" and does not support modifying that role. Wrapping the Button component in another component with the "link" role did not work.

I would recommend we actually change this button into a link, so it both displays and reads as a link. Would that approach work for you from a design perspective?

[wavelaurenrussell]

@alexandec Yes that works. I can provide a design, and this will also lead to another discussion re links and their associated icons. Will probably result in an additional ticket, but can we discuss at 3/5 dsu?

[alexandec]

@wavelaurenrussell sounds good, thanks

[wavelaurenrussell]

Per standup, @alexandec and I will work on making a recommendation for the link component, starting with styling this button as a link.

[wavelaurenrussell]

Top level decision pasted below. Background available in this Slack thread between designers.

[wavelaurenrussell]

We're electing to make these the default style, and eliminating the icon for internal links.

[rbontrager]

@wavelaurenrussell The 'go to inbox' link looks like the following for alert boxes. Should it be left aligned/have paragraph spacing now that its a link etc?

[wavelaurenrussell]

Yes, please left align and add the spacing to this link.

[alexandec]

Here's how it will look:

[alexandec]

Updated the alignment and spacing for all the "Go to inbox" links

[wavelaurenrussell]

Looks good thank you

[rbontrager]

Verified that the 'go to inbox' button in SM is now a link. Verified that the spacing and alignment for the link in error messages looks good. Approved by QA.