Search results

Accessibility in Vue FileManager component

The File Manager component has been designed with keeping the WAI-ARIA specifications in mind, and applying the WAI-ARIA roles, states, and properties along with keyboard support. This component is characterized by complete keyboard interaction support and ARIA accessibility support, which makes navigation easy for people who use assistive technologies (AT) or for users who completely rely on keyboard navigation.

ARIA attributes

The following ARIA Attributes denote the state of File Manager.

Property Functionalities
aria-disabled Indicates whether the File Manager component is in disabled state.
aria-haspopup Indicates whether the Toolbar element has a suggestion list.
aria-orientation Indicates whether the File Manager element is oriented horizontally or vertically.
aria-expanded Indicates whether the Treeview node has been expanded.
aria-owns Contains the ID of the suggestion list to indicate popup as a child element.
aria-activedescendent Holds the ID of the active list item to focus its descendant child element.
aria-level Specifies the level of the element in Treeview Structure.
aria-selected Indicates whether a particular node is in selected state.
aria-placeholder Represents a hint (word or phrase) to the user about what to enter in the text field
aria-label Defines a string that labels the current element.
aria-checked Indicates whether the checkbox is in checked state.
aria-labelledby Labels the dialog. Often, the value of the aria-labelledby attribute will be the id of the element, which is used to title the dialog
aria-describedby Describes the contents of the dialog.
aria-modal Indicates whether an element is a modal when display.
aria-colcount Specifies the number of columns in full table.
aria-colindexnt Defines the number of columns within a grid.
aria-rowspan Defines the number of rows a cell spanned within a grid.
aria-colspan Defines the number of columns a cell spanned within a grid.
aria-sort Indicates whether items in the grid or table are sorted in ascending or descending order.
aria-grabbed This attribute is set to true, and it has been selected for dragging. If this element is set to false, the element can be grabbed for a drag-and-drop operation, but will not currently be selected.
aria-busy This attribute is set to false when grid content is loaded.
aria-multiselectable Defines more than one item has been selected.

Keyboard interaction

You can use the following key shortcuts to access the File Manager without interruptions.

Keyboard shortcuts Actions
Page Down Scrolls down to the next folder or file and selects the first item when files are loaded.
Page Up Scrolls up to previous folder and select the first item when files are loaded.
Enter Selects the focused item and navigate through the child elements.
Tab Focuses on the first element of toolbar and navigates through the next tab indexed element.
Esc(Escape) Closes the image when it is in open state.
Alt+N Creates a new folder dialog.
F5 Refresh the file manager element.
Home Navigate through the first element of Details view or Largeicons view.
End Navigate through the last element of Details view or Largeicons view.
Move Left Scrolls left to previous folder and select the first item when files are loaded
Move Right Scrolls right to previous folder and select the first item when files are loaded
Alt+Enter Shows the Get Details info for selected folder.
Shift+Right Allows multiselection. Selects the file or folder at the right of the previously selected folder.
Shift+Left Allows multiselection. Selects the file or folder at the left of the previously selected folder.
Shift+Down Allows multiselection. Select the file or folder till the focused index.
Shift+Delete Permanently deletes the selected file or folder in file manager element.
Delete Deletes the selected file or folder in file manager element.
Shift+Up Allows multiselection. Select the file or folder till the focused index.
Ctrl+C Copies the Selected file or folder in file manager element.
Ctrl+V Pastes the Copied/Cut file or folder in file manager element.
Ctrl+X Cuts the Selected file or folder in file manager element.
Ctrl+A Select all the files or folder in Grid view or Largeicons view.
F2 Creates a rename dialog for selected file or folder in file manager element.
Shift+F10 Opens the context menu for selected file or folder in file manager element.
Ctrl+D Downloads the list of selected file or folder in file manager element.
Ctrl+Shift+1 Changes the file manager layout to Grid view.
Ctrl+Shift+2 Changes the file manager layout to Details view.