Skip to content

Commit 324c292

Browse files
kgogovkgogov
committed
test(ui5-li-custom): add arrow navigation test page
Add comprehensive test page for arrow key navigation between internal elements across list items. Includes 8 test examples covering basic navigation, mixed items, groups, boundary cases, selection modes, and nested lists.
1 parent 61804fa commit 324c292

File tree

1 file changed

+308
-0
lines changed

1 file changed

+308
-0
lines changed

‎packages/main/test/pages/ListItemCustomArrowNavigation.html‎

Lines changed: 308 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,308 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>List Item Custom Arrow Navigation Test</title>
8+
<script src="%VITE_BUNDLE_PATH%" type="module"></script>
9+
<style>
10+
html, body {
11+
margin: 0;
12+
padding: 0;
13+
overscroll-behavior: none;
14+
}
15+
16+
body {
17+
padding: 2rem;
18+
font-family: "72", "72full", Arial, sans-serif;
19+
}
20+
21+
.instructions {
22+
padding: 1rem;
23+
margin-bottom: 2rem;
24+
border: 1px solid #ccc;
25+
background: #f9f9f9;
26+
}
27+
28+
.flex-box {
29+
display: flex;
30+
gap: 0.75rem;
31+
align-items: center;
32+
}
33+
34+
.list-example {
35+
width: 30rem;
36+
margin-bottom: 2rem;
37+
}
38+
39+
.section {
40+
margin-bottom: 3rem;
41+
}
42+
</style>
43+
</head>
44+
45+
<body>
46+
<div class="instructions">
47+
<h2>List Item Custom Arrow Navigation Test</h2>
48+
<p><strong>Feature:</strong> Navigate between same-index focusable elements across list items.</p>
49+
50+
<p><strong>How to Test:</strong></p>
51+
<ol>
52+
<li>Use F7 to enter internal navigation mode (focus on first focusable element)</li>
53+
<li>Press <strong>Arrow Down</strong> → should move to the same element position in the next item</li>
54+
<li>Press <strong>Arrow Up</strong> → should move to the same element position in the previous item</li>
55+
<li>If target item has fewer elements, focuses the last available element at that position</li>
56+
<li>At boundaries (first/last item), arrow keys do nothing</li>
57+
</ol>
58+
59+
<p><strong>Expected Behavior:</strong></p>
60+
<ul>
61+
<li>✅ Arrow navigation works across custom list items with focusable content</li>
62+
<li>✅ Automatically skips standard list items (no focusable elements)</li>
63+
<li>✅ Works across group boundaries (navigates into/out of groups)</li>
64+
<li>✅ Maintains element index position across items</li>
65+
<li>✅ Does nothing at list boundaries (first item + Up, last item + Down)</li>
66+
<li>✅ Browser scroll works when navigation doesn't handle the key</li>
67+
</ul>
68+
</div>
69+
70+
<div class="section">
71+
<h3>Example 1: Basic Column Navigation</h3>
72+
<ui5-list class="list-example" header-text="Simple Custom Items">
73+
<ui5-li-custom>
74+
<div class="flex-box">
75+
<ui5-link>Link 1</ui5-link>
76+
<ui5-button>Button 1</ui5-button>
77+
<ui5-input placeholder="Input 1" style="width: 100px;"></ui5-input>
78+
</div>
79+
</ui5-li-custom>
80+
<ui5-li-custom>
81+
<div class="flex-box">
82+
<ui5-link>Link 2</ui5-link>
83+
<ui5-button>Button 2</ui5-button>
84+
<ui5-input placeholder="Input 2" style="width: 100px;"></ui5-input>
85+
</div>
86+
</ui5-li-custom>
87+
<ui5-li-custom>
88+
<div class="flex-box">
89+
<ui5-link>Link 3</ui5-link>
90+
<ui5-button>Button 3</ui5-button>
91+
<ui5-input placeholder="Input 3" style="width: 100px;"></ui5-input>
92+
</div>
93+
</ui5-li-custom>
94+
</ui5-list>
95+
<p><em>Test: Focus Link 1 → Arrow Down → should focus Link 2 (same column)</em></p>
96+
</div>
97+
98+
<div class="section">
99+
<h3>Example 2: Mixed Items (Skip Standard Items)</h3>
100+
<ui5-list class="list-example" header-text="Mixed Custom and Standard">
101+
<ui5-li-custom>
102+
<div class="flex-box">
103+
<ui5-link>Custom Link 1</ui5-link>
104+
<ui5-button>Custom Button 1</ui5-button>
105+
</div>
106+
</ui5-li-custom>
107+
<ui5-li>Standard Item 1 (no focusable content)</ui5-li>
108+
<ui5-li>Standard Item 2 (no focusable content)</ui5-li>
109+
<ui5-li-custom>
110+
<div class="flex-box">
111+
<ui5-link>Custom Link 2</ui5-link>
112+
<ui5-button>Custom Button 2</ui5-button>
113+
</div>
114+
</ui5-li-custom>
115+
<ui5-li-custom>
116+
<div class="flex-box">
117+
<ui5-link>Custom Link 3</ui5-link>
118+
<ui5-button>Custom Button 3</ui5-button>
119+
</div>
120+
</ui5-li-custom>
121+
</ui5-list>
122+
<p><em>Test: Focus Custom Link 1 → Arrow Down → should skip standard items and focus Custom Link 2</em></p>
123+
</div>
124+
125+
<div class="section">
126+
<h3>Example 3: Navigation Across Groups</h3>
127+
<ui5-list class="list-example" header-text="Items with Groups">
128+
<ui5-li-custom>
129+
<div class="flex-box">
130+
<ui5-link>Before Group</ui5-link>
131+
<ui5-button>Button</ui5-button>
132+
</div>
133+
</ui5-li-custom>
134+
<ui5-li-group header-text="Group 1">
135+
<ui5-li-custom>
136+
<div class="flex-box">
137+
<ui5-link>Group 1 Link 1</ui5-link>
138+
<ui5-button>Group 1 Button 1</ui5-button>
139+
</div>
140+
</ui5-li-custom>
141+
<ui5-li-custom>
142+
<div class="flex-box">
143+
<ui5-link>Group 1 Link 2</ui5-link>
144+
<ui5-button>Group 1 Button 2</ui5-button>
145+
</div>
146+
</ui5-li-custom>
147+
</ui5-li-group>
148+
<ui5-li-group header-text="Group 2">
149+
<ui5-li-custom>
150+
<div class="flex-box">
151+
<ui5-link>Group 2 Link 1</ui5-link>
152+
<ui5-button>Group 2 Button 1</ui5-button>
153+
</div>
154+
</ui5-li-custom>
155+
</ui5-li-group>
156+
<ui5-li-custom>
157+
<div class="flex-box">
158+
<ui5-link>After Group</ui5-link>
159+
<ui5-button>Button</ui5-button>
160+
</div>
161+
</ui5-li-custom>
162+
</ui5-list>
163+
<p><em>Test: Arrow navigation should work seamlessly across group boundaries</em></p>
164+
</div>
165+
166+
<div class="section">
167+
<h3>Example 4: Different Number of Elements</h3>
168+
<ui5-list class="list-example" header-text="Varying Element Counts">
169+
<ui5-li-custom>
170+
<div class="flex-box">
171+
<ui5-link>Link A</ui5-link>
172+
<ui5-button>Button A</ui5-button>
173+
<ui5-input placeholder="Input A" style="width: 80px;"></ui5-input>
174+
<ui5-button>Extra A</ui5-button>
175+
</div>
176+
</ui5-li-custom>
177+
<ui5-li-custom>
178+
<div class="flex-box">
179+
<ui5-link>Link B</ui5-link>
180+
<ui5-button>Button B</ui5-button>
181+
</div>
182+
</ui5-li-custom>
183+
<ui5-li-custom>
184+
<div class="flex-box">
185+
<ui5-link>Link C</ui5-link>
186+
<ui5-button>Button C</ui5-button>
187+
<ui5-input placeholder="Input C" style="width: 80px;"></ui5-input>
188+
</div>
189+
</ui5-li-custom>
190+
</ui5-list>
191+
<p><em>Test: Focus "Extra A" (4th element) → Arrow Down → should focus "Button B" (last available element)</em></p>
192+
</div>
193+
194+
<div class="section">
195+
<h3>Example 5: Boundary Conditions</h3>
196+
<ui5-list class="list-example" header-text="Edge Cases">
197+
<ui5-li-custom>
198+
<div class="flex-box">
199+
<ui5-link>First Item Link</ui5-link>
200+
<ui5-button>First Item Button</ui5-button>
201+
</div>
202+
</ui5-li-custom>
203+
<ui5-li-custom>
204+
<div class="flex-box">
205+
<ui5-link>Middle Item Link</ui5-link>
206+
<ui5-button>Middle Item Button</ui5-button>
207+
</div>
208+
</ui5-li-custom>
209+
<ui5-li-custom>
210+
<div class="flex-box">
211+
<ui5-link>Last Item Link</ui5-link>
212+
<ui5-button>Last Item Button</ui5-button>
213+
</div>
214+
</ui5-li-custom>
215+
</ui5-list>
216+
<p><em>Test: Focus "First Item Link" → Arrow Up → should do nothing (at top boundary)</em></p>
217+
<p><em>Test: Focus "Last Item Button" → Arrow Down → should do nothing (at bottom boundary)</em></p>
218+
</div>
219+
220+
<div class="section">
221+
<h3>Example 6: Complex Real-World Scenario</h3>
222+
<ui5-list class="list-example" header-text="Opportunity List">
223+
<ui5-li-custom>
224+
<div class="flex-box">
225+
<ui5-link>Opportunity 1</ui5-link>
226+
<ui5-label>Status: Open</ui5-label>
227+
<ui5-button>Edit</ui5-button>
228+
<ui5-button>Delete</ui5-button>
229+
</div>
230+
</ui5-li-custom>
231+
<ui5-li>Standard separator</ui5-li>
232+
<ui5-li-custom>
233+
<div class="flex-box">
234+
<ui5-link>Opportunity 2</ui5-link>
235+
<ui5-label>Status: Closed</ui5-label>
236+
<ui5-button>Edit</ui5-button>
237+
<ui5-button>Delete</ui5-button>
238+
</div>
239+
</ui5-li-custom>
240+
<ui5-li-group header-text="Archived">
241+
<ui5-li-custom>
242+
<div class="flex-box">
243+
<ui5-link>Opportunity 3</ui5-link>
244+
<ui5-label>Status: Archived</ui5-label>
245+
<ui5-button>Restore</ui5-button>
246+
</div>
247+
</ui5-li-custom>
248+
</ui5-li-group>
249+
</ui5-list>
250+
<p><em>Test: Focus "Edit" button in Opportunity 1 → Arrow Down → should skip standard item and focus "Edit" in Opportunity 2</em></p>
251+
</div>
252+
253+
<div class="section">
254+
<h3>Example 7: Selection Modes</h3>
255+
<div style="margin-bottom: 1rem;">
256+
<ui5-label for="selection-mode">Selection Mode:</ui5-label>
257+
<ui5-select id="selection-mode" style="margin-left: 0.5rem;">
258+
<ui5-option>None</ui5-option>
259+
<ui5-option>Single</ui5-option>
260+
<ui5-option>SingleStart</ui5-option>
261+
<ui5-option>SingleEnd</ui5-option>
262+
<ui5-option selected>Multiple</ui5-option>
263+
<ui5-option>Delete</ui5-option>
264+
</ui5-select>
265+
</div>
266+
<ui5-list id="selection-list" class="list-example" header-text="Items with Selection" selection-mode="Multiple">
267+
<ui5-li-custom>
268+
<div class="flex-box">
269+
<ui5-link>Product A</ui5-link>
270+
<ui5-label>Price: $100</ui5-label>
271+
<ui5-button>View</ui5-button>
272+
<ui5-button>Add to Cart</ui5-button>
273+
</div>
274+
</ui5-li-custom>
275+
<ui5-li-custom>
276+
<div class="flex-box">
277+
<ui5-link>Product B</ui5-link>
278+
<ui5-label>Price: $200</ui5-label>
279+
<ui5-button>View</ui5-button>
280+
<ui5-button>Add to Cart</ui5-button>
281+
</div>
282+
</ui5-li-custom>
283+
<ui5-li-custom>
284+
<div class="flex-box">
285+
<ui5-link>Product C</ui5-link>
286+
<ui5-label>Price: $150</ui5-label>
287+
<ui5-button>View</ui5-button>
288+
<ui5-button>Add to Cart</ui5-button>
289+
</div>
290+
</ui5-li-custom>
291+
</ui5-list>
292+
<p><em>Test: Arrow navigation should work regardless of selection mode</em></p>
293+
<p><em>Test: In Multiple mode, checkbox doesn't interfere with column navigation</em></p>
294+
<p><em>Test: In Delete mode, delete button doesn't interfere with navigation</em></p>
295+
</div>
296+
297+
<script>
298+
const selectionModeSelect = document.getElementById('selection-mode');
299+
const selectionList = document.getElementById('selection-list');
300+
301+
selectionModeSelect.addEventListener('change', function (e) {
302+
const selectedMode = e.detail.selectedOption.textContent;
303+
selectionList.setAttribute('selection-mode', selectedMode);
304+
});
305+
</script>
306+
</body>
307+
308+
</html>

0 commit comments

Comments
 (0)