Bug 25166 - Add aria-hidden = "true" to Font Awesome icons in the OPAC
Summary: Add aria-hidden = "true" to Font Awesome icons in the OPAC
Status: Pushed to master
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks: 23003
  Show dependency treegraph
 
Reported: 2020-04-15 23:58 UTC by Owen Leonard
Modified: 2020-05-08 22:40 UTC (History)
2 users (show)

See Also:
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


Attachments
Bug 25166: Add "aria-hidden = true" to Font Awesome icons in the OPAC (106.83 KB, patch)
2020-04-16 00:19 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 25166: Add "aria-hidden = true" to Font Awesome icons in the OPAC (106.84 KB, patch)
2020-04-20 21:14 UTC, Bernardo Gonzalez Kriegel
Details | Diff | Splinter Review
Bug 25166: Add "aria-hidden = true" to Font Awesome icons in the OPAC (107.05 KB, patch)
2020-04-22 23:33 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 25166: (follow-up) Update icons generated in JS (2.02 KB, patch)
2020-04-23 12:08 UTC, Owen Leonard
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
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