fix(menu): remove "tabindex=-1" from MenuOption and Indicators (#349)

See #329

Author: TotomInc

src/Indicators.vue

@@ -35,7 +35,6 @@ defineExpose({ containerRef, clearButtonRef, dropdownButtonRef });
       ref="clearButton"
       type="button"
       class="clear-button"
-      tabindex="-1"
       :disabled="isDisabled"
       @click.stop="emit('clear')"
     >
@@ -54,7 +53,6 @@ defineExpose({ containerRef, clearButtonRef, dropdownButtonRef });
       type="button"
       class="dropdown-icon"
       :class="{ active: isMenuOpen }"
-      tabindex="-1"
       :disabled="isDisabled"
       @click.stop="emit('toggle')"
     >
@@ -97,10 +95,14 @@ defineExpose({ containerRef, clearButtonRef, dropdownButtonRef });
   height: var(--vs-indicator-icon-size);
   color: var(--vs-indicator-icon-color);
   background: none;
-  outline: none;
   cursor: var(--vs-indicator-icon-cursor);
 }
 
+.clear-button:focus-visible {
+  border-radius: var(--vs-border-radius);
+  outline: var(--vs-outline-width) solid var(--vs-outline-color);
+}
+
 .dropdown-icon {
   appearance: none;
   display: inline-block;
@@ -116,6 +118,11 @@ defineExpose({ containerRef, clearButtonRef, dropdownButtonRef });
   transition: var(--vs-indicator-dropdown-icon-transition);
 }
 
+.dropdown-icon:focus-visible {
+  border-radius: var(--vs-border-radius);
+  outline: var(--vs-outline-width) solid var(--vs-outline-color);
+}
+
 .dropdown-icon.active {
   transform: rotate(180deg);
 }

src/MenuOption.vue

@@ -55,7 +55,6 @@ watch(
     ref="option"
     class="menu-option"
     :class="{ focused: isFocused, selected: isSelected, disabled: isDisabled }"
-    tabindex="-1"
     role="option"
     :aria-disabled="isDisabled"
     :aria-selected="isSelected"