[FEATURE] When clicking on the search icon button, focus the search input

[dmshm]

Description

Focus the search field when the search button is clicked.

Related Issue

Closes #1018.

Motivation and Context

When clicking the search button icon the field was not focused.

How Has This Been Tested?

The behavior of the item has been tested on the PC as well as on mobile devices.

Screenshots

Proposed Labels for Change Type/Package

BUG, pkg:venia-concept

Checklist:

• I have read the CONTRIBUTING document.
• I have linked an issue to this PR.
• I have indicated the change type and relevant package(s).
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.
• All CI checks are green (linting, build/deploy, etc).
• At least one core contributor has approved this PR.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

[coveralls]

Coverage decreased (-0.02%) to 76.901% when pulling 6835c80 on DmitryShmaliuk:BUG_When_clicking_on_the_search_icon_a_frame_appears_#1018 into 41bff88 on magento-research:develop.

[belbiy]

It is considered a bad practice to remove the outline from an active element (http://www.outlinenone.com/).

I would start by asking why the outline on the button feels wrong.

Perhaps, the search button should move the focus to the input when the button is tapped?
Or the style of the outline does not meet the expectations?

[dmshm]

@belbiy good remark, thank you. I read the article you provided and I agree with you that the outline should be left on the desktop, but do we need it on mobile devices?

[dmshm]

It also seems to me that we need to move the focus after we have clicked on the active element. For example: Click on the search element, and after, the focus is transferred to the input field to search.

Or, if you use only "Tab", the items will stand out.

[dmshm]

Please, read the next article: Removing that ugly :focus ring (and keeping it too)

[belbiy]

@DmitryShmaliuk, we cant just remove the focus ring for mobile. There's an interesting prototype for input modality that handles the keyboard-mouse input switching.

But in reality, i think that we can improve user experience greatly by doing simple things first:

1. For search button, move the focus to the input field, so the user does not need to make extra tap. Consider the same behavior for every button – tapping a button can move focus the the area that button controls. If the button opens a shopping cart, for example, move focus inside that modal, etc. This can be a feature of the modal component actually, receiving focus on open, possibly even "trapping" the focus inside itself until closed.

2. Styling the :focus state of the buttons and other active elements that they look consistent and not "weird" when focused.

@soumya-ashok, what do you think?

[soumya-ashok]

@belbiy Agree with your feedback. I'd just be cautious with choosing the default focus area in a scenario like the cart where there are multiple focusable elements and there aren't traditional form fields in the same way search or checkout has. We should choose a default that causes the least friction for the user in this scenario.

[dmshm]

@belbiy, i agree with you, and i will try to implement the your points.

[sirugh]

👍