Bug 39271 - Remove size attribute from input tags in the OPAC
Summary: Remove size attribute from input tags in the OPAC
Status: ASSIGNED
Alias: None
Product: Koha
Classification: Unclassified
Component: Accessibility (show other bugs)
Version: unspecified
Hardware: All All
: P5 - low enhancement
Assignee: Nina Martinez
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks: 23003
  Show dependency treegraph
 
Reported: 2025-03-07 09:23 UTC by Nina Martinez
Modified: 2025-04-29 17:12 UTC (History)
7 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
Bug 39271: Replace the size attributes of the input tags with styles in the CSS page. (4.93 KB, patch)
2025-03-10 15:17 UTC, Nina Martinez
Details | Diff | Splinter Review
Remove the input size attributes and replace it with css style (43.72 KB, patch)
2025-03-25 15:26 UTC, Nina Martinez
Details | Diff | Splinter Review
Bug 39271: Remove the input size attributes and replace it with css style (47.04 KB, patch)
2025-04-02 15:58 UTC, Nina Martinez
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Nina Martinez 2025-03-07 09:23:52 UTC
Assistive technologies can substitute or extend the CSS to modify presentation, or ignore the CSS and interact directly with the structural encoding. Presentation attributes should not be used in tags, such as size in the input tag. 

https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html
Comment 1 Nina Martinez 2025-03-10 15:17:34 UTC Comment hidden (obsolete)
Comment 2 Owen Leonard 2025-03-10 16:29:44 UTC
I'm not seeing where accessibility guidelines say that input "size" attributes are an accessibility problem. Could you point to some additional documentation?
Comment 3 Nina Martinez 2025-03-11 10:27:48 UTC
Here is some additional documentation on the RGAA. The RGAA is the French equivalent of the WCAG.

Translation of the important information : 

https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10

10.1.2 

In each web page, presentation attributes should not be present in the generated source code of the page. 

Methodology : 

 1 - Verify the absence of presentation attributes : align, alink, background, bgcolor, border, cellpadding, cellspacing, char, charoff, clear, color, compact, frameborder, hspace, link, marginheight, marginwidth, text, valign, vlink, vspace, size(exception of the element <select>), width (exception of the element <img>, <object>, <embed>, <canvas> and <svg>), height (exception of the element <img>, <object>, <embed>, <canvas> and <svg>) ;

2 - If this is the case, the test is validated. 

https://accessibilite.numerique.gouv.fr/methode/glossaire/#presentation-de-l-information

Information presentation. 

Visual rendering of content via a browser in graphical mode. The presentation concerns the style, the position and the dimension of HTML elements and their content. The presentation information should be done with CSS. The element   basefont, big, blink, center, font, marquee, s, strike and tt) and the attributes (align, alink, background, bgcolor, border, cellpadding, cellspacing, char, charoff, clear, compact, color, frameborder, hspace, link, marginheight, marginwidth, text, valign, vlink, vspace) are prohibited. 

 Notes : 

- The width and height attributes used on elements other than <img>, <object>, <embed>, <canvas> and <svg> are prohibited. 
- The size attribute used on elements other than <select> is also prohibited. 
- The <u> element is prohibited only if the document doctype does not correspond to HTML 5.
Comment 4 Nina Martinez 2025-03-25 15:26:32 UTC Comment hidden (obsolete)
Comment 5 Nina Martinez 2025-03-25 15:30:14 UTC Comment hidden (obsolete)
Comment 6 Nina Martinez 2025-04-01 11:41:08 UTC
(In reply to nina from comment #5)
> (In reply to nina from comment #4)
> > Created attachment 179685 [details] [review] [review] [review]
> > Remove the input size attributes and replace it with css  style
> 
> Test plan :
> 
> 1- Verify that there are no size attributes in the input tags on the opac
> pages : 
> 2- Verify that the input design is still coherent
> 3- if that is the case, the test succeeds

update Test plan :
 
 1- Verify that there are no size attributes in the input tags on the opac
 pages and Verify that the input design is still coherent

. Apply patch and restart_all
. Click 'Log in to your account’ and click on log in without completing the authentication (opac-auth)
. Click on “log in to your account” and “Forgot your password” (opac-password-recovery) (syspref : OpacResetPassword)
. Log in (if you're not already logged in, if you already are, go to Your account) (opac-user)
. Click 'Add to your lists' (opac-addbybiblionumber)
. Click on 'Advanced search' (opac-advsearch)
. Click on the 'Personal details' tab (opac-memberentry)
. Click on the 'Change password' tab (opac-passwd)
. Click 'Place recall' (opac-recall) (syspref : UseRecalls)
. Click 'Request article' (opac-request-article) (syspref : ArticleRequests)
. Make a search that will return several results 
. Click on a title to access the detailed record 
. Click 'Place hold' (opac-reserve)
. Click 'Add to your cart'
. Click 'Cart' at the top of the page 
. Click 'Send' (opac-sendbasketform)
. Click on the list name
. Click 'Send list' (opac-sendshelfform)

. Click on ‘List’ and on ‘share’  present on a list (if you don’t have a list, create one)
(syspref : OpacAllowSharingPrivateLists) (opac-shareshelf)
. Click on the 'Purchase suggestions' tab (opac-suggestions)
. Click on the 'Tags' tab (opac-tags)
.Click on ‘ Subject cloud ’ (opac-tags_subject) (syspref :  OpacCloud )
.Click on ‘ Create an account’ and create a new account (opac-registration-confirmation) (syspref : PatronSelfRegistration )

- opac-reset-password page


 2- if that is the case, the test succeed
Comment 7 Andrew Auld 2025-04-01 14:47:29 UTC
As discussed, some more guidance is needed in the test plan on what attributes your patch actually fixes on each page where you have made a change. This will make it easier to identify and test that the changes have been successfully implemented by the patch, before and after applying it.
Comment 8 Nina Martinez 2025-04-02 15:58:20 UTC
Created attachment 180420 [details] [review]
Bug 39271:  Remove the input size attributes and replace it with css style

	Test plan :

 	1- Verify that there are no size attributes in the input tags on the opac
 	pages and Verify that the input design is still coherent

	. Apply patch and restart_all
	. Click 'Log in to your account' and click on log in without completing the authentication (opac-auth) ( input tag label, 'Card number or username:' and 'Password:' )

	. Click on 'log in to your account' and 'Forgot your password' (opac-password-recovery) (syspref : OpacResetPassword)
(input tag name, 'Card number or username:' , 'Email:',  'New password'  and 'Confirm new password:' )

	.Click on  'Create an account' and create a new account (opac-registration-confirmation) (syspref : PatronSelfRegistration ) (input tag name, 'Card number or username:'  and ' Password:' )

	. Log in to your account

	. Click on the 'Personal details' tab (opac-memberentry) (input tag name, all the 'Street number:', 'Library card number:' and 'Date of birth', ')

	. Click on the 'Change password' tab (opac-passwd)(input tag name, 'Current password:', 'New password:' and 'Re-type new password:')

	. Click on 'Advanced search' (opac-advsearch)(input tag name, 'Publication date range:' )

	. Make a search that will return results
	. Click on a title to access the detailed record
	. Click 'Place hold' and show more options (opac-reserve)(input tag name, 'Hold starts on date:' and 'Hold not needed after:' ) (syspref : AllowHoldDateInFuture and OPACAllowHoldDateInFuture)

	. Enable the UseRecalls system preference
	. Check out an item to Patron B. (create another Patron, search a record, go to staff interface and check out this item)
	. Log into the OPAC as Patron A (your account ) and search for the item.
	. Click 'Place recall' (opac-recall) (input tag name, 'Recall not needed after :' )

	. Click on 'Request article' (opac-request-article) (syspref : ArticleRequests)(input tag name, 'Title:', 'Author:', 'Volume', 'Issue', 'Date', 'Pages', 'Chapters' and 'Notes' )

	. Click  on 'Add to your cart'

	. Click 'Add to your lists' (if you don't have a list, create one) (opac-addbybiblionumber)(input tag name, 'List name:' )
	. Click on 'Lists'
	. Click on the list name
	. Click 'Send list' (opac-sendshelfform) (input tag name, 'Email address :' )

	. Click on 'List', 'Your lists' and on 'share'  (if you don't have a list, create one)
	(syspref : OpacAllowSharingPrivateLists) (opac-shareshelf) (input tag name, 'Email address :' )

	. Click 'Cart' at the top of the page
	. Click 'Send' (opac-sendbasketform)(input tag name, 'Email address :' )

	. Log in, if you're not already logged in and if you already are, go to Your account. After that go to 'Holds' section (if you don't have it, you have to search a record and click on 'place hold' ) (opac-user) (input tag name, 'Suspend until:' )

	. Click on the 'Purchase suggestions' tab and 'New purchase suggestion' (syspref : suggestion )(opac-suggestions)(input tag name, 'Standard number (ISBN, ISSN or other):', 'Publication year:',  'Quantity:' and 'Search for:')

	. Click on the 'Tags' tab (opac-tags) (syspref : TagsEnabled ) (input tag name, 'Tag to show from other users: 'if you are logged in and 'Tags to show:' if you are not )

	.Click on 'Subject cloud' (opac-tags_subject) (syspref :  OpacCloud )(input tag name, 'up to' )

	. opac-reset-password page (input tag name : 'Card number or username:', 'Current password:', 'New password:' and 'Confirm new password:')

 	2- if that is the case, the test succeeds