Bug 39662

Summary: Register a new account page - X next to calendar is confusing, should use different button style
Product: Koha Reporter: kristinamason
Component: AccessibilityAssignee: Laura Escamilla <Laura.escamilla>
Status: Signed Off --- QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: dcook, Laura.escamilla, martin.renvoize, matt.blenkinsop, oleonard
Version: MainKeywords: Academy
Hardware: All   
OS: All   
URL: http://localhost:8080/cgi-bin/koha/opac-memberentry.pl
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
Bug 39662: Updated x icon color to grey instead of red
Bug 39662: Changed X icon to a circle-x
Bug 39662: Changed X icon to a circle-x

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>