← Back

Accessible Sortable List

Author

Rating

Popularity

<100

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

Compatibility

(Loading compatibility data...)

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

Accessible Sortable List - Vaadin Add-on Directory

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

Directory