New FOCUS_NAVBAR message

[atabel]

The problem

We have the product requirement to move the screen reader focus to the native app navbar when we navigate between screens. When we do regular full page load navigation, this can be handled without problems by native app, but when the webapp does client side navigation (SPA navigation with ReactRouter), the native app doesn't know about it.

Proposed solution

Define a new bridge message to place the screen reader focus on the navbar. The webapp will send this message after doing a client side navigation that needs to place the screen reader focus on the navbar

Message type:

{
    "type": "FOCUS_NAVBAR"
}

Response type:

{
    "focused": boolean // whether the focus succeed 
}

The native app will move the focus to the navbar. The first element (following the top-bottom, left-right order) in the navbar will be focused: if the navbar has a left interactive icon (usually a back button) it will be focused, if there isn't any left icon, the navbar title will be focused instead, if there isn't either left icon nor title, the focus will go to the right icon (if any).

If there isn't a navbar, the app will respond with a {focused: false} response, otherwise it will respond {focused: true}

Discarded alternative solution

Define a new bridge message to notify the native app that the webapp has just done a navigation. With this message, the native app can know when a client side navigation has been performed and do the needed logic (in this case, move the screen reader focus to the navbar).

The problem with this approach is that we'd need to implement some logic in both iOS/Android apps to move the focus to the navbar only when needed. For example, we don't want to move the focus on back navigation, also there are some special client side navigations where we don't want to reset the screen reader focus. So we'd need to add additional info in the bridge message (whether the navigation is forward/backward, whether the navigation needs to move the focus to the navbar, etc)

[atabel]

WEB ticket: https://jira.tid.es/browse/WEB-1950

[jeprubio]

Android ticket: https://jira.tid.es/browse/ANDROID-14965

[dhidalgofadrique]

iOS ticket: https://jira.tid.es/browse/IOS-10429

[jeprubio]

I've been requested that it's not about having or not the NavBar returning true or false and instead is about having something focusable on the navbar, if there is nothing focusable it should return false as well even if there is a navbar, is that right?

[dhidalgofadrique]

I've been requested that it's not about having or not the NavBar returning true or false and instead is about having something focusable on the navbar, if there is nothing focusable it should return false as well even if there is a navbar, is that right?

Good point. Shouln't be a real case having a navBar with nothing focusable on it (no title neither left or right buttons) but in this case I think the focus shoun't be moved (and bridge response should be false)