Page MenuHomePhabricator

EditCheck: review Keyboard navigation
Open, Needs TriagePublic

Description

Background

Currently, when an Edit Check appears, it cannot be navigated using the keyboard. If the focus is on the text, pressing tab doesn’t shift it to the Edit Check. We need to ensure that users relying on keyboard navigation can easily interact with Edit Checks.

To improve accessibility, the focus should automatically move to the first interactive element in the Edit Check (the "Revise" button) when it appears. The expected keyboard navigation flow is as follows:

  1. The user is typing (focus is on the text area).
  2. The Edit Check appears, and the focus moves to the first button ("Revise").
  3. If the user clicks "Revise," the focus should return to the text area to continue editing.

Design proposal (if needed)

Once the design proposal has been created in Figma, remove this note and link the Figma file below.

Design proposal

Open questions

Add here the questions to be answered in order to design and implement the component

Acceptance criteria (or Done)

  • The focus automatically moves to the first interactive element of the Edit Check ("Revise" button) when it appears
  • After the user clicks "Revise," the focus returns to the text area to allow continuous editing

Event Timeline

Issue with tab: it's already used as a standard editing shortcut. It changes indentation in lists, and moves in tables. This is pretty standardized across editors, so using it would probably break user-expectations. We should maybe look into how other places handle an equivalent movement (e.g. Google docs moving from the document to a comment?).

Considerations:

  • For most checks we probably don't want to automatically move focus from the document to the check, as checks can appear instantly as you are typing
  • TAB is bound to some other actions depending on context, for example increasing list indentation or navigating through a table
  • For this reason we use ctrl+shift+enter to move focus to the context (e.g. the link context shown when you click on a link), although this is only documented in the keyboard shortcuts dialog (ctrl+?)
El T394473#10929040, @DLynch escribió:

Issue with tab: it's already used as a standard editing shortcut. It changes indentation in lists, and moves in tables. This is pretty standardized across editors, so using it would probably break user-expectations. We should maybe look into how other places handle an equivalent movement (e.g. Google docs moving from the document to a comment?).

Google Docs uses the Tab key for tabbing text in the document. However, in our case, the Tab key is not used for tabbing. If the cursor is placed in the text and an Edit Check is displayed, why not use` Tab` to automatically move the focus to the first interactive element in the Check?

Grabaciondepantalla2025-06-19alas11.51.31-ezgif.com-video-to-gif-converter.gif (800×445 px, 324 KB)

If we cannot use the Tab key to shift focus from the text to the Edit Check’s interactive elements, an alternative solution could be to automatically move the focus to the first action (such as the “Revise” button) when the Edit Check appears. This would allow users to immediately interact with the Edit Check to solve/decline it. Once the user solves/declines it, the focus would return to the text area so that they can continue editing. In case the user wants to return to the text while the focus is within the Check, they could use Esc to leave/close that Check.

image.png (2,880×1,600 px, 1 MB)

Wdyt?

El T394473#10929040, @DLynch escribió:

Issue with tab: it's already used as a standard editing shortcut. It changes indentation in lists, and moves in tables. This is pretty standardized across editors, so using it would probably break user-expectations. We should maybe look into how other places handle an equivalent movement (e.g. Google docs moving from the document to a comment?).

Google Docs uses the Tab key for tabbing text in the document. However, in our case, the Tab key is not used for tabbing. If the cursor is placed in the text and an Edit Check is displayed, why not use` Tab` to automatically move the focus to the first interactive element in the Check?

Because "TAB is bound to some other actions depending on context, for example increasing list indentation or navigating through a table" - so when your cursor is in a list or a table, it is unclear what action tab would take.

If we cannot use the Tab key to shift focus from the text to the Edit Check’s interactive elements, an alternative solution could be to automatically move the focus to the first action (such as the “Revise” button) when the Edit Check appears.

We should never steal focus from the surface if the user is just typing text (both on desktop and mobile) and this can be a very frustrating user experience - if they aren't looking at the screen it will start swallowing characters, or they could start taking actions they didn't intend (e.g. pressing space or enter will cause a button to get pressed).

After some conversations about this, it seems that the best solution for now would be to use Command + Shift + Enter to move the focus to the Edit Check, as in the rest of the contextual popups. Should we move forward and implement this solution for now?