Fenix: Clicking on search engine icon minimizes dismisses keyboard and Android nav buttons

[eliserichards]

Steps to reproduce

1. Click on toolbar to open search dialog
2. Click on the search engine icon on the far left of the toolbar

Expected behavior

Nothing happens (or it opens search engines) - what do we want the behavior to be??

Actual behavior

Search dialog is minimized and bottom back/home/app switch icons disappear

Video:
20200923_122433.mp4.zip

Device information

• Android device: Pixel 3 android 10
• Fenix version: nightly 81.1.2 (master)

[violasong]

I've been talking with @brampitoyo and others about a change that would include fixing this bug.

It would include changing this:

to something like this:

The search engine icon would now be the way to both open and close the search dialog. The caret icon could change like this when it's open:

Also, to keep the address bar clean, when the user has focused the text field, mic/QR code icons would disappear and be replaced by a clear button. (Bram has mockups for this)

[MReschenberg]

hello! from an a11y perspective, I worry about touch target size. We want to make sure users (especially those with motor disabilities) are able to easily touch & activate both the button and the input for the search bar separately. Looks like the minimum target size for android is something like 48x48, will the search button/dropdown meet that minimum?

[violasong]

Thanks @MReschenberg for raising this issue!

If the target size can extend beyond the graphics themselves, it will meet the 48x48 requirement. Here I've overlaid 48x48 squares. We may need to adjust the QR code button positioning a bit.

[violasong]

I realized the WCAG requirement is actually 44x44, which is great for this design, since the buttons are much less important than the central input area. So I'm planning to propose this, with potential extra tap area on the edges.

Some very helpful comments from Twitter :)

• Florens: I like it. It's actually clearer to me like this. In the current UI, the "Search engine" button is disconnected from the input, so it's not 100% clear to me where it goes or what it does.
• Julie: I love and need this feature! When the address bar is at the top of the screen, the "search engine" button is too far away and this is not intuitive at all. I always forget it…
• Jeppe: I'll admit I've previously have been pressing the logo in an attempt to switch the search engine, so this would be a welcome change in my mind

[MReschenberg]

Ah, yeah the guidance I was referring to is specific for android, which differs from the WCAG advice -- you can find it here.

[violasong]

Ah, yeah the guidance I was referring to is specific for android, which differs from the WCAG advice -- you can find it here.

Thanks Morgan - yes, I'm generally striving for this Android standard, but we think the WCAG minimum works better in this particular instance due to the concern that the buttons start to visually crowd the much more important input area. (People accidentally tapping the QR code when they mean to tap the input is a bigger problem than vice-versa.)

[hmble]

It would be nice if we can also assign shortuct key string for search engines like we have in firefox desktop
https://support.mozilla.org/en-US/kb/assign-shortcuts-search-engines

I use "d" as a shortuct key for duckduckgo which automatically change seadch engine to duckduckgo.

[violasong]

Same basic design concept created by Bram 2 months ago :) https://github.com/mozilla-mobile/fenix/issues/12619

Current Figma file for the new design

[violasong]

Figma file now reflects the final version for this hand-off.

Future sprints could include:

• Collect telemetry to determine if some things should be in a ••• menu, or more prominent
• Improve search engine panel
• Shortcut key strings

[ekager]

Part of the work was completed already in AC by Jeff: https://github.com/mozilla-mobile/android-components/pull/8640

[eliserichards]

Followups: #16659 #16658