For accessibility purposes every form element should have a descriptive text label. To recreate: 1. Go to your OPAC 2. Inspect the traslControl1 field - this is the catalog search bar. 3. Note that the field has an input type, class, id, name, and a value placeholder but not a label.
Created attachment 170834 [details] [review] Bug 37758: Hide the new labels but keep them accessible To test: 1. Go to your OPAC 2. Inspect the translControl1 field - this is the catalog search bar. 3. Note that the field has an input type, class, id, name, and a value placeholder but not a label. 4. Apply this patch, restart_all, do a yarn build and clear your browser's cache. 5. Repeat step 2. 6. Note that the field now includes a descriptive label in addition to the other fields that were already visible. 7. Sign off and have an incredible day! :D
Created attachment 170835 [details] [review] Bug 37758: Add descriptive label to opac search bar Same test :D
Created attachment 170836 [details] [review] Bug 37758: Hide the new labels but keep them accessible
Created attachment 170844 [details] [review] Bug 37758: Add descriptive labels for accessibility To test: 1. Go to your OPAC 2. Inspect the translControl1 field - this is the catalog search bar. Note that the field has an input type, class, id, name, and a value placeholder but not a label. 3. Then inspect the masthead_search drop down, to the left of the catalog search bar. Note that it has a select name, id, and class but no descriptive label. 4. Apply this patch, restart_all, do a yarn build and clear your browser's cache. 5. Repeat step 2 and 3. 6. Note that the fields now include a descriptive label in addition to the other fields that were already visible. 7. Sign off and have an incredible day! :D
Created attachment 170845 [details] [review] Bug 37758: Add descriptive labels for accessibility
Created attachment 170846 [details] [review] Bug 37758: Add descriptive labels for accessibility To test: 1. Go to your OPAC 2. Inspect the translControl1 field - this is the catalog search bar. Note that the field has an input type, class, id, name, and a value placeholder but not a label. 3. Then inspect the masthead_search drop down, to the left of the catalog search bar. Note that it has a select name, id, and class but no descriptive label. 4. Apply this patch, restart_all, do a yarn build and clear your browser's cache. 5. Repeat step 2 and 3. 6. Note that the fields now include a descriptive label in addition to the other fields that were already visible. 7. Sign off and have an incredible day! :D
Created attachment 170878 [details] [review] Bug 37758: Add descriptive labels for accessibility Signed-off-by: Owen Leonard <oleonard@myacpl.org>
I obsoleted the CSS patch because a similar "visually-hidden" class is in Bootstrap 5. Please correct me if that's wrong!
Good fix, improves accessibility, passing QA. Thank you, Laura!
Created attachment 170880 [details] [review] Bug 37758: Add descriptive labels for accessibility Signed-off-by: Owen Leonard <oleonard@myacpl.org> Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Pushed for 24.11! Well done everyone, thank you!
Doesn't apply cleanly to 24.05.x. Happy to include if it is rebased for 24.05.x