feat: added initial toolbar keyboard navigation

Author: chittolinag

packages/super-editor/src/components/toolbar/ToolbarButton.vue

@@ -82,13 +82,11 @@ const caretIcon = computed(() => {
 </script>
 
 <template>
-  <div :class="['toolbar-item', attributes.className]" :style="getStyle">
-    <div
-      @click="handleClick"
-      class="toolbar-button"
+  <div :class="['toolbar-item', attributes.className]" :style="getStyle" @click="handleClick"
+    @keydown.enter.stop="handleClick" tabindex="0" role="button">
+    <div class="toolbar-button"
       :class="{ active, disabled, narrow: isNarrow, wide: isWide, 'has-inline-text-input': hasInlineTextInput }"
-      :data-item="`btn-${name || ''}`"
-    >
+      :data-item="`btn-${name || ''}`">
       <ToolbarButtonIcon v-if="icon" :color="iconColor" class="toolbar-icon" :icon="icon" :name="name">
       </ToolbarButtonIcon>
 
@@ -97,37 +95,14 @@ const caretIcon = computed(() => {
       </div>
 
       <span v-if="inlineTextInputVisible">
-        <input
-          v-if="name === 'fontSize'"
-          v-model="inlineTextInput"
-          @input="onFontSizeInput"
-          :placeholder="label"
-          @keydown.enter.prevent="handleInputSubmit"
-          type="text"
-          class="button-text-input"
-          :id="'inlineTextInput-' + name"
-          autoccomplete="off"
-          ref="inlineInput"
-        />
-        <input
-          v-else
-          v-model="inlineTextInput"
-          :placeholder="label"
-          @keydown.enter.prevent="handleInputSubmit"
-          type="text"
-          class="button-text-input"
-          :id="'inlineTextInput-' + name"
-          autoccomplete="off"
-          ref="inlineInput"
-        />
+        <input v-if="name === 'fontSize'" v-model="inlineTextInput" @input="onFontSizeInput" :placeholder="label"
+          @keydown.enter.prevent="handleInputSubmit" type="text" class="button-text-input"
+          :id="'inlineTextInput-' + name" autoccomplete="off" ref="inlineInput" />
+        <input v-else v-model="inlineTextInput" :placeholder="label" @keydown.enter.prevent="handleInputSubmit"
+          type="text" class="button-text-input" :id="'inlineTextInput-' + name" autoccomplete="off" ref="inlineInput" />
       </span>
 
-      <div 
-        v-if="hasCaret"
-        class="dropdown-caret"
-        v-html="caretIcon"
-        :style="{ opacity: disabled ? 0.6 : 1 }"
-        >
+      <div v-if="hasCaret" class="dropdown-caret" v-html="caretIcon" :style="{ opacity: disabled ? 0.6 : 1 }">
       </div>
 
     </div>