Non-exclusive alternative for table layout drag&drop (WCAG)
In order to ease customising the table layout in a web accessibility context,
We need to implement an alternative navigation feature for the drag&drop options.
Functional requirements
Depending on the axis and currently applied layout, each movable dimension has an additional menu icon that allows choosing one specific action from a sub-menu:
- 2 right arrow actions:
Move to Rows
,Move to Row Sections
andMove to Columns
are available options depending on the axis of the underlying dimension, e.g. a dimension on Rows can be moved only to Row section or Columns. - 1 up arrow action:
Move up
is shown only when there is at least one additional dimension above the current one - 1 down arrow action:
Move down
is shown only when there is at least one additional dimension below the current one
Exception: on Rows axis, the menu is shown only if there is more than 1 dimension on the axis.
For each axis, depending on the position of the dimension between other dimensions, the menu could look like:
Rows:
Row Sections:
Columns:
The menu is only shown when the Web Accessibility feature is switched on.
The switch is done using the "Web accessibility" switch button in the application's page header:
/
Design
The design details are up-to-date in the UI documentation -> Action box\Table view. The icon to be used is: "material-drag_indicator".
i18n
The menu translations are the following:
-
en
: "Move to",fr
: "Déplacer vers" -
en
: "Move up",fr
: "Monter" -
en
: "Move down",fr
: "Descendre"