johba/harb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Add aria-label attributes to landing buttons (#243)

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
openhands 2026-02-24 22:15:26 +00:00
parent 1372207134
commit 9a420ae77a
3 changed files with 8 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

4
landing/src/components/KButton.vue
View file

@ -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>

4
landing/src/components/KFooter.vue
View file

@ -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>

5
landing/src/components/WalletButton.vue
View file

@ -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 }}