fix: Remove focus within from buttons and fix keyboard navigation (#867)

* fix: Keyboard navigation for buttons * fix: Input outline * fix: Remove focus within from buttons * fix: Button keyboard focus * fix: Add buttons to Treasury page
snapshot-labs · Feb 5, 2024 · 347d2ef · 347d2ef
1 parent c1aa225
commit 347d2ef
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 22 deletions.
diff --git a/src/components/Block/SpaceFormNetwork.vue b/src/components/Block/SpaceFormNetwork.vue
@@ -19,16 +19,17 @@ const availableNetworks = enabledNetworks
   <div class="mb-2">
     <h3>Space network</h3>
     <div class="grid grid-cols-auto gap-3 pt-4 mb-3">
-      <div
+      <button
         v-for="network in availableNetworks"
         :key="network.id"
+        type="button"
         :class="{ 'border-skin-link': network.id === model }"
         class="flex items-center rounded-lg border px-4 py-3 text-skin-link cursor-pointer"
         @click="model = network.id"
       >
         <img :src="getUrl(network.avatar) ?? undefined" class="w-[32px] h-[32px] mr-3 rounded-lg" />
         {{ network.name }}
-      </div>
+      </button>
     </div>
   </div>
 </template>
diff --git a/src/components/Ui/Button.vue b/src/components/Ui/Button.vue
@@ -20,7 +20,7 @@ withDefaults(
     :type="type"
     :disabled="disabled || loading"
     :class="primary && 'primary'"
-    class="rounded-full leading-[100%] border button px-[20px] h-[46px] outline-0 text-skin-link focus-within:border-skin-link bg-skin-bg"
+    class="rounded-full leading-[100%] border button px-[20px] h-[46px] text-skin-link bg-skin-bg"
   >
     <UiLoading v-if="loading" :inverse="primary" />
     <slot v-else />

diff --git a/src/style.scss b/src/style.scss
@@ -95,10 +95,6 @@ p {
   @apply text-lg pb-2;
 }
 
-* {
-  outline: none !important;
-}
-
 h1,
 h2,
 h3,
@@ -116,6 +112,10 @@ a,
   }
 }
 
+input {
+  @apply outline-none;
+}
+
 .choice-bg {
   &._1 {
     @apply bg-choice-for;
@@ -195,7 +195,7 @@ a,
 // Shot UI kit
 
 .s-input {
-  @apply text-skin-heading border border-skin-border block rounded-[24px] py-2 px-3 w-full bg-transparent mb-3;
+  @apply text-skin-heading border border-skin-border block rounded-[24px] py-2 px-3 w-full bg-transparent mb-3 focus:outline-none;
 }
 
 .s-label {

diff --git a/src/views/Editor.vue b/src/views/Editor.vue
@@ -294,18 +294,12 @@ export default defineComponent({
         :error="formErrors.title"
       />
       <div class="flex space-x-3">
-        <Link
-          :is-active="!previewEnabled"
-          text="Write"
-          class="border-transparent"
-          @click="previewEnabled = false"
-        />
-        <Link
-          :is-active="previewEnabled"
-          text="Preview"
-          class="border-transparent"
-          @click="previewEnabled = true"
-        />
+        <button type="button" @click="previewEnabled = false">
+          <Link :is-active="!previewEnabled" text="Write" class="border-transparent" />
+        </button>
+        <button type="button" @click="previewEnabled = true">
+          <Link :is-active="previewEnabled" text="Preview" class="border-transparent" />
+        </button>
       </div>
       <Markdown
         v-if="previewEnabled"

diff --git a/src/views/Space/Treasury.vue b/src/views/Space/Treasury.vue
@@ -162,8 +162,12 @@ watchEffect(() => setTitle(`Treasury - ${props.space.name}`));
       </div>
       <div>
         <div class="flex pl-4 border-b space-x-3">
-          <Link :is-active="page === 'tokens'" text="Tokens" @click="page = 'tokens'" />
-          <Link :is-active="page === 'nfts'" text="NFTs" @click="page = 'nfts'" />
+          <button type="button" @click="page = 'tokens'">
+            <Link :is-active="page === 'tokens'" text="Tokens" />
+          </button>
+          <button type="button" @click="page = 'nfts'">
+            <Link :is-active="page === 'nfts'" text="NFTs" />
+          </button>
         </div>
         <div v-if="page === 'tokens'">
           <UiLoading v-if="loading && !loaded" class="px-4 py-3 block" />