Font Awesome's accessibility guidelines (https://fontawesome.com/v4.7.0/accessibility/) suggest that we include 'aria-hidden="true"' in the icon markup.
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.
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.
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>
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.
% 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?
I think they are - probably added after Owen wrote this? (or missed...) Is a check in QA tools doable?
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.
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.
https://gitlab.com/koha-community/qa-test-tools/-/issues/31
(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)
Nice work everyone! Pushed to master for 20.05
enhancement not backported to 19.11