[a11y] Override button role for a link

[xovnsi]

Description

This PR unsets the role of sign in link, which is currently a "button" in order to fix this a11y issue: https://zendesk.atlassian.net/browse/GA11YFIX-448

Screenshots

Before:

After:

Checklist

• 📗 all commit messages follow the conventional commits standard
• ⬅️ changes are compatible with RTL direction
• ♿ Changes to the UI are tested for accessibility and compliant with WCAG 2.1.
• 📝 changes are tested in Chrome, Firefox, Safari and Edge
• 📱 changes are responsive and tested in mobile
• 👍 PR is approved by @zendesk/vikings

[Fredx87]

The style commit type is not the correct type for these type of changes

• it should be used for "Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)"
• It is not going to create a new version when the PR is merged
• It is not going to add an entry in the changelog
• the correct type is fix

[Fredx87]

This fix is going to assign an empty role to the element. I am not sure it is ok for a11y, let's see what @zendesk/product-accessibility says. I understand we cannot just remove the role from Help Center since it can cause breaking changes, but maybe we should set it explicitly to the default role for links (which I guess is link).

We also need to update the link in the mobile view:

copenhagen_theme/templates/header.hbs

Line 82 in 44ed9a3

{{#link "sign_in"}}

And we should probably also remove the title from Help Center that says "Opens a dialog", since it is not true anymore

[xovnsi]

Hey, I tested this change and the role was a "link", but maybe it's better to say it explicitly

[Fredx87]

Yeah, VoiceOver reads it as a link even if in the HTML there is role="". I am not sure about other screen readers

[jgorfine-zendesk]

Hey @xovnsi & @Fredx87, I'm a little confused about why having VoiceOver announce the link as a link is a bad thing. Isn't that the outcome we want, in resolving this ticket? 👀

I'm also confused because the screenshot in the PR description is showing that the HTML element being rendered is an <a>, which already has role="link" baked into it. We'd have to apply role="button" to the element explicitly, in order to change its role. Where/how is that happening? I'd imagine the change would need to happen at that level. 🤔

[xovnsi]

Hey @jgorfine-zendesk,
For some reason we have it set up in help center: https://github.com/zendesk/help_center/pull/32599
and setting role in Copenhagen Theme to "" will override the button role to the link role.
We can't change the role in help center, because some other themes may rely on the button role.

[jgorfine-zendesk]

Hi @xovnsi, thanks for the additional details. In that case, I think it'd be best if, like @Fredx87 said, we set the role to link explicitly.

Suggested change

	{{#link "sign_in" class="sign-in" role=""}}
	{{#link "sign_in" class="sign-in" role="link"}}