Lead: Liav Nadler Status colour Yellow title ongoing
Related Pages: Data Tables
| Table of Contents |
|---|
Description
...
- An editable table is similar to a basic table, with the exceptions described below:
- Clicking the edit icon in any row:
- Selects that row (if not already selected)
- Changes all relevant cells of that row to input fields, allowing the user to enter text in text fields or select values in dropdown menus
- Replaces the edit icon with two icons: confirmation (V) and cancellation (X)
- The user can enter or update any input field, in any order
- The first input field will be selected by default
- The user can move the focus to the next or previous field using Tab / Shift+Tab
- Clicking Enter when the focus is on a text field changes all input fields back to text, with the updated values
- When done the user can click on one of the two icons:
- Clicking the confirmation icon changes all input fields back to text, with the updated values
- Clicking the cancellation icon changes all input fields back to text, with the previous values
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
Focus management
...
Focus management
- By default, the first input field will be in focus
- The user can move the focus to the next or previous field using Tab / Shift+Tab
- Clicking Enter when the focus is on a text field will change all input fields back to text, with the updated value
We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>
...