microsoft / microsoft/roosterjs

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

Open
#2,740 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.3k
Forks
190
Avg merge
1d 8h
Merged PRs (30d)
16

Description

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:

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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in the Demo app and reproduce the table navigation cases with a 3×3 table using Up and Down. Trace the existing arrow-key behavior, including the completed requirements and PR #2767, then cover the remaining transitions above and below the table while preserving the nearest horizontal cursor position; verify each listed expected behavior manually.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.