File Explorer

  • Component

Introduction

The file explorer is a component available on all operating systems. When it is present in a web page, it should behave as expected by the user.

Navigation mode

Using the mouse, each file can be opened via a double click. The ctrl and shift keys allow multiple selection.

Using the keyboard, the arrow keys the move the selection. Pressing enter allows to open a file. The control+spacebar or shift+arrow shortcuts to select multiple files.

Using a screen reader is the same as the keyboard, each file is correctly vocalized (name, size, type, ...); in addition it vocalizes the state of the file (selected/unselected).

Open example

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.

Sample Code


<div role="listbox" aria-multiselectable="true" aria-label="file list, grid view">
  <div tabindex="0" role="option" aria-label="test 001.avi, video, 18.9MB"> ... </div>
  ...
</div>

Focus visibility

The focus position must be visible at all times. A specific style is applied to the thumbnail that has the focus. This style remains visible on selected files.

Handling keyboard

In order to properly browse the list, the keyboard must be managed via Javascript:

  • Arrow keys to move through the list.
  • Ctrl, Shift and spacebar to select several items.
  • Ctrl+a to select all items
  • The Enter key to open the file.