fix: [M3-7155] - Link Accessibility & Markup on Billing Detail page

[abailly-akamai]

Description 📝

Small PR to improve accessibility and markup on the Billing Detail page since those were bothering me and throwing warnings in the console.

Major Changes 🔄

• Provide accessibility to the back button link
• Improve markup of the Download CVS Link
• Update imports/exports

Preview 📷

This PR should contain no visual regression and should be tested against any.

How to test 🧪

Local Setup:
Pull and run code locally

Steps:

1. Navigate to /account/billing/invoices/{invoiceId}
2. Confirm there's no warning in the console about Link Accessibility
3. Confirm there's no visual regression (no difference from the production page)
4. Confirm the Download CSV link works as expected

[abailly-akamai]

Here we use the CSV link as the accessible element rather than the button. (also, downloads are semantically links with href)

Rendering the as a span is a decent way to keep the styling identical while being semantically correct (buttons are not permitted within <a> tags)

Content model: Transparent, but there must be no interactive content descendant.

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

[abailly-akamai]

This is the missing tag/accessibility support causing the console error:

https://github.com/linode/manager/blob/develop/packages/manager/src/components/Link.tsx#L83-L88

It works! 🎉

[abailly-akamai]

Looks like we still may need the onClick support on the MaintenanceTable component

[jdamore-linode]

Thanks for tackling this, @abailly-akamai !

Interestingly, even with the accessibleAriaLabel prop, when I use VoiceOver and focus on the "Back to Billing" link, it still gets announced generically as "visited link, billing, main". Navigating and activating the link via keyboard is also touchy; you can still focus the inner button, and when you "click" it via the enter key, it triggers the visual click animation but doesn't actually navigate you back to the billing page.

I'll attach screen recordings to M3-7155 momentarily which can probably do a better job explaining what I'm seeing

[abailly-akamai]

@jdamore-linode thanks for that! the accessibleAriaLabel was not applied to the react-router-dom RouterLink. It is now, and i addressed the focusing issue. should be better now

[jdamore-linode]

@abailly-akamai Thanks, looks great! Confirmed that the label is announced by VoiceOver and that the focus/activation behavior when using keyboard navigation is fixed. Also pushed a quick test fix for the Download CSV and Download PDF buttons

[coliu-akamai]

🎉 Tested:

• no console warnings for link accessibility
• Download CSV link works as expected
• voiceover sounded good for the back to billing link / included 'Back to billing' in the voiceover and other links/buttons
• UI looks good (matches the develop branch -- prod doesn't have the Region column in the invoice table yet, so I didn't check against there)