Merge pull request 'fix: Add aria-label attributes to landing buttons (#243)' (#244) from fix/issue-243 into master
This commit is contained in:
commit
0f74cc8276
4 changed files with 9 additions and 6 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<button class="kraken-button" :class="{ 'kraken-button--outlined': props.outlined }">
|
||||
<button class="kraken-button" :class="{ 'kraken-button--outlined': props.outlined }" :aria-label="props.ariaLabel">
|
||||
<slot></slot>
|
||||
</button>
|
||||
</template>
|
||||
|
|
@ -7,12 +7,14 @@
|
|||
<script setup lang="ts">
|
||||
interface KButtonProps {
|
||||
outlined?: boolean;
|
||||
ariaLabel?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<KButtonProps>(),
|
||||
{
|
||||
outlined: false,
|
||||
ariaLabel: undefined,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<a :href="`https://basescan.org/address/${krkAddress}`" target="_blank" rel="noopener noreferrer">
|
||||
KRK Token: {{ shortAddress(krkAddress) }}
|
||||
</a>
|
||||
<button class="k-footer__copy-btn" @click="copyAddress(krkAddress, 'krk')" :title="copied === 'krk' ? 'Copied!' : 'Copy address'">
|
||||
<button class="k-footer__copy-btn" @click="copyAddress(krkAddress, 'krk')" :title="copied === 'krk' ? 'Copied!' : 'Copy address'" :aria-label="copied === 'krk' ? 'Copied!' : 'Copy KRK token address'">
|
||||
<svg v-if="copied !== 'krk'" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||||
<svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4ade80" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</button>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
<a :href="`https://basescan.org/address/${stakeAddress}`" target="_blank" rel="noopener noreferrer">
|
||||
Stake: {{ shortAddress(stakeAddress) }}
|
||||
</a>
|
||||
<button class="k-footer__copy-btn" @click="copyAddress(stakeAddress, 'stake')" :title="copied === 'stake' ? 'Copied!' : 'Copy address'">
|
||||
<button class="k-footer__copy-btn" @click="copyAddress(stakeAddress, 'stake')" :title="copied === 'stake' ? 'Copied!' : 'Copy address'" :aria-label="copied === 'stake' ? 'Copied!' : 'Copy Stake contract address'">
|
||||
<svg v-if="copied !== 'stake'" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||||
<svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4ade80" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -20,12 +20,12 @@ function handleConnect(connector: (typeof connectors)[number]) {
|
|||
<template>
|
||||
<div class="wallet-button">
|
||||
<template v-if="isConnected && address">
|
||||
<button class="wallet-button__connected" @click="disconnect()">
|
||||
<button class="wallet-button__connected" aria-label="Disconnect wallet" @click="disconnect()">
|
||||
{{ shortAddress(address) }}
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="wallet-button__connect" @click="showConnectors = !showConnectors">
|
||||
<button class="wallet-button__connect" aria-label="Connect wallet" @click="showConnectors = !showConnectors">
|
||||
Connect Wallet
|
||||
</button>
|
||||
<div v-if="showConnectors" class="wallet-button__dropdown">
|
||||
|
|
@ -33,6 +33,7 @@ function handleConnect(connector: (typeof connectors)[number]) {
|
|||
v-for="connector in connectors"
|
||||
:key="connector.uid"
|
||||
class="wallet-button__option"
|
||||
:aria-label="`Connect with ${connector.name}`"
|
||||
@click="handleConnect(connector)"
|
||||
>
|
||||
{{ connector.name }}
|
||||
|
|
|
|||
2
package-lock.json
generated
2
package-lock.json
generated
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "harb-worktree-232",
|
||||
"name": "harb-worktree-243",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue