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 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.") ); ```