Bug 25166

Summary: Add aria-hidden = "true" to Font Awesome icons in the OPAC
Product: Koha Reporter: Owen Leonard <oleonard>
Component: OPACAssignee: Owen Leonard <oleonard>
Status: Pushed to master --- QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: jonathan.druart, joy
Version: master   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Medium patch
Who signed the patch off: Text to go in the release notes:
Version(s) released in:
20.05.00
Bug Depends on:    
Bug Blocks: 23003    
Attachments: Bug 25166: Add "aria-hidden = true" to Font Awesome icons in the OPAC
Bug 25166: Add "aria-hidden = true" to Font Awesome icons in the OPAC
Bug 25166: Add "aria-hidden = true" to Font Awesome icons in the OPAC
Bug 25166: (follow-up) Update icons generated in JS

Description Owen Leonard 2020-04-15 23:58:09 UTC
Font Awesome's accessibility guidelines (https://fontawesome.com/v4.7.0/accessibility/) suggest that we include 'aria-hidden="true"' in the icon markup.
Comment 1 Owen Leonard 2020-04-16 00:19:39 UTC
Created attachment 103055 [details] [review]
Bug 25166: Add "aria-hidden = true" to Font Awesome icons in the OPAC

Font Awesome's accessibility guidelines
(https://fontawesome.com/v4.7.0/accessibility/) suggest that we include
'aria-hidden="true"' in the icon markup. This prevents screen
readers from trying to read the icon. This patch adds the attribute.

To test apply the patch and browse the OPAC looking for any problems
with icons: On search results, bibliographic details page, the cart,
lists, etc.

Check the source and verify that Font Awesome icons have the
"aria-hidden" attribute.
Comment 2 Bernardo Gonzalez Kriegel 2020-04-20 21:14:22 UTC
Created attachment 103316 [details] [review]
Bug 25166: Add "aria-hidden = true" to Font Awesome icons in the OPAC

Font Awesome's accessibility guidelines
(https://fontawesome.com/v4.7.0/accessibility/) suggest that we include
'aria-hidden="true"' in the icon markup. This prevents screen
readers from trying to read the icon. This patch adds the attribute.

To test apply the patch and browse the OPAC looking for any problems
with icons: On search results, bibliographic details page, the cart,
lists, etc.

Check the source and verify that Font Awesome icons have the
"aria-hidden" attribute.

Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com>
Attribute present, all looks good. The 'aria-label' attribute is
not translatable, but it's another problem.
Comment 3 Katrin Fischer 2020-04-22 23:33:47 UTC
Created attachment 103524 [details] [review]
Bug 25166: Add "aria-hidden = true" to Font Awesome icons in the OPAC

Font Awesome's accessibility guidelines
(https://fontawesome.com/v4.7.0/accessibility/) suggest that we include
'aria-hidden="true"' in the icon markup. This prevents screen
readers from trying to read the icon. This patch adds the attribute.

To test apply the patch and browse the OPAC looking for any problems
with icons: On search results, bibliographic details page, the cart,
lists, etc.

Check the source and verify that Font Awesome icons have the
"aria-hidden" attribute.

Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com>
Attribute present, all looks good. The 'aria-label' attribute is
not translatable, but it's another problem.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 4 Katrin Fischer 2020-04-22 23:35:06 UTC
I tihnk it would be good to have a check in the QA tools and some information in the coding guidelines/styple page for this.
Comment 5 Jonathan Druart 2020-04-23 08:52:28 UTC
% git grep '<i class="fa' koha-tmpl/opac-tmpl/|grep -v aria-hidden

koha-tmpl/opac-tmpl/bootstrap/js/global.js:                        <a href="#" id="bootstrap-confirm-box-modal-submit" class="btn btn-danger"><i class="fa fa-check"></i></a>\
koha-tmpl/opac-tmpl/bootstrap/js/global.js:                        <a href="#" id="bootstrap-confirm-box-modal-cancel" data-dismiss="modal" class="btn btn-default"><i class="fa fa-remove"></i></a>\

Are not they valid?
Comment 6 Katrin Fischer 2020-04-23 10:27:28 UTC
I think they are - probably added after Owen wrote this? (or missed...)

Is a check in QA tools doable?
Comment 7 Jonathan Druart 2020-04-23 10:38:37 UTC
There is that regex I should improve to have a single one (no grep -v), so yes it can be added. But I wanted to know if it caught false positives (the 2 output lines) or not.
Comment 8 Owen Leonard 2020-04-23 12:08:32 UTC
Created attachment 103587 [details] [review]
Bug 25166: (follow-up) Update icons generated in JS

This patch adds aria attributes to Font Awesome icons generated by
JavaScript. The icons won't appear under normal circumstances because
the code for displaying the modal dialog should replace the icons with a
text label. The icons are a fallback.
Comment 10 Jonathan Druart 2020-04-23 13:48:22 UTC
(In reply to Jonathan Druart from comment #9)
> https://gitlab.com/koha-community/qa-test-tools/-/issues/31

This will only handle template files (.tt and .inc)
Comment 11 Martin Renvoize 2020-04-29 16:36:15 UTC
Nice work everyone!

Pushed to master for 20.05
Comment 12 Joy Nelson 2020-05-08 22:40:26 UTC
enhancement not backported to 19.11