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: 4 Major Patterns for Accessible Drag and Drop | by Jesse Hausler | Salesforce Designer | Medium
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.")
);