new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

IBM Carbon · all subjects

patterns/import

16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Import pattern overview

The import action transfers data or objects from an external source into a system. This pattern uses Carbon's File uploader component with drag & drop functionality.

Import modal for single files

For single file imports, use a modal. Users should have the option of uploading a local file using the file upload component with drag and drop, browsing locally to select a file, and providing the ability to add a file from an external resource.

When to use side panel or full page instead of import modal

If additional actions (e.g. adding metadata) are required to be performed on the file(s), consider whether it would be more appropriate to use a side panel or full page instead of a modal.

Import from URL in modal

If a product supports importing from a URL, provide this method as an option within the import modal.

Import full page or side-panel file selection

For full page or side-panel imports, use the drag and drop file upload component and offer the option to browse locally to select a file. File selection should be restricted to allowed file types.

Additional actions in full page or side-panel imports

If additional actions (e.g. adding metadata) are required on the file(s), they should be done separately to the file upload prior to the import action being completed. This could be in a subsequent step or, if there is sufficient space, include those actions in a single step.

Import from URL in full page or side-panel

If a product supports importing from a URL, provide this method as an option within full page or side-panel imports.

Import accessibility - trigger navigation

The user navigates to the Import button using the Tab key. If Import is launched from an overflow menu, the user may navigate to Import within the overflow menu using the Up and Down arrow keys. The focus state is applied to the button or menu item. The user presses Enter to launch the Import modal.

Import accessibility - single file focus order

On opening the modal (page, or panel), focus is applied to the first field that accepts user input, which is the drag & drop area. On Tab, focus is applied to the second field that accepts user input (the URL field if present). On Tab, focus is applied to the primary button (e.g. Save or Next), but the Import button should not be enabled until a file is selected. On Tab, focus is applied to the Cancel button.

Import accessibility - file uploader interaction

If the user chooses the file uploader, they select files using the browser-native file browser and click the call to action. This returns them to the modal with an optional file loading state.

Import accessibility - URL field interaction

If the user chooses the URL field, the field gains focus and the user inputs their URL. On Tab, focus is applied to the Add file button. On Return the file is uploaded with an optional loading state. The user can also key Return while focus is applied to the URL field to trigger the Add file button.

Import accessibility - file selected in single file import

Once the file is selected in a single file import, focus is applied to the remove icon on the added file. The user hits Return to remove the chosen file and return to the original state of the modal. On Tab, focus is applied to the Import button. On Tab, focus is applied to the Cancel button.

Import accessibility - multiple files do not use modal

When multiple files may be selected, a modal is not used.

Import accessibility - multiple files focus order

On entering an Import section or page, focus on the first Tab keystroke is applied to the first field accepting user input (usually the file uploader). On Tab, focus is applied to the URL field. The user keys Return to choose between the file uploader and URL field.

Import accessibility - multiple files selected focus cycling

When some of the allowed number of files are selected, focus cycles through adding more files and removing the selected files. Focus returns to the just-used file selection method. If the method used was the file uploader, on Tab, apply focus to the URL field. On Tab, apply focus to the remove icon on the added file(s), moving through each using Tab.

Import accessibility - maximum files reached

When the maximum number of allowed files is reached, the file selection methods are in disabled state. Focus cycles between the selected files remove actions and moving to the next section of the page. On returning to the page from the final file uploader interaction, focus is applied to the remove icon on the uploaded files. On Tab, focus moves through the remove icon of each uploaded file. On continued Tab, focus is applied to the next section or interaction in the page.

Give your agent this brain