Room list: add drag and drop of sections to reorder them (#33606)
* feat(rls): centralize room-list section ordering via getOrderedSections Introduce a single source of truth for the ordered list of section tags (defaults + custom) in section.ts. RoomListStoreV3 no longer hard-codes the default tag order — it asks section.ts. * feat(vm): add section reorder logic to RoomListStoreV3 and view model * refactor(sc): extract RoomListSectionHeaderContent from RoomListSectionHeaderView * feat(sc): add drag-and-drop reordering for room-list sections * test(sc): update existing tests * test: add new tests * test(sc): add snapshot test for overlay * test(e2e): add playright test for dnd of sections * feat: tweak opacity * fix: section detection when dragged * feat: use relative position in section order * chore: move style to room list section header view * test: add e2e test for moving section before another * feat: make favourite and low priority no draggable * test: remove deprecated e2e test * fix: type correctly dnd provider and hooks * fix: use String instead of casting to string * fix: wrong a11y attributes on section header * test: fix keyboard navigation e2e tests * feat: use custom a11y announcement for dnd * fix: add aria-hidden to the overlay * chore: remove duplicated code in a11Y announcement * fix: increase keyboard drag offset * fix: tests * fix: virtuoso computed item key * fix: aria-expanded double annoncement why dragging * fix: re-add screen reader instructions * chore: remove unused import * fix: reduce keyboard drag offset * fix: improve text readback on unread section * feat: use a custom a11y plugin instead of buitin a11y plugin * chore: formatting * test: fix incorrect tests * chore: use randomUUID * fix: try to make test working * fix: put back mock * fix: circular import * Revert "fix: circular import" This reverts commit 6c69313ade9ed2ab17a4622c692b435fbdb94ad2. * chore: add @dnd-kit/abstract to optimizeDeps.include * test: fix e2e tests * fix: disable interaction with section when dragging * fix: be more explicit if the section will be dropped before or after * fix: add info that space is dropping too * fix: scroll to dropped section * test: fix virtualized room list test * chore: update lang * chore: fix dead code analyze * test: add provider section story * fix: lang * fix: again lang... * fix: improve voice over on chrome * test: upate snapshot * fix: add readback when a section is over a non droppable element
This commit is contained in:
@@ -413,8 +413,16 @@ export function useVirtualizedList<Item, Context>(
|
||||
[handleRef],
|
||||
);
|
||||
|
||||
// Key items by id, not position, so react-virtuoso preserves (moves) the existing DOM
|
||||
// node when an item's absolute index shifts — e.g. sections collapsing on drag start removes
|
||||
// the rooms above a header, shifting its index. Without this, Virtuoso's default key is the
|
||||
// index, so the wrapper (and the focused header inside it) remounts, the roving-tabindex effect
|
||||
// refocuses the fresh node, and screen readers re-announce the header mid-drag.
|
||||
const computeItemKey = useCallback((_index: number, item: Item): string => getItemKey(item), [getItemKey]);
|
||||
|
||||
return {
|
||||
...virtuosoProps,
|
||||
computeItemKey,
|
||||
ref: setRef,
|
||||
scrollerRef,
|
||||
onKeyDown: keyDownCallback,
|
||||
|
||||
Reference in New Issue
Block a user