Problem/Motivation

At the moment if you enter a search term into the search field the query is submitted without the need of pressing the return key and the search results underneath are updated accordingly. That is happening unexpected to the user, which is not in line with WCAG 2.2 SC 3.2.2 https://www.w3.org/WAI/WCAG22/Understanding/on-input.html

Steps to reproduce
  • go to /admin/modules/browse
  • enter something into the search field without pressing the return key at the end

Proposed resolution

There are two options to either inform the user upfront or adding a submit button. I would vote for the latter and apply a behavior that if you press the return key while the search field is still being active or if you press the submit button a new search is triggered (a pattern for example amazon uses).

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rkoller created an issue. See original summary.

rkoller’s picture

Issue summary: View changes

annmarysruthy made their first commit to this issue’s fork.

libbna’s picture

Hi @rkoller we have a search icon on the right side of input field, we can make that a submit button and disable the auto searching functionality, right?. Need your input on this!

libbna’s picture

Assigned: Unassigned » libbna

libbna’s picture

Status: Active » Needs work
libbna’s picture

Assigned: libbna » Unassigned
Status: Needs work » Needs review
rkoller’s picture

Status: Needs review » Needs work

Thanks for the MR @libbna! i've tested the change and functionally wise it looks good to go from my perspective. I've also checked if the touch targets are meeting the minimum requirements for the clear and submit button - and the do. i've only left a comment in regards of the button label. and someone else would have to review the changes on the code level, something i am unable to provide input on. but i'll set the issue back to needs work for the button label and for the failing tests.

libbna’s picture

Thank you @rkoller for the review. I have updated the button label and class name as you've suggested.

utkarsh_33 made their first commit to this issue’s fork.

utkarsh_33’s picture

Status: Needs work » Needs review

Fixed the failing nightwatch tests and merged the latest changes from 2.0.x.The failing test is not related to the changes in the MR , so marking it NR.

chrisfromredfin’s picture

Status: Needs review » Needs work

Only one small comment on the MR - we don't need to debounce any more since we're not responding on keyup events.

utkarsh_33’s picture

Status: Needs work » Needs review

Addressed the feedbacks and modified test.

pfrilling’s picture

Status: Needs review » Reviewed & tested by the community
Issue tags: +#nedcamp2024

The code looks good to me. All the MR feedback looks to have been addressed.

chrisfromredfin’s picture

Issue tags: +core-mvp, +beta blocker

chrisfromredfin’s picture

Status: Reviewed & tested by the community » Fixed

Reviewed, manually tested, rebased, tests are passing (after a re-test of ye ole flaky testMultiplePlugins)... good to go!

rkoller’s picture

thank you! i'Ve just realized right now how many issues when testing stemmed from project browser immediately querying the d.o servers after a second or two of not typing. now requiring the press or click of the return key make things way more controllable and also less overwhelming.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.