Dynamic Content Page
This page demonstrates a comprehensive set of dynamic content scenarios for robust automation and accessibility testing.
1. Dynamic Add/Remove List
Add/Remove Items
2. Live Update List
Live Updating List
- Live item 1
(Shows last 10 updates, auto-appends every 1.5s)
3. Infinite Scroll List
Infinite Scroll List
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
- Item 9
- Item 10
4. Lazy Loaded Section
Lazy Loaded Section
5. Editable List
Editable List
- Editable item 1
- Editable item 2
6. Filterable List
Filterable List (Real-time)
- Filterable item 1
- Filterable item 2
- Filterable item 3
- Filterable item 4
- Filterable item 5
- Filterable item 6
- Filterable item 7
- Filterable item 8
- Filterable item 9
- Filterable item 10
- Filterable item 11
- Filterable item 12
- Filterable item 13
- Filterable item 14
- Filterable item 15
- Filterable item 16
- Filterable item 17
- Filterable item 18
- Filterable item 19
- Filterable item 20
7. Aria Live Region Demo
ARIA Live Region (Accessibility)
No live message yet.
(Screen readers will announce updates here.)
8. Drag And Drop Reorder List
Drag-and-Drop Reorder List
- Reorderable item 1
- Reorderable item 2
- Reorderable item 3
- Reorderable item 4
- Reorderable item 5
(Drag items to change their order. Keyboard focusable for accessibility.)
9. Optimistic Update List
Optimistic Update List (with Error Rollback)
- Optimistic item 1
- Optimistic item 2
(Adds immediately, rolls back if API fails. Type 'fail' to test error.)
10. Realtime Collaboration Demo
Realtime Collaboration Demo (Simulated)
- [Alice] Hello!
(Simulates multiple users sending messages. Your name: Carol)
11. Undo/Redo List
Undo/Redo List
- Undo/Redo item 1
- Undo/Redo item 2
(Supports undo/redo for add/remove actions.)
12. Animated List (CSS Transitions)
Animated List (CSS Transitions)
- Animated item 1
- Animated item 2
(List items animate in/out on add/remove.)