Layout setup

For the layout, we use div tags. To be properly vocalized we have to add some ARIA attributes and roles.

The listbox role indicates the component is a list of items to the screen reader. The aria-multiselectable attribute indicates that it is a multiple-selection list. Each list item must have the option role.

In order to correctly vocalize each file, we add the aria-label attribute to each element of the list. Finally, for each file to be focusable, the tabindex="0" attribute is added.