Accessible Sortable List
Accessible Sortable List
This component creates a widget "Accessible Sortable List". It creates a list of items that can be reordered with drag and drop or with keyboard.
It has been tested with a screen reader (VoiceOver) and Safari/Chrome on MacOs.
The pattern implemented for the component is coming from here: https://medium.com/salesforce-ux/4-major-patterns-for-accessible-drag-and-drop-1d43f64ebf09
SortableList<PersonRecord> personRecordSortableList = new SortableList<>(PersonRecord::id);
personRecordSortableList.setItems(SampleDataGenerator.getPersonRecordList());
personRecordSortableList.setItemLabelGenerator(PersonRecord::name);
add(personRecordSortableList);
This will create a list that can be reordered with drag and drop and also with a keyboard (navigates on the item then press Space to activate, Arrows to move and Space to validate or Escape to cancel).
The component requires a list of Beans (or Record) with 2 generators, a generator of Id (unique number) and String (that will be displayed as text).
You can listen for changes with the addReorderedListener
:
personBeanSortableList.addReorderedListener(event -> {
Notification.show("New order of the list " + event.getItems());
});
You can also translate all the messages for screen reader using the i18n object:
personBeanSortableList.setI18n(new SortableList.SortableListI18n()
.setOperation("Appuyer sur la barre Espace pour trier la liste")
.setLiveTextCancelled("${itemDescription}, tri annulé.")
.setLiveTextDropped("${itemDescription}, déposé. Position finale dans la liste: ${dropItemIndex} sur ${itemsLength}.")
.setTitle("Liste à trier")
.setLiveTextGrabbed("${itemDescription}, attrapé. Position finale dans la liste: ${dragItemIndex} sur ${itemsLength}. Appuyer sur les flèches Haut et Bas pour modifier la position, barre Espace pour déposer, Echap pour annuler.")
);
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
- Released
- 2024-02-09
- Maturity
- EXPERIMENTAL
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 24+
- Browser
- Browser Independent