[Bug 43158] New: Add clear button (x) to search input fields
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43158 Bug ID: 43158 Summary: Add clear button (x) to search input fields Initiative type: --- Sponsorship --- status: Product: Koha Version: Main Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: OPAC Assignee: oleonard@myacpl.org Reporter: tomascohen@gmail.com QA Contact: testopia@bugs.koha-community.org Target Milestone: --- Add a clear/reset button (x icon) on the search input fields that appears when text has been typed, allowing users to quickly clear the search box without manually selecting and deleting the text. Start with the OPAC search input, then extend to the staff interface. This is a common UX pattern in modern web applications (browsers natively support it for type=search inputs, but Koha uses type=text). Implementation options: - Use HTML5 type=search which provides a native clear button in most browsers - Or add a positioned x icon via CSS/JS that clears the input on click The native type=search approach is simpler and more accessible. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43158 --- Comment #1 from Owen Leonard <oleonard@myacpl.org> --- FYI Firefox you have to change the 'layout.forms.input-type-search.enabled' setting in about:config to enable the clear button. There's a six year old bug open for enabling it by default: https://bugzilla.mozilla.org/show_bug.cgi?id=1654288. That's not to say that switching to 'type=search' wouldn't be a bad idea. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43158 --- Comment #2 from Owen Leonard <oleonard@myacpl.org> --- See Bug 33668 to see us struggle to add a clear button with CSS -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43158 --- Comment #3 from Tomás Cohen Arazi (tcohen) <tomascohen@gmail.com> --- Created attachment 202517 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=202517&action=edit Bug 43158: Add clear button to OPAC catalog search input Adds a clear (x) button inside the OPAC masthead search input that appears when text is present, allowing users to quickly clear the search box. The native HTML5 type=search clear button is not supported in Firefox, so a cross-browser JS+CSS approach is used instead: - JS wraps the input and appends a positioned clear button - Button shows/hides based on input content - Clicking clears the input and refocuses it - CSS positions the button inside the input field - Works consistently in Firefox, Chrome, and Safari Test plan: 1. Apply patch 2. Run: $ ktd --name bug_43158 --proxy up -d $ ktd --name bug_43158 --wait-ready 120 $ ktd --name bug_43158 --shell k$ npm run css:build && koha-plack --restart kohadev 3. Navigate to the OPAC 4. Type something in the search box => SUCCESS: clear (x) button appears on the right side 5. Click it => SUCCESS: input is cleared and refocused 6. Verify button is hidden when input is empty 7. Test in Firefox and Chrome 8. Sign off :-D Assisted-by: Sonnet 4 (Anthropic) -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43158 Tomás Cohen Arazi (tcohen) <tomascohen@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |tomascohen@gmail.com --- Comment #4 from Tomás Cohen Arazi (tcohen) <tomascohen@gmail.com> --- @oleonard this is similar to what was done on bug 33668. Dropping it here in case it serves a a basis. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43158 Tomás Cohen Arazi (tcohen) <tomascohen@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|oleonard@myacpl.org |tomascohen@gmail.com Status|NEW |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43158 Tomás Cohen Arazi (tcohen) <tomascohen@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Summary|Add clear button (x) to |Add clear button (x) to |search input fields |OPAC search input -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43158 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43158 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #202517|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43158 --- Comment #5 from David Nind <david@davidnind.com> --- Created attachment 203124 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=203124&action=edit Bug 43158: Add clear button to OPAC catalog search input Adds a clear (x) button inside the OPAC masthead search input that appears when text is present, allowing users to quickly clear the search box. The native HTML5 type=search clear button is not supported in Firefox, so a cross-browser JS+CSS approach is used instead: - JS wraps the input and appends a positioned clear button - Button shows/hides based on input content - Clicking clears the input and refocuses it - CSS positions the button inside the input field - Works consistently in Firefox, Chrome, and Safari Test plan: 1. Apply patch 2. Run: $ ktd --name bug_43158 --proxy up -d $ ktd --name bug_43158 --wait-ready 120 $ ktd --name bug_43158 --shell k$ npm run css:build && koha-plack --restart kohadev 3. Navigate to the OPAC 4. Type something in the search box => SUCCESS: clear (x) button appears on the right side 5. Click it => SUCCESS: input is cleared and refocused 6. Verify button is hidden when input is empty 7. Test in Firefox and Chrome 8. Sign off :-D Assisted-by: Sonnet 4 (Anthropic) Signed-off-by: David Nind <david@davidnind.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43158 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |david@davidnind.com See Also| |https://bugs.koha-community | |.org/bugzilla3/show_bug.cgi | |?id=33668 --- Comment #6 from David Nind <david@davidnind.com> --- I've signed off. However, the "x" isn't keyboard navigable (pressing tab keys) which may make it an accessibility issue. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43158 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |martin.renvoize@openfifth.c | |o.uk --- Comment #7 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- (In reply to David Nind from comment #6)
I've signed off.
However, the "x" isn't keyboard navigable (pressing tab keys) which may make it an accessibility issue.
I am not sure about this point tbh - we currently don't have a coding guideline for accessibility in general (working on that), but I am also not sure if it would be a strict requirement. Tagging Martin - maybe he has some insight from the audit work. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43158 Jonathan Druart <jonathan.druart@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |jonathan.druart@gmail.com --- Comment #8 from Jonathan Druart <jonathan.druart@gmail.com> --- (In reply to David Nind from comment #6)
I've signed off.
However, the "x" isn't keyboard navigable (pressing tab keys) which may make it an accessibility issue.
This is working on what Owen and I implemented on bug 38185 for DataTables. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43158 Jonathan Druart <jonathan.druart@gmail.com> changed: What |Removed |Added ---------------------------------------------------------------------------- See Also| |https://bugs.koha-community | |.org/bugzilla3/show_bug.cgi | |?id=42925 Status|Signed Off |Failed QA --- Comment #9 from Jonathan Druart <jonathan.druart@gmail.com> --- It's actually bug 42925. -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org