Change 413395 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Better keyboard accessibility on CX dashboard

https://gerrit.wikimedia.org/r/413395

Change 413395 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Better keyboard accessibility on CX dashboard

https://gerrit.wikimedia.org/r/413395

Checked in cx-testing on Mac and Windows. I've marked with the items that are done.
https://gerrit.wikimedia.org/r/413395 gives a more granular description of what was fixed.

• When "New translation" button in focused, pressing Enter opens the dialog.

Just to clarify the above: "When "New translation" button in focused" means when I hover over it and the color of the button is changed? "Start new translation" button will react to Enter as expected, but not "New translation" button.

• When "New translation" dialog is opened, pressing Esc key will close the dialog.
• Close suggestion item dialog when Esc key is pressed.
• After article for translation is chosen (by searching or choosing one of suggested items) focus "New translation" dialog, so pressing Enter starts the translation process.
• Make LanguageFilter keyboard accessible.

The search field will be focused with keyboard tab and the language can be typed in and when Enter is pressed becomes a selected language for translation. However, the selection of languages is not possible form the keyboard - a known issue was reported in T187964: Enable up/down keys for navigating the ULS menu

Let me clarify some of the specs and what "button being focused" means.

In T186195#4011640, @Etonkovidova wrote:

Just to clarify the above: "When "New translation" button in focused" means when I hover over it and the color of the button is changed? "Start new translation" button will react to Enter as expected, but not "New translation" button.

What you have explained with "hover over it and the color of the button is changed" is just what you have discovered - hover. To create the effect of clickable button element, background is usually changed to slightly lighter hue of the same color. And that is what hover does when mouse is hovering over element. So, that is separate state from focus state.

One of ideas of accessibility is enabling users to work with our tools without using the mouse, just by using keyboard. That is one part where focus and the visual effects that go along with focused elements are really valuable. You should be able to navigate to desired element ("New translation" button in this example) just by using keyboard. Usually one element can have focus at one time. Which element has the focus is usually indicated by blueish outline around element, but that is part we can style as well. By pressing tab key on keyboard once, element with highest precedence gets focus, or first element in DOM hierarchy if all elements are equal. To illustrate this effect on CX dashboard, I have created small gif that shows me going through all focusable element until reaching "New translation" button, just by pressing tab key on my keyboard.

You can observe following happens:

• WikipediA wordmark gets focus, which is indicated by light blue outline around image. That is default style for focused elements that my browser has.
• In similar fashion, ULS gets focus as well.
• Next, two notification icons get focus, but that is not indicated visually. I'm actually pressing tab key three times before reaching personal menu from ULS. Notification icons not having focused state is tracked at T186553.
• When personal menu gets focus, you see the focused state style applied by OOUI widget, instead of leaving the focus style to browser.
• Finally, one more tab key leads us to our desired "New translation" button. Pressing enter key at this point should open the dialog. I did not show that step, since gif was taken on enwiki, which does not have this change deployed yet.

You don't have to navigate through all elements from beginning until reaching desired button. There are shortcuts using mouse, but I will let you explore :)

Here are three different states new translation button can take:

One additional tip. You can force come of the states from DevTools. When some element is selected you choose "Styles" tab in sidebar (which is selected by default). On the first line, you have "Filter", ":hov", ".cls" and "+" options. All really useful, but :hov is the one that has states, among them is focus state.

In T186195#4016206, @Etonkovidova wrote:

@Petar - Thanks a lot for such clear explanation! Yes, the focused state of the 'New translation' button is indicated as a white outline and it works as expected:

There is one thing I forgot explaining. Last item in description "The language selector in the panel cannot be selected/manipulated with the keyboard." may be misinterpreted as well. It is about the ability of language filters (used in various places) to receive focus and be opened by pressing enter.
Previously, language filters weren't focusable at all and not accessible with keyboard. This is the look of focused language filter, after this change:

When language filter is focused and enter key pressed, ULS should open. If languages in ULS panel aren't keyboard accessible, that is issue coming from ULS and outside of the scope of this ticket.