feat: Enhance focus and selection styles to improve accessibility and eliminate double indicators

Author: prabhuignoto

src/components/Menu.scss

@@ -213,6 +213,9 @@ $submenu-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     background-color: var(--hover-background);
     color: var(--text-selected-color);
     box-shadow: $hover-shadow;
+    /* Enhanced selection styling that works better with focus states */
+    position: relative;
+    font-weight: 500;
 
     .menu-item-icon {
       opacity: 1;

src/components/Menu.vue

@@ -247,6 +247,22 @@ export default defineComponent({
           setActiveIndex(index);
           selectMenuItem(name, id, subMenu, false, props.onSelection);
 
+          // Direct style manipulation to remove any focus borders
+          const target = event.currentTarget as HTMLElement;
+          if (target) {
+            // Forcibly remove any focus indicators
+            target.style.outline = 'none';
+            target.style.border = 'none';
+
+            // Apply a setTimeout to ensure this persists after any CSS transitions
+            setTimeout(() => {
+              if (target && target.classList.contains('selected')) {
+                target.style.outline = 'none';
+                target.style.border = 'none';
+              }
+            }, 10);
+          }
+
           // Announce selection for screen readers
           if (!subMenu && name) {
             // Create announcement for screen reader
@@ -294,8 +310,8 @@ export default defineComponent({
             const nextIndex = isDivider
               ? actvIndex - 2
               : actvIndex - 1 < 0
-                ? len - 1
-                : actvIndex - 1;
+              ? len - 1
+              : actvIndex - 1;
             setActiveIndex(nextIndex);
             break;
 
@@ -543,4 +559,23 @@ export default defineComponent({
 <style lang="scss" scoped>
 @use './Menu';
 @use './styles/accessibility';
+@use './styles/focused-items';
+
+/* Direct fix for the Edit menu item and other focused items */
+.menu-list-item {
+  &.selected,
+  &.highlight {
+    /* Remove all focus indicators when the item is already visually highlighted */
+    outline: none !important;
+    border: none !important;
+    box-shadow: none !important;
+
+    &:focus,
+    &:focus-visible {
+      outline: none !important;
+      border: none !important;
+      box-shadow: none !important;
+    }
+  }
+}
 </style>

src/components/index.vue

@@ -9,7 +9,6 @@
     @touchstart="handleEnhancedTouchStart"
     @touchend="handleEnhancedTouchEnd"
     @touchmove="handleEnhancedTouchMove"
-    @click="toggleMenu"
   >
     <div
       ref="menuHead"
@@ -20,6 +19,7 @@
       aria-haspopup="menu"
       :aria-expanded="menuActive"
       aria-label="Menu"
+      @click="toggleMenu"
       @keydown="handleKeyboardMenuActivation"
     >
       <span class="menu-head-icon">
@@ -288,7 +288,7 @@ export default defineComponent({
     });
 
     // open/close the menu
-    const toggleMenu = (event: MouseEvent | KeyboardEvent) => {
+    const toggleMenu = (event: MouseEvent | KeyboardEvent | TouchEvent) => {
       measurePerformance('toggleMenu', () => {
         markAsUsed('menuToggle');
 
@@ -521,11 +521,9 @@ export default defineComponent({
     const handleEnhancedTouchStart = (event: TouchEvent) => {
       handleTouchStart(event, (touchEvent) => {
         if (touchEvent.type === 'longpress') {
-          // Long press opens menu and provides haptic feedback
+          // Long press activates the menu (same as click/tap)
           triggerHapticFeedback('medium');
-          if (!menuActive.value) {
-            toggleMenu(event as any);
-          }
+          toggleMenu(event);
         }
       });
 
@@ -541,8 +539,9 @@ export default defineComponent({
     const handleEnhancedTouchEnd = (event: TouchEvent) => {
       handleTouchEnd(event, (touchEvent) => {
         if (touchEvent.type === 'tap') {
-          // Provide light haptic feedback for taps
+          // Tap activates the menu (same as click)
           triggerHapticFeedback('light');
+          toggleMenu(event);
         } else if (touchEvent.type === 'swipe') {
           // Handle swipe gestures
           const swipe = getSwipeDirection();
@@ -655,4 +654,24 @@ export default defineComponent({
 <style lang="scss">
 @use './index';
 @use './styles/accessibility';
+
+/* Fix for double focus indicators */
+.menu-list-item {
+  &.selected,
+  &.highlight {
+    outline: none !important;
+    border: none !important;
+
+    &:focus,
+    &:focus-visible {
+      outline: none !important;
+      border: none !important;
+    }
+  }
+
+  /* Only apply focus style on non-selected/non-highlighted items */
+  &:not(.selected):not(.highlight):focus-visible {
+    outline: 2px solid #007bff;
+  }
+}
 </style>

src/components/styles/accessibility.scss

@@ -21,19 +21,27 @@
   border-radius: 50%;
 }
 
-/* Menu list items focus indicator */
-.menu-list-item:focus-visible {
-  outline: 2px solid #007bff;
-  outline-offset: 2px;
-  border-radius: 4px;
-}
-
-/* General menu item focus (fallback and specific targeting) */
+/* General menu item focus - the primary focus indicator for menu items */
 [role='menuitem']:focus-visible {
-  outline: 2px solid #007bff !important;
-  outline-offset: -2px !important;
-  position: relative;
-  z-index: 1;
+  /* Hide the outline when the menu item is selected or highlighted */
+  &.selected, &.highlight {
+    outline: none !important;
+    box-shadow: none !important;
+    border-color: transparent !important;
+  }
+  
+  /* Special case for selected submenu items to avoid double indicators */
+  &.sub-menu.selected .menu-item-wrapper {
+    background-color: var(--hover-background);
+  }
+  
+  /* Only show outline when using keyboard navigation and not selected */
+  &:not(.selected):not(.highlight) {
+    outline: 2px solid #007bff;
+    outline-offset: -2px;
+    position: relative;
+    z-index: 1;
+  }
 }
 
 /* Hide outline for mouse users (focus without focus-visible) */

src/components/styles/focused-items.scss

@@ -0,0 +1,53 @@
+/* Enhanced focus and selection styles to avoid duplicate indicators */
+
+/* When the item is focused via keyboard and also selected, prioritize selection styling */
+.menu-list-item[role='menuitem']:focus-visible.selected {
+  outline: none !important;
+  
+  .menu-item-wrapper {
+    /* Slightly enhance the background to indicate focus while selected */
+    background-color: var(--hover-background);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  }
+}
+
+/* Fix for the Edit button in the image - which has both highlight and possibly focus visible */
+.menu-list-item.highlight:focus-visible,
+.menu-list-item:focus-visible,
+li.menu-list-item[role="menuitem"]:focus-visible {
+  outline: none !important;
+  border-color: transparent !important;
+}
+
+/* Ensure no borders on Edit button which has the specific highlight */
+.menu-list-item:has(.name:contains("Edit")):focus-visible {
+  outline: none !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* Direct CSS override to remove the blue border completely */
+.menu-list-item {
+  &:focus {
+    outline: none !important;
+    border-color: transparent !important;
+  }
+  
+  &:focus-visible {
+    outline: none !important;
+    border-color: transparent !important;
+  }
+  
+  /* Keep the focus style only for keyboard navigation on non-highlighted items */
+  &:not(.selected):not(.highlight):focus-visible {
+    outline: 2px solid #007bff;
+    outline-offset: -2px;
+  }
+}
+
+/* Completely eliminate all double borders */
+.menu-wrapper [role="menuitem"].selected,
+.menu-wrapper [role="menuitem"].highlight {
+  border: none !important;
+  outline: none !important;
+}