Bug 39662 - Register a new account page - X next to calendar is confusing, should use different button style
Summary: Register a new account page - X next to calendar is confusing, should use dif...
Status: Signed Off
Alias: None
Product: Koha
Classification: Unclassified
Component: Accessibility (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement
Assignee: Laura Escamilla
QA Contact: Testopia
URL: http://localhost:8080/cgi-bin/koha/op...
Keywords: Academy
Depends on:
Blocks:
 
Reported: 2025-04-17 06:48 UTC by kristinamason
Modified: 2025-09-04 18:04 UTC (History)
5 users (show)

See Also:
GIT URL:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:


Attachments
Form screenshot (2.49 KB, image/png)
2025-04-17 06:48 UTC, kristinamason
Details
Bug 39662: Updated x icon color to grey instead of red (749 bytes, patch)
2025-08-29 15:06 UTC, Laura Escamilla
Details | Diff | Splinter Review
Bug 39662: Changed X icon to a circle-x (1.69 KB, patch)
2025-08-29 15:06 UTC, Laura Escamilla
Details | Diff | Splinter Review
Bug 39662: Changed X icon to a circle-x (1.73 KB, patch)
2025-09-04 18:04 UTC, Noah Tremblay
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description kristinamason 2025-04-17 06:48:22 UTC
Created attachment 181050 [details]
Form screenshot

To reproduce: load http://localhost:8080/cgi-bin/koha/opac-memberentry.pl

Issue: 
On the "Register a new account" page, next to the calendar there is a red X. To a new user, like me, it looks like an error message. I had to ask to receive clarification that it actually clears the field. 

It would be more clear to the user if the X were styled differently to look like a button, and not red like an error. 

This issue might be present on other forms. 

I've attached an example of a button style that might be more user friendly.
Comment 1 Katrin Fischer 2025-04-17 07:43:59 UTC
The calendar widget looks indeed the same everywhere, so the red x is on all date fields. I agree that red and x might not give a clear message and I think there have been questions about it before. I am not sure if "clear" is needed, but maybe we could do better with color and symbol/icon.

Clear is nice and short in English, but in translation to German for example, it's not and that would take a lot of space in filters etc.
Comment 2 kristinamason 2025-04-17 07:56:58 UTC
Hello Katrin, thank you so much. I updated the bug text earlier to suggest exactly what you've said. I've attached a button example of what I mean.
Comment 3 Owen Leonard 2025-04-17 11:58:48 UTC
FYI you could add this to the IntranetUserCSS system preference to get what you want:

a.clear_date {
    color: #AAA;
}

a.clear_date::before {
    content: "\f057";
}
Comment 4 Laura Escamilla 2025-08-29 15:06:07 UTC
Created attachment 185935 [details] [review]
Bug 39662: Updated x icon color to grey instead of red
Comment 5 Laura Escamilla 2025-08-29 15:06:10 UTC
Created attachment 185936 [details] [review]
Bug 39662: Changed X icon to a circle-x

To test:

1. load http://localhost:8080/cgi-bin/koha/opac-memberentry.pl
2. Notice that next to the date of birth calendar there is a red X. To some users it looks like an error message.
3. Apply the patch. Do a yarn build and restart_all. Then clear your local browser cache if necessary.
4. Retry step 1.
5. Notice that the X next to the date of birth calendar is now a circle x icon. The color has also been changed to a grey. You can further test this using a WCAG contrast checker if you choose.
6. Make sure that you can add and clear dates using the new icon.
7. Sign off — have an amazing day! :D
Comment 6 Noah Tremblay 2025-09-04 18:04:37 UTC
Created attachment 186175 [details] [review]
Bug 39662: Changed X icon to a circle-x

To test:

1. load http://localhost:8080/cgi-bin/koha/opac-memberentry.pl
2. Notice that next to the date of birth calendar there is a red X. To some users it looks like an error message.
3. Apply the patch. Do a yarn build and restart_all. Then clear your local browser cache if necessary.
4. Retry step 1.
5. Notice that the X next to the date of birth calendar is now a circle x icon. The color has also been changed to a grey. You can further test this using a WCAG contrast checker if you choose.
6. Make sure that you can add and clear dates using the new icon.
7. Sign off — have an amazing day! :D

Signed-off-by: noah <noah@inlibro.com>