Keyboard navigation

[sylvinus]

We should make sure the interface is completely usable from the keyboard only.

Do we need to use tabindex attributes?

[JBaba]

I am interested and i want to contribute anyway i can but i have never done this before.

[sylvinus]

Great @JBaba JBaba! We're here to help :)

I think a good first step could be to look at this feature on other search engines, and try to make a spec of what we want to implement:

• Are the keyboard shortcuts enabled by default?
• What keys/features do we need?

[JBaba]

Appreciate your quick response.
I will analyze other search engines features and make a list that might be missing from Commonsearch.
I hope I can test on this https://uidemo.commonsearch.org url to find out missing features.

[JBaba]

By default all keyboard shortcuts are enabled and tab-index also works fine.

Key/features we need :

1. If focus is on any links then by pressing up and down arrow keys we can navigate to links accordingly.
2. By pressing "Esc" key focus goes to HTML document after this by pressing up and down arrow key page can be scrolled accordingly.

[sylvinus]

That seems reasonable for a first version! The page should indeed have 2 different states depending on where the focus is.

[JBaba]

Only this features needed at this point rest are needed based on information displayed on different search engines web pages.
Let me know what is next step for me.

[sylvinus]

Great! We wrote a tutorial which you can follow here:
https://about.commonsearch.org/developer/tutorials/first-frontend-patch

[JBaba]

@sylvinus I have successfully implemented case 2.

Need your guidance on case 1 this is what i have in mind,
Problem: Case 1 is caused by "tabindex" attribute which we don't have in document elements.

Observation: If end user has windows/linux operating system then browsers on system supports focus in and out somehow without "tabindex" not sure how!! then add our functionality.

Solution: Do we want to dynamically assign "tabindex" attribute in index.js file ? or we assign "tabindex" attribute to index.html elements then dynamically assignments for search results ?

[sylvinus]

I think it would be better for accessibility and text-based browsers to have some minimal tabindex attributes in the HTML.

There indeed seems to be some inconsistencies within browsers & OSes with focus. Let's try to have it work as intended in one browser first and we'll expand to others afterwards?

[JBaba]

I have raised pull request for this issue and both cases has been addressed in this patch #31