From bf96104c2f2cf565df8e867f32de3a39c7b0a553 Mon Sep 17 00:00:00 2001 From: JP de Vries Date: Sun, 30 Apr 2017 02:49:11 +0200 Subject: [PATCH 1/4] first shot at documenting Eureka Haven't documented the "manual" yet of exactly how to perform any given feature. Not even sure if that is necessary. This documents configuration options, key board shortcuts, and accessibility considerations made for abled / disabled --- en/50_Open_Source/Eureka/index.md | 97 +++++++++++++++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 en/50_Open_Source/Eureka/index.md diff --git a/en/50_Open_Source/Eureka/index.md b/en/50_Open_Source/Eureka/index.md new file mode 100644 index 00000000..a496ba00 --- /dev/null +++ b/en/50_Open_Source/Eureka/index.md @@ -0,0 +1,97 @@ +The Eureka Media Browser allows users to browse media sources as well as upload, rename, and delete media items. + +## Options +| Option | Default | Description | +| ------------- |:-------------:| -----| +| `allowUploads` | `true` | Whether or not to allow uploading of media items | +| `useLocalStorage` | `true` | Whether or not to use the JavaScript `localStorage` API to remember session data such as the last visited directory and view mode preference | +| `storagePrefix` | `"eureka__"` | Prepended to `localStorage` keys | +| `allowRename` | `true` | Whether or not to offer users the ability to rename directories and media items | +| `allowDelete` | `true` | Whether or not to offer users the ability to delete directories and media items | +| `allowDownload` | `false` | Whether or not to add a download button to media items | +| `confirmBeforeDelete` | `false` | Whether or not to confirm intent before users delete directories and media items | +| `locale` | `"en-US"` | The localization to use. See Lexicons. | +| `mediaSource` | `undefined` | The default initial media source id to use | +| `currentDirectory` | `"/"` | The default initial directory to use | +| `enlargeFocusedRows` | `false` | Whether or not to enlarge thumbnails of focused rows | +| `mode` | `"table"` | Initial view mode (table, thumb, grid, list) | +| `sort` | `"name"` | Initial column to sort media items on | +| `allowFullscreen` | `true` | Whether or not the interface should offer a fullscreen button | +| `emphasisFocusedMediaItem` | `true` | Whether or not to emphasis selected media items (defaults to emphasizing the filename, only applies to table and list view modes) | +| `doDragNDrop` | `true` | Whether or not to enable drag 'n drop features | + + +## Accessibility +Not a single feature relies solely on sight or the usage of sight or a mouse. The entire interface is navigable by the keyboard and a combination of ARIA attributes and visually hidden text are used to provide an accessible experience to assistive technology users. + +Eureka follows the principle of designing for users on extreme ends of the spectrum and letting the middle fill itself in. This means that abled bodied users as well as those with multiple disabilities were equally considered throughout the design process. + +### International Considerations +Eureka is powered by React Intl and supports several localizations. You may [Request and contribute to translations](https://github.com/jpdevries/eureka#-i18n). + +### Device Considerations + +#### Mobile +Eureka's mobile–first design provides accessibility to touch device users. Fat–finger–friendly considerations such as increased font sizes and tap targets allow for a more usable experience. Depending on the current view mode, there may not always be a choose button visible on screen. A double–tap–to–choose feature allows mobile users to choose media items even when the choose buttons are off canvas. + +#### Desktop +Users on larger viewports may appreciate a two column layout, with ever present yet collapsable media source tree, modern Grid Layout, and large high quality thumbnails. A "holy–grail" layout is used to keep all toolbars ever present even when viewing large directories. + +### Motor Considerations + +#### Disabled +Eureka does not rely on a mouse, making it fully accessible to keyboard users. The default tabular view mode presents a contextual row of actions below focused media items, allow context menu like features to be accessed without the use of a mouse. + +The choose multiple items feature can drastically reduce user exhaustion and as such was designed as an accessibility consideration for users with motor disabilities, as well as a convenience for all users. Paired with the invert selection feature, users can perform complex actions such as selection and choosing or deleting hundreds of items in just a few steps. + + +From user feedback and testing, we learned that abled considerations, such as drag 'n drop can be problematic to some users. Set `eureka.disableDragNDrop` to `true` to disable drag 'n drop. + +#### Abled +Sighted mouse users may benefit from familiar drag 'n drop functionality and, in supported browsers, right click context menus. + +### Visual Considerations + +#### Disabled +Eureka supports standard high contrast modes. Based off user agent settings, such as Microsoft Windows High Contrast settings, Eureka will automatically switch to white-on-black or black-on-white themes. + +#### Abled +Eureka supports theming via CSS Properties. Sighted users can set CSS Properties in their own stylesheets to customize the look and feel of the Eureka interface. The Fullscreen API is leveraged to give sighted users more pixels to browse with. Four different view modes give sighted users options for how they view Eureka. + +### Audible Considerations +#### Disabled +Screen reader users appreciate Eureka's usage of ARIA attributes and visually hidden text to describe the interface for non–sighted access. While the choose button for "turtle.jpg" may visually read "Choose", ensuring visual correlations are relayed non–visually to assistive technology, it will be relayed as "Choose turtle.jpg". + +#### Abled +Eureka supports multiple embed types for media items, including `