Skip to content

Commit cdaa85b

Browse files
authored
fix(ui5-li): implement edit mode for keyboard navigation in list items (#13411)
Implements an edit mode for list items following the SAP Fiori Keyboard Interaction spec (Intentional Edit Pattern, p86-87): - **Navigation mode** (default): Tab/Shift+Tab forwards out of the list. Arrow keys navigate between items. - **Edit mode** (toggled by F2 or F7): Tab flows through inner focusable elements within an item, then continues to the next item's elements, and exits the list after the last item. Shift+Tab flows backward symmetrically. Arrow Up/Down transfers focus to the same-index element in adjacent items. The delete button in Delete selection mode is now keyboard accessible — reachable via edit mode Tab flow without requiring the Delete key shortcut. Fixes #13220
1 parent a8daa53 commit cdaa85b

7 files changed

Lines changed: 1289 additions & 103 deletions

File tree

packages/fiori/src/UploadCollectionItem.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,7 @@ class UploadCollectionItem extends ListItem {
237237
async onDetailClick() {
238238
super.onDetailClick();
239239
this._editing = true;
240+
this._editMode = true;
240241

241242
await this._initInputField();
242243
}
@@ -300,6 +301,7 @@ class UploadCollectionItem extends ListItem {
300301
this.fireDecoratorEvent("rename");
301302

302303
this._editing = false;
304+
this._editMode = false;
303305
this._focus();
304306
}
305307

@@ -311,6 +313,7 @@ class UploadCollectionItem extends ListItem {
311313

312314
async _onRenameCancel(e: KeyboardEvent | UI5CustomEvent<Button, "click">) {
313315
this._editing = false;
316+
this._editMode = false;
314317

315318
if (isEscape(e as KeyboardEvent)) {
316319
await renderFinished();
@@ -326,6 +329,31 @@ class UploadCollectionItem extends ListItem {
326329
}
327330
}
328331

332+
_handleTabNext(e: KeyboardEvent) {
333+
if (this._editMode) {
334+
return super._handleTabNext(e);
335+
}
336+
337+
if (this.shouldForwardTabAfter()) {
338+
if (!this.fireDecoratorEvent("forward-after")) {
339+
e.preventDefault();
340+
}
341+
}
342+
}
343+
344+
_handleTabPrevious(e: KeyboardEvent) {
345+
if (this._editMode) {
346+
return super._handleTabPrevious(e);
347+
}
348+
349+
const target = e.target as HTMLElement;
350+
if (this.shouldForwardTabBefore(target)) {
351+
if (!this.fireDecoratorEvent("forward-before")) {
352+
e.preventDefault();
353+
}
354+
}
355+
}
356+
329357
_focus() {
330358
this.fireDecoratorEvent("focus-requested");
331359
}

0 commit comments

Comments
 (0)