Improve the accessibility of the search field

Created on 30 July 2024, 8 months ago

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).

๐Ÿ› Bug report
Status

Active

Version

2.0

Component

User experience

Created by

๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @rkoller
  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany
  • First commit to issue fork.
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia libbna New Delhi, India

    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. Needs your input on this!

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia libbna New Delhi, India
  • Merge request !580Fixed the accessibility issue of search field. โ†’ (Merged) created by libbna
  • Pipeline finished with Failed
    6 months ago
    Total: 390s
    #291123
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia libbna New Delhi, India
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia libbna New Delhi, India
  • Pipeline finished with Failed
    6 months ago
    Total: 357s
    #291308
  • Pipeline finished with Failed
    6 months ago
    Total: 430s
    #291330
  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

    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.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia libbna New Delhi, India

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

  • Pipeline finished with Failed
    6 months ago
    Total: 539s
    #291902
  • Status changed to Needs work 4 months ago
  • First commit to issue fork.
  • Pipeline finished with Failed
    4 months ago
    Total: 608s
    #332753
  • 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.

  • Pipeline finished with Failed
    4 months ago
    Total: 368s
    #332782
  • Pipeline finished with Failed
    4 months ago
    Total: 228s
    #332787
  • Pipeline finished with Failed
    4 months ago
    Total: 381s
    #332789
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States chrisfromredfin Portland, Maine

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

  • Pipeline finished with Canceled
    4 months ago
    Total: 75s
    #337165
  • Pipeline finished with Failed
    4 months ago
    Total: 433s
    #337166
  • Pipeline finished with Failed
    4 months ago
    Total: 422s
    #337211
  • Pipeline finished with Success
    4 months ago
    Total: 377s
    #337215
  • Addressed the feedbacks and modified test.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States pfrilling Minster, OH

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

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States chrisfromredfin Portland, Maine
  • Pipeline finished with Success
    4 months ago
    Total: 331s
    #340196
  • Pipeline finished with Success
    4 months ago
    Total: 928s
    #340214
  • Pipeline finished with Skipped
    4 months ago
    #340249
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States chrisfromredfin Portland, Maine

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

  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

    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.

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

Production build 0.71.5 2024