Refactor anchor tags that behave as buttons

[rak-phillip]

There are several links that are displayed as buttons used throughout Rancher Dashboard. These links require special care to ensure that they behave in a way that a user would expect a button to behave. Requiring developers to take these edge cases into consideration opens the door to inconsistent behavior, as individual implementations can differ.

Notes

The following code snippets are good candidates for review. Both anchor tags and router-link can display as a button:

• dashboard/shell/pages/home.vue

  Lines 535 to 542 in e83d18d

  	<a
  	class="hand mr-20"
  	tabindex="0"
  	:aria-label="t('landing.landingPrefs.userPrefs')"
  	@click.prevent.stop="showUserPrefs"
  	@keyup.prevent.stop.enter="showUserPrefs"
  	@keyup.prevent.stop.space="showUserPrefs"
  	><span v-clean-html="t('landing.landingPrefs.userPrefs')" /></a>

• dashboard/shell/pages/home.vue

  Lines 587 to 619 in e83d18d

  	<router-link
  	v-if="!!provClusterSchema"
  	:to="manageLocation"
  	class="btn btn-sm role-secondary"
  	data-testid="cluster-management-manage-button"
  	role="button"
  	:aria-label="t('cluster.manageAction')"
  	@keyup.space="$router.push(manageLocation)"
  	>
  	{{ t('cluster.manageAction') }}
  	</router-link>
  	<router-link
  	v-if="canCreateCluster"
  	:to="importLocation"
  	class="btn btn-sm role-primary"
  	data-testid="cluster-create-import-button"
  	role="button"
  	:aria-label="t('cluster.importAction')"
  	@keyup.space="$router.push(importLocation)"
  	>
  	{{ t('cluster.importAction') }}
  	</router-link>
  	<router-link
  	v-if="canCreateCluster"
  	:to="createLocation"
  	class="btn btn-sm role-primary"
  	data-testid="cluster-create-button"
  	role="button"
  	:aria-label="t('generic.create')"
  	@keyup.space="$router.push(createLocation)"
  	>
  	{{ t('generic.create') }}
  	</router-link>

• dashboard/shell/pages/about.vue

  Lines 107 to 116 in e83d18d

  	<router-link
  	:to="{ name: 'diagnostic' }"
  	class="btn role-primary"
  	data-testid="about__diagnostics_button"
  	role="button"
  	:aria-label="t('about.diagnostic.title')"
  	@keyup.space="$router.push({ name: 'diagnostic' })"
  	>
  	{{ t('about.diagnostic.title') }}
  	</router-link>

[richard-cox]

We should look at each case, and maybe work with UX on this. Thinking specifically about buttons that only navigate the user to a new area (and not execute an action and then move the user). In those places right click --> open in new tab should continue to work.