Provide labels to identify all form controls, including text fields, checkboxes, radio buttons, and drop-down menus. In most cases, this is done by using the <label> element. Labels need to describe the purpose of the form control. This section of the tutorial describes how to provide labels that are properly associated with form controls. A label and a form control should be associated with each other either implicitly or explicitly. Web browsers provide the label as a larger clickable area, for example, to select or activate the control. It also ensures that assistive technology can refer to the correct label when presenting a form control. We can improve the labelling of the OPAC to provide the label as a clickable area. https://www.w3.org/WAI/tutorials/forms/labels/
Created attachment 183868 [details] [review] Bug 40330: Conform and add labels to the OPAC Test plan: Enable the system preference: marcflavour: choose UNIMAR, PrivacyPolicyConsent, ILLModule, TagsEnabled, OpacCloud. 1- Apply the patch 2- Go to the OPAC, log in to a patron account. Go to personal details, check the html code of the date of birth field, and notice that there is a aria-hidden="false". 3- Inspect the search bar, and notice in the library select, there is a label with a for attribute which match the id. 4- Search a record, click on "save to list" and check the Category select, inspect if the label has a for attribute and match the select id. 5- Go to interlibrary Loan Request in the user menu, Check if the "Note" field has a label for attribute which match the id. 6- Go to Consent, check if the checkbox has a label for "Yes" and "No". 7- Go to Suggestions and check that the checkbox has the same id as the label in the Summary column. 8- Go to "Tag Cloud", inspect the HTML code of the "Tags to show from other users" label, notice that there is a for attribute which match the id of the input tag. and check if in the html code there is an aria-label with the term of the tag. 9- Go to Subject Cloud, check the html code, and notice that there is a label that surounds the input tag. 10- Go to Advanced Search, click on "More options", and check that all the additional options have a label with a for attribute which match the id of the select.
Created attachment 183890 [details] [review] Bug 40330: Conform and add labels to the OPAC Test plan: Enable the system preference: marcflavour: choose UNIMAR, PrivacyPolicyConsent, ILLModule, TagsEnabled, OpacCloud. 1- Apply the patch 2- Go to the OPAC, log in to a patron account. Go to personal details, check the html code of the date of birth field, and notice that there is a aria-hidden="false". 3- Inspect the search bar, and notice in the library select, there is a label with a for attribute which match the id. 4- Search a record, click on "save to list" and check the Category select, inspect if the label has a for attribute and match the select id. 5- Go to interlibrary Loan Request in the user menu, Check if the "Note" field has a label for attribute which match the id. 6- Go to Consent, check if the checkbox has a label for "Yes" and "No". 7- Go to Suggestions and check that the checkbox has the same id as the label in the Summary column. 8- Go to "Tag Cloud", inspect the HTML code of the "Tags to show from other users" label, notice that there is a for attribute which match the id of the input tag. and check if in the html code there is an aria-label with the term of the tag. 9- Go to Subject Cloud, check the html code, and notice that there is a label that surounds the input tag. 10- Go to Advanced Search, click on "More options", and check that all the additional options have a label with a for attribute which match the id of the select. Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Created attachment 183999 [details] [review] Bug 40330: Conform and add labels to the OPAC Test plan: Enable the system preference: marcflavour: choose UNIMAR, PrivacyPolicyConsent, ILLModule, TagsEnabled, OpacCloud. 1- Apply the patch 2- Go to the OPAC, log in to a patron account. Go to personal details, check the html code of the date of birth field, and notice that there is a aria-hidden="false". 3- Inspect the search bar, and notice in the library select, there is a label with a for attribute which match the id. 4- Search a record, click on "save to list" and check the Category select, inspect if the label has a for attribute and match the select id. 5- Go to interlibrary Loan Request in the user menu, Check if the "Note" field has a label for attribute which match the id. 6- Go to Consent, check if the checkbox has a label for "Yes" and "No". 7- Go to Suggestions and check that the checkbox has the same id as the label in the Summary column. 8- Go to "Tag Cloud", inspect the HTML code of the "Tags to show from other users" label, notice that there is a for attribute which match the id of the input tag. and check if in the html code there is an aria-label with the term of the tag. 9- Go to Subject Cloud, check the html code, and notice that there is a label that surounds the input tag. 10- Go to Advanced Search, click on "More options", and check that all the additional options have a label with a for attribute which match the id of the select. Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Emily Lamancusa <emily.lamancusa@montgomerycountymd.gov>
Nice work everyone! Pushed to main for 25.11
Nice work everyone! Pushed to 25.05.x