Lead: Liav Nadler  ONGOING

Related Pages: Data Tables

Description

An editable table is a /wiki/spaces/UX/pages/283051242 in which the user can edit data inside a row, without the need to navigate to a separate page, a panel or a popup

Basic Flow

• 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

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>

Contrast & size compliance

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Design

Code

<<a box containing the code - discuss with Femi>>