microsoft / microsoft/roosterjs
[A11y] Incorrect focus order when navigating within inserted table using up/down arrow keys
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
- Open Demo app
- Insert a table at least 3*3
- Set cursor to the last cell in the table (N*N position)
- Use up key to navigate to the first cell in the current column
- 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
- Open Demo app
- Insert a table at least 3*3
- Set cursor to cell at (0,0) position
- Use down key to navigate to the last cell in the current column
- 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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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