[A11y] Incorrect focus order when navigating within inserted table using up/down arrow keys

[vhuseinova-msft]

Describe the bug When user uses arrow keys for navigation in table, focus order is not correct for:

• first cell in any column before first one when up arrow key is used
• last cell in the any column before last one when down arrow key is used

To Reproduce Steps to reproduce the behavior:

• first cell in any column before first one when up arrow key is used

  1. Open Demo app
  2. Insert a table at least 3*3
  3. Set cursor to the last cell in the table (N*N position)
  4. Use up key to navigate to the first cell in the current column
  5. Use up key again and observe that focus is in the first cell in the previous column

• last cell in the any column before last one when down arrow key is used

  1. Open Demo app
  2. Insert a table at least 3*3
  3. Set cursor to cell at (0,0) position
  4. Use down key to navigate to the last cell in the current column
  5. Use down key again and observe that focus is in the last cell in the next column

Expected behavior when user navigates:

• down in the last cell in any column, they should exit the table and be navigated to the text area after the table
• up in the first cell in any column, they should exit the table and be navigated to the text area before the table

Screenshots

https://github.com/microsoft/roosterjs/assets/98852890/adf448db-4a9e-44d1-81ca-a654ac910c49

Device Information

• OS: [e.g. iOS] MacOS/Windows
• Browser [e.g. chrome, safari] Edge
• Version [e.g. 22]

Current requirements done:

• [X] If the cursor is anywhere in the top row and the Up arrow is pressed, it should go to the line above the table, if there is one. Observed: we only do this for the first cell in the row. It looks like we already have logic in place to position the cursor as close as possible to where it was horizontally on the table. (https://github.com/microsoft/roosterjs/pull/2767)
• [X] If the cursor is in the first cell of the table and the Left arrow is pressed, it should go to the end of the line above the table. Observed: the cursor moves to the left of the table. (https://github.com/microsoft/roosterjs/pull/2767)
• [ ] If the cursor is in the bottom row and the Down arrow is pressed, it should go to the line of text after the table, as close as possible where the cursor was on the table (see first point). Observed: cursor always goes to the beginning of the line.
• [ ] If the cursor is in the text below a table and the Up arrow is pressed, it should go to the cell closest to the cursor position (see first point). Observed: the cursor always goes to the last cell.
• [ ] There might be 1 more use case, when user is on the text above the table and Down arrow key is pressed (it looks like it should go to the correct cell to be consistent with 2 point above)

### Tasks

[jvillalobos]

Tested on Outlook. Here's what I think we need to change:

• If the cursor is anywhere in the top row and the Up arrow is pressed, it should go to the line above the table, if there is one. Observed: we only do this for the first cell in the row. It looks like we already have logic in place to position the cursor as close as possible to where it was horizontally on the table.
• If the cursor is in the first cell of the table and the Left arrow is pressed, it should go to the end of the line above the table. Observed: the cursor moves to the left of the table.
• If the cursor is in the bottom row and the Down arrow is pressed, it should go to the line of text after the table, as close as possible where the cursor was on the table (see first point). Observed: cursor always goes to the beginning of the line.
• If the cursor is in the text below a table and the Up arrow is pressed, it should go to the cell closest to the cursor position (see first point). Observed: the cursor always goes to the last cell.

[BryanValverdeU]

The first two points are resolved in https://github.com/microsoft/roosterjs/pull/2767

The last to requirements are still pending, and another behavior observed is also missing. Adding it to the list.

There might be 1 more use case, when user is on the text above the table and Down arrow key is pressed (it looks like it should go to the correct cell to be consistent with 2 point above)

• [X] If the cursor is anywhere in the top row and the Up arrow is pressed, it should go to the line above the table, if there is one. Observed: we only do this for the first cell in the row. It looks like we already have logic in place to position the cursor as close as possible to where it was horizontally on the table.
• [X] If the cursor is in the first cell of the table and the Left arrow is pressed, it should go to the end of the line above the table. Observed: the cursor moves to the left of the table.
• [ ] If the cursor is in the bottom row and the Down arrow is pressed, it should go to the line of text after the table, as close as possible where the cursor was on the table (see first point). Observed: cursor always goes to the beginning of the line.
• [ ] If the cursor is in the text below a table and the Up arrow is pressed, it should go to the cell closest to the cursor position (see first point). Observed: the cursor always goes to the last cell.
• [ ] There might be 1 more use case, when user is on the text above the table and Down arrow key is pressed (it looks like it should go to the correct cell to be consistent with 2 point above)

[romanisa]

Keeping this open if anyone wants to pick up the fix for the remaining items.