fix: make BackButton and LinkedNotes keyboard accessible
Replace <a> (no href) with <button> so both elements receive tab focus. BackButton gets text-base-content to preserve icon color; LinkedNotes uses btn class="link" to keep the inline text-link appearance. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -24,7 +24,7 @@ const goBack = () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<a class="btn btn-sm back-button" @click="goBack">
|
<button class="btn btn-sm back-button text-base-content" @click="goBack">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
class="icon icon-tabler icon-tabler-arrow-narrow-left"
|
class="icon icon-tabler icon-tabler-arrow-narrow-left"
|
||||||
@@ -41,5 +41,5 @@ const goBack = () => {
|
|||||||
<line x1="5" y1="12" x2="9" y2="16" />
|
<line x1="5" y1="12" x2="9" y2="16" />
|
||||||
<line x1="5" y1="12" x2="9" y2="8" />
|
<line x1="5" y1="12" x2="9" y2="8" />
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -24,9 +24,9 @@ const emitNote = (sha: string) => {
|
|||||||
<h5 class="subtitle is-5">🔗</h5>
|
<h5 class="subtitle is-5">🔗</h5>
|
||||||
<ul class="links">
|
<ul class="links">
|
||||||
<li v-for="link in backlink?.links" :key="link.sha">
|
<li v-for="link in backlink?.links" :key="link.sha">
|
||||||
<a @click.prevent="emitNote(link.sha)">
|
<button class="link" @click="emitNote(link.sha)">
|
||||||
{{ link.title }}
|
{{ link.title }}
|
||||||
</a>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user