refactor: update type annotations in tests and touch handlers for better type safety

style: improve focus styles in accessibility and focused items SCSS

Author: prabhuignoto

src/components/__tests__/Menu.test.ts

@@ -365,7 +365,7 @@ describe('Menu.vue', () => {
       const wrapper = mount(Menu, {
         props: {
           ...defaultProps,
-          data: null as any,
+          data: null as unknown,
         },
       });
 
@@ -384,7 +384,7 @@ describe('Menu.vue', () => {
       });
 
       // Trigger error by setting invalid state
-      wrapper.vm.menuItems = null as any;
+      wrapper.vm.menuItems = null as unknown;
 
       const menuWrapper = wrapper.find('.menu-wrapper');
       await menuWrapper.trigger('keyup', { key: 'ArrowDown' });
@@ -419,7 +419,7 @@ describe('Menu.vue', () => {
       });
 
       const menuItems = wrapper.findAll('.menu-list-item');
-      menuItems.forEach((item: any) => {
+      menuItems.forEach((item: ReturnType<typeof wrapper.find>) => {
         if (!item.classes().includes('divider')) {
           expect(item.classes()).toContain('flip');
         }

src/components/__tests__/MenuCloseAnimation.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import FloatMenu from '../index.vue';
-import { nextTick } from 'vue';
 
 describe('Menu Close Animation', () => {
   let wrapper;

src/components/index.vue

@@ -670,7 +670,7 @@ export default defineComponent({
   }
 
   /* Only apply focus style on non-selected/non-highlighted items */
-  &:not(.selected):not(.highlight):focus-visible {
+  &:not(.selected, .highlight):focus-visible {
     outline: 2px solid #007bff;
   }
 }

src/components/styles/accessibility.scss

@@ -36,7 +36,7 @@
   }
 
   /* Only show outline when using keyboard navigation and not selected */
-  &:not(.selected):not(.highlight) {
+  &:not(.selected, .highlight) {
     outline: 2px solid #007bff;
     outline-offset: -2px;
     position: relative;

src/components/styles/focused-items.scss

@@ -19,32 +19,32 @@ li.menu-list-item[role="menuitem"]:focus-visible {
   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 {
+  /* Ensure proper order of selectors to avoid specificity issues */
+  &:not(.selected, .highlight):focus-visible {
     outline: 2px solid #007bff;
     outline-offset: -2px;
   }
 }
 
+/* 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;
+}
+
 /* Completely eliminate all double borders */
 .menu-wrapper [role="menuitem"].selected,
 .menu-wrapper [role="menuitem"].highlight {

touchHandlers.ts

@@ -12,35 +12,35 @@ interface SwipeData {
 // Mock implementations - replace with actual imports/implementations
 const menuActive = ref(false);
 
-const handleTouchStart = (event: TouchEvent, callback: (touchEvent: TouchEventData) => void) => {
+const handleTouchStart = (_event: TouchEvent, _callback: (touchEvent: TouchEventData) => void) => {
   // Implementation needed
 };
 
-const handleTouchMove = (event: TouchEvent) => {
+const handleTouchMove = (_event: TouchEvent) => {
   // Implementation needed
 };
 
-const handleTouchEnd = (event: TouchEvent, callback: (touchEvent: TouchEventData) => void) => {
+const handleTouchEnd = (_event: TouchEvent, _callback: (touchEvent: TouchEventData) => void) => {
   // Implementation needed
 };
 
-const handleDragStart = (event: TouchEvent) => {
+const handleDragStart = (_event: TouchEvent) => {
   // Implementation needed
 };
 
 const handleDragMove = () => {
   // Implementation needed
 };
 
-const handleDragEnd = (event: TouchEvent) => {
+const handleDragEnd = (_event: TouchEvent) => {
   // Implementation needed
 };
 
-const triggerHapticFeedback = (intensity: 'light' | 'medium' | 'heavy') => {
+const triggerHapticFeedback = (_intensity: 'light' | 'medium' | 'heavy') => {
   // Implementation needed
 };
 
-const toggleMenu = (event: TouchEvent) => {
+const toggleMenu = (_event: TouchEvent) => {
   // Implementation needed
 };
 
@@ -54,7 +54,7 @@ const handleMenuClose = () => {
 };
 
 // Enhanced touch handlers
-const handleEnhancedTouchStart = (event: TouchEvent) => {
+export const handleEnhancedTouchStart = (event: TouchEvent) => {
   handleTouchStart(event, (touchEvent: TouchEventData) => {
     if (touchEvent.type === 'longpress') {
       // Long press opens menu and provides haptic feedback
@@ -69,12 +69,12 @@ const handleEnhancedTouchStart = (event: TouchEvent) => {
   handleDragStart(event);
 };
 
-const handleEnhancedTouchMove = (event: TouchEvent) => {
+export const handleEnhancedTouchMove = (event: TouchEvent) => {
   handleTouchMove(event);
   handleDragMove();
 };
 
-const handleEnhancedTouchEnd = (event: TouchEvent) => {
+export const handleEnhancedTouchEnd = (event: TouchEvent) => {
   handleTouchEnd(event, (touchEvent: TouchEventData) => {
     if (touchEvent.type === 'tap') {
       // Provide light haptic feedback for taps