B.35 OJET Table (oj-table)
This section contains information on the Table Component keystrokes.
Table B-34 Table Component Keystrokes
Target | Key | Action |
---|---|---|
Cell | Tab |
The first Tab into the Table moves focus to the first column header. The second Tab moves focus to the next focusable element outside of the Table. If focus is on a row and the row is actionable then Tab moves focus to the next focusable element within the row. If focus is already on the last focusable element then focus will wrap to the first focusable element in the row. If edit Mode is row Edit, see the section 'Cell in Editable Row'. |
Cell | Shift+Tab |
The first Shift+Tab into the Table moves focus to the first column header. The second Shift+Tab moves focus to the previous focusable element outside of the Table. If focus is on a row and the row is actionable then Shift+Tab moves focus to the previous focusable element within the row. If focus is already on the first focusable element then focus will wrap to the last focusable element in the row. If Edit Mode is row Edit, see the Cell in Editable Row section. |
Cell | Down Arrow | Move focus to the next row. |
Cell | Shift+Down Arrow | Select and move focus to the next row. |
Cell | Up Arrow | Move focus to the previous row. If at the first row then move to the column header. |
Cell | Shift+Up Arrow | Select and move focus to the previous row. |
Cell | Left Arrow | Do nothing. |
Cell | Right Arrow | Do nothing. |
Cell | Home | Move focus to first row. |
Cell | End | Move focus to last row. |
Cell | Space | Select row. |
Cell | Enter |
If the table edit Mode is row Edit then make the current row editable. If the table edit Mode is none then toggle the current row to actionable mode if there exists a tabbable element in the row. Once toggled to actionable mode, focus will be moved to be first tabbable element in the row. |
Cell | F2 |
If the table edit Mode is none then toggle the current row to actionable mode if there exists a tabbable element in the row. Once toggled to actionable mode, focus will be moved to be first tabbable element in the row. If the table edit Mode is row Edit then toggle the current row between editable and read-only. |
Cell in Editable Row | Tab |
Move focus to next editable cell or focusable element in the row. If focus is on the last editable cell or focusable element in the row, make the next row editable and move focus to the first editable cell or focusable element in the next row. If focus is on the last editable cell or focusable element in the last row, move focus to next focusable element on the page (outside table). |
Cell in Editable Row | Shift+Tab |
Move focus to previous editable cell or focusable element in the row. If focus is on the first editable cell or focusable element in the row, make the previous row editable and move focus to the last editable cell or focusable element in the previous row. If focus is on the first editable cell or focusable element in the first row, move focus to previous focusable element on the page (outside table). |
Cell in Editable Row | Down Arrow | Handled in the editable cell. |
Cell in Editable Row | Shift+Down Arrow | Handled in the editable cell. |
Cell in Editable Row | Up Arrow | Handled in the editable cell. |
Cell in Editable Row | Shift+Up Arrow | Handled in the editable cell. |
Cell in Editable Row | Left Arrow | Handled in the editable cell. |
Cell in Editable Row | Right Arrow | Handled by the editable cell. |
Cell in Editable Row | Home | Handled in the editable cell. |
Cell in Editable Row | End | Handled in the editable cell. |
Cell in Editable Row | Space | Handled in the editable cell. |
Cell in Editable Row | Enter |
Make the next row editable and move focus to the editable cell in current column in the next row. If last row is editable then make it read-only. |
Cell in Editable Row | Shift+Enter |
Make the previous row editable and move focus to the editable cell in current column in the previous row. If first row is editable then make it read-only. |
Cell in Editable Row | F2 | Toggle the current row between editable and read-only. |
Cell in Editable Row | Esc | Make the current row read-only. |
Column Header | Tab | Navigate to next focusable element on page (outside table). |
Column Header | Shift+Tab | Navigate to previous focusable element on page (outside table). |
Column Header | Down Arrow | Move focus to the first row. |
Column Header | Up Arrow | Do nothing. |
Column Header | Left Arrow | Move focus to previous column header. |
Column Header | Shift+Left Arrow | Select and move focus to previous column header. |
Column Header | Right Arrow | Move focus to next column header. |
Column Header | Shift+Right Arrow | Select and move focus to next column header. |
Column Header | Home | Move focus to first column header. |
Column Header | End | Move focus to last column header. |
Column Header | Space | Select column. |