@@ -62,4 +62,56 @@ describe('AuthenticatedUserDropdown', () => {
62
62
expect ( screen . getByText ( 'Order History' ) ) . toHaveAttribute ( 'href' , configMock . ORDER_HISTORY_URL ) ;
63
63
expect ( screen . getByText ( 'Sign Out' ) ) . toHaveAttribute ( 'href' , configMock . LOGOUT_URL ) ;
64
64
} ) ;
65
+
66
+ it ( 'loops focus from last to first and vice versa with Tab and Shift+Tab' , async ( ) => {
67
+ renderComponent ( ) ;
68
+
69
+ const toggleButton = screen . getByRole ( 'button' , { name : 'User Options' } ) ;
70
+ await fireEvent . click ( toggleButton ) ;
71
+
72
+ const menuItems = await screen . findAllByRole ( 'menuitem' ) ;
73
+ const firstItem = menuItems [ 0 ] ;
74
+ const lastItem = menuItems [ menuItems . length - 1 ] ;
75
+
76
+ // Loop forward from last to first
77
+ lastItem . focus ( ) ;
78
+ expect ( lastItem ) . toHaveFocus ( ) ;
79
+
80
+ fireEvent . keyDown ( lastItem , { key : 'Tab' } ) ;
81
+ expect ( firstItem ) . toHaveFocus ( ) ;
82
+
83
+ // Loop backward from first to last
84
+ firstItem . focus ( ) ;
85
+ expect ( firstItem ) . toHaveFocus ( ) ;
86
+
87
+ fireEvent . keyDown ( firstItem , { key : 'Tab' , shiftKey : true } ) ;
88
+ expect ( lastItem ) . toHaveFocus ( ) ;
89
+ } ) ;
90
+
91
+ it ( 'focuses next link when Tab is pressed on middle item' , async ( ) => {
92
+ renderComponent ( ) ;
93
+
94
+ const toggleButton = screen . getByRole ( 'button' , { name : 'User Options' } ) ;
95
+ await fireEvent . click ( toggleButton ) ;
96
+
97
+ const menuItems = await screen . findAllByRole ( 'menuitem' ) ;
98
+ const secondItem = menuItems [ 1 ] ;
99
+ const thirdItem = menuItems [ 2 ] ;
100
+
101
+ secondItem . focus ( ) ;
102
+ expect ( secondItem ) . toHaveFocus ( ) ;
103
+
104
+ Object . defineProperty ( secondItem , 'nextElementSibling' , {
105
+ value : thirdItem ,
106
+ configurable : true ,
107
+ } ) ;
108
+ Object . defineProperty ( thirdItem , 'tagName' , {
109
+ value : 'A' ,
110
+ configurable : true ,
111
+ } ) ;
112
+
113
+ fireEvent . keyDown ( secondItem , { key : 'Tab' } ) ;
114
+
115
+ expect ( thirdItem ) . toHaveFocus ( ) ;
116
+ } ) ;
65
117
} ) ;
0 commit comments