Lead:  Liav Nadler  ONGOING

Description

An spreadsheet table is a type of data table where users can add and edit data on a spreadsheet-like grid

Usage & Behaviour

Structure

• The table contains a grid of rows and columns
• Rows and column may have headers
• If the table is higher than its container, a scroll bar will appear

States

• A cell can be in one of these states:
  • Normal (enabled)
  • Selected. The user can select a single cell or multiple cells (see below)
  • In Focus. Only one cell can be in focus at any time. By default, the top-left cell is in focus
  • Disabled

Interaction

• Clicking a cell selects that cell, deselecting all other cells
• Double clicking a cell selects that cell, placing the insertion point in the selected position
• Hitting the Enter key selects the cell below the cell that is in focus
• Hitting the Tab key selects the cell to the right of the cell that is in focus
• The user can select multiple cells in one of two ways:
  • Clicking cells while holding the Ctrl / Cmd key. In this case the first selected cell gets the focus
  • Dragging the cursor over a group of cell. In this case the last selected cell gets the focus
• Typing text will enter that text to the cell that is in focus, replacing any other text in the cell
• Hitting the Enter / Tab key when a cell is in focus will save the text in the cell and set the focus to the cell below it / next cell
• Adding / deleting rows and columns

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>>

Keyboard Operation

<<Explore and describe conventions>>

Design

Code

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