I want to provide handicapped users a way to operate web.whatsapp.com by keyboard only.

This works to some extent:

Users can jump around each tab and arrow keys.

Audio messages can be played / muted by pressing Space.

However, I have not found a way to open / large video or images:

Also, even I could find out which key opens / maximizes the images, I find it akward that my users would have to press 2 different keys

So the first thing I investigated was which element is currently active / selected.

My idea was to do the following (pseudo code)

if (UserPressedSomeSwitchToClickTheCurrentlySelectedElement)
    if (document.activeElement.type = 'wa-audio')
        SendSpace
    else if (document.activeElement.type = 'wa-Image') then
        'todo: investigate how to click this element
    

So the first thing I tried was to find out which element is the active one / the one which receives keyboard input.

To start off simple, I set the focus to the group search box and executed JS to tell me the element.

In this screenshot, one can see that the cursor is blinking in the group search box:

When I press the key "n" on my keyboard, it is printed in this element:

I have tried the following approaches to get the element which receives the input:

var e = document.activeElement;
if (e)
{
     alert('document.activeElement: ' + e + ', name: ' + e.name);
}
else
{
     alert('document.activeElement was nothing');
     e = document.querySelector(": focus");
     if (e)
     {
         alert('querySelector : focus: ' + e);
     }
     else
     {
         alert('querySelector : focus was nothing');
     }
}

The alert that I get is:

In some cases, e.className reveals a name.

When I am in the people selection tab on the left side however, e.className returns '', so I don't have any clue where I'm at.