Tools -> Patron card creator -> Edit layout: A few pairs of radio buttons have duplicate labels: <li> <label for="page_side">Page side: </label> <input type="radio" name="page_side" id="page_side" value="F">Front <input type="radio" name="page_side" id="page_side" value="B" checked="checked">Back </li> It would be better for the "Page side" label to have no "for" attribute and for "Front" and "Back" to be labels.
Created attachment 184253 [details] [review] BUG: 35237 Duplicate ids in markup of patron card form updated to have unique IDs. Test plan: 1. Head to 'tool's then 'patronn card creator' 2. Click on 'Layouts' underneath 'Manage' 3. Click on 'Edit' 4. Inspect the page and check that the ids for Page side are unique.
Created attachment 184421 [details] [review] Bug 35237: Give patron card layout form elements unique IDs This patch ensures the following patron card layout form fields use unique IDs: - page side - guide box - guide grid This semantically links the options to their labels so is more accessible for screen readers and keyboard navigation. The patch also adds a 'default' option to the original labels so they can become useful elements on the form rather than just text labels. Test plan: 1. Head to 'tools' then 'patron card creator' 2. Click on 'Layouts' underneath 'Manage' 3. Click on 'Edit' 4. Confirm it's easy to tell which options are available and chosen for page side, guide box, and guide grid 5. Click on the text labels for the options i.e. front, back, on, off. Confirm the relevant radio button is selected Sponsored-by: Catalyst IT
Created attachment 186246 [details] [review] Bug 35237: Give patron card layout form elements unique IDs This patch ensures the following patron card layout form fields use unique IDs: - page side - guide box - guide grid This semantically links the options to their labels so is more accessible for screen readers and keyboard navigation. The patch also adds a 'default' option to the original labels so they can become useful elements on the form rather than just text labels. Test plan: 1. Head to 'tools' then 'patron card creator' 2. Click on 'Layouts' underneath 'Manage' 3. Click on 'Edit' 4. Confirm it's easy to tell which options are available and chosen for page side, guide box, and guide grid 5. Click on the text labels for the options i.e. front, back, on, off. Confirm the relevant radio button is selected Sponsored-by: Catalyst IT Signed-off-by: noah <noah@inlibro.com>
Owen, can you confirm it's the our preferred styling for radio buttons? Before: https://snipboard.io/CgRw6D.jpg After: https://snipboard.io/josfAn.jpg I don't think the label's values should be bold.
- <label for="page_side">Page side: </label> + <label for="page_side_front">Page side: </label> Not sure about this change. Why front here? + <label for="page_side_front">Front: <input type="radio" name="page_side" id="page_side_front" value="F" /></label> Why include the input in the label ? Please explain.
Created attachment 191736 [details] [review] Bug 35237: Changed labels above checkbox on the edit layout page. Clarified the for attribute for the original labels of the checkboxes. Test plan: 1. Head to 'tools' then 'patron card creator' 2. Click on 'Layouts' underneath 'Manage' 3. Click on 'Edit' 4. Confirm it's easy to tell which options are available and chosen for page side, guide box, and guide grid 5. Inspect the page, look at and confirm the original labels have been renamed for page size, guide box, guide grid Sponsored-by: Catalyst IT
(In reply to Marcel de Rooy from comment #5) > - <label for="page_side">Page side: > </label> > + <label for="page_side_front">Page > side: </label> > Not sure about this change. Why front here? > > + <label > for="page_side_front">Front: <input type="radio" name="page_side" > id="page_side_front" value="F" /></label> > Why include the input in the label ? > > Please explain. In response to your first comment we have changed the labels for page side, guide box, guide grid. In response to second comment about inputs in labels we have noticed this formatting is elsewhere in koha for example see below: koha-tmpl/intranet-tmpl/prog/en/modules/tools/inventory.tt: <label><input type="radio" name="branch" value="homebranch" /> Home library</label>
Created attachment 191806 [details] [review] Bug 35237: Give patron card layout form elements unique IDs This patch ensures the following patron card layout form fields use unique IDs: - page side - guide box - guide grid This semantically links the options to their labels so is more accessible for screen readers and keyboard navigation. The patch also adds a 'default' option to the original labels so they can become useful elements on the form rather than just text labels. Test plan: 1. Head to 'tools' then 'patron card creator' 2. Click on 'Layouts' underneath 'Manage' 3. Click on 'Edit' 4. Confirm it's easy to tell which options are available and chosen for page side, guide box, and guide grid 5. Click on the text labels for the options i.e. front, back, on, off. Confirm the relevant radio button is selected Sponsored-by: Catalyst IT Signed-off-by: noah <noah@inlibro.com> Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Created attachment 191807 [details] [review] Bug 35237: Changed labels above checkbox on the edit layout page. Clarified the for attribute for the original labels of the checkboxes. Test plan: 1. Head to 'tools' then 'patron card creator' 2. Click on 'Layouts' underneath 'Manage' 3. Click on 'Edit' 4. Confirm it's easy to tell which options are available and chosen for page side, guide box, and guide grid 5. Inspect the page, look at and confirm the original labels have been renamed for page size, guide box, guide grid Sponsored-by: Catalyst IT Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Created attachment 191808 [details] [review] Bug 35237: (QA follow-up) Set label for attribute to first radio input Labels with a "for" attribute should reference an existing input, so we should keep the "Page side," "Guide box," and "Guide grid" for attribute pointing to the first corresponding radio input in that row. Signed-off-by: Owen Leonard <oleonard@myacpl.org>