Bug 27846 - Accessibility: Staff Client - Breadcrumbs should be more accessible
Summary: Accessibility: Staff Client - Breadcrumbs should be more accessible
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Staff interface (show other bugs)
Version: unspecified
Hardware: All All
: P5 - low enhancement (vote)
Assignee: wainuiwitikapark
QA Contact: Martin Renvoize
URL:
Keywords:
Depends on:
Blocks: 28033 28035 28036 28037 28041 28601 31724
  Show dependency treegraph
 
Reported: 2021-03-03 03:43 UTC by wainuiwitikapark
Modified: 2023-06-08 22:26 UTC (History)
6 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Large patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
21.05.00


Attachments
Bug 27846: changed scss for breadcrumbs (1.39 KB, patch)
2021-03-10 03:24 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: modules and modules/acqui folders (43.88 KB, patch)
2021-03-22 06:46 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: admin folder (113.69 KB, patch)
2021-03-22 07:41 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: authorities, catalogue and cataloguing folders (31.46 KB, patch)
2021-03-22 07:55 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: circ folder (25.01 KB, patch)
2021-03-22 08:01 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: clubs, course_reserves, errors and ill folders (19.16 KB, patch)
2021-03-22 08:16 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: labels folder (14.74 KB, patch)
2021-03-22 21:57 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: labels folder (14.74 KB, patch)
2021-03-22 22:00 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: members folder (35.46 KB, patch)
2021-03-22 22:14 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: modules and modules/acqui folders (43.90 KB, patch)
2021-03-22 23:12 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: modules and modules/acqui folders (43.88 KB, patch)
2021-03-22 23:25 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: admin folder (113.70 KB, patch)
2021-03-22 23:39 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: authorities, catalogue and cataloguing folders (31.47 KB, patch)
2021-03-22 23:51 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: circ folder (25.03 KB, patch)
2021-03-23 01:09 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: clubs, course_reserves, errors and ill folders (19.18 KB, patch)
2021-03-23 01:18 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: labels folder (14.74 KB, patch)
2021-03-23 01:20 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: members folder (35.46 KB, patch)
2021-03-23 01:26 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: offline_circ, patroncards, patron_lists, plugins and pos (27.36 KB, patch)
2021-03-23 01:31 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: reports, reserve and reviews folders (36.49 KB, patch)
2021-03-23 01:38 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: rotating_collections, serials, suggestion and tags folders (33.38 KB, patch)
2021-03-23 01:52 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: tools and virtualshelves folders (53.23 KB, patch)
2021-03-23 02:01 UTC, wainuiwitikapark
Details | Diff | Splinter Review
Bug 27846: changed scss for breadcrumbs (1.44 KB, patch)
2021-03-24 11:28 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: modules and modules/acqui folders (43.95 KB, patch)
2021-03-24 11:28 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: admin folder (113.77 KB, patch)
2021-03-24 11:28 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: authorities, catalogue and cataloguing folders (31.54 KB, patch)
2021-03-24 11:28 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: circ folder (25.09 KB, patch)
2021-03-24 11:28 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: clubs, course_reserves, errors and ill folders (19.25 KB, patch)
2021-03-24 11:28 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: labels folder (14.80 KB, patch)
2021-03-24 11:28 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: members folder (35.51 KB, patch)
2021-03-24 11:29 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: offline_circ, patroncards, patron_lists, plugins and pos (27.38 KB, patch)
2021-03-24 11:29 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: reports, reserve and reviews folders (36.56 KB, patch)
2021-03-24 11:29 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: rotating_collections, serials, suggestion and tags folders (33.44 KB, patch)
2021-03-24 11:29 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: tools and virtualshelves folders (53.29 KB, patch)
2021-03-24 11:29 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: (follow-up) Markup corrections (3.51 KB, patch)
2021-03-24 11:29 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: (follow-up) Use SCSS-style nesting for style additions (2.42 KB, patch)
2021-03-24 11:29 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: (follow-up) Indentation corrections (43.00 KB, patch)
2021-03-24 11:29 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: (follow-up) Add id back to breadcrumbs container (179.83 KB, patch)
2021-03-24 11:29 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: (follow-up) Use SCSS-style nesting for style additions (2.40 KB, patch)
2021-03-24 12:13 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: (follow-up) Indentation corrections (43.00 KB, patch)
2021-03-24 12:13 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: (follow-up) Add id back to breadcrumbs container (179.83 KB, patch)
2021-03-24 12:13 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: changed scss for breadcrumbs (1.50 KB, patch)
2021-03-24 13:39 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27846: modules and modules/acqui folders (43.82 KB, patch)
2021-03-24 13:39 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27846: admin folder (113.52 KB, patch)
2021-03-24 13:39 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27846: authorities, catalogue and cataloguing folders (31.44 KB, patch)
2021-03-24 13:39 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27846: circ folder (25.02 KB, patch)
2021-03-24 13:39 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27846: clubs, course_reserves, errors and ill folders (19.21 KB, patch)
2021-03-24 13:39 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27846: labels folder (14.81 KB, patch)
2021-03-24 13:39 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27846: members folder (35.42 KB, patch)
2021-03-24 13:39 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27846: offline_circ, patroncards, patron_lists, plugins and pos (27.32 KB, patch)
2021-03-24 13:39 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27846: reports, reserve and reviews folders (36.51 KB, patch)
2021-03-24 13:39 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27846: rotating_collections, serials, suggestion and tags folders (33.37 KB, patch)
2021-03-24 13:39 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27846: tools and virtualshelves folders (53.17 KB, patch)
2021-03-24 13:40 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27846: (follow-up) Markup corrections (3.57 KB, patch)
2021-03-24 13:40 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27846: (follow-up) Use SCSS-style nesting for style additions (2.46 KB, patch)
2021-03-24 13:40 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27846: (follow-up) Indentation corrections (42.96 KB, patch)
2021-03-24 13:40 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27846: (follow-up) Add id back to breadcrumbs container (177.80 KB, patch)
2021-03-24 13:40 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27846: (QA follow-up) Apply changes to transfers_to_send (1.58 KB, patch)
2021-03-24 13:40 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27846: (follow-up) Restore `>` symbol (1.38 KB, patch)
2021-03-24 13:40 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 27846: (follow-up) Use background SVG for breadcrumb dividers (1.49 KB, patch)
2021-03-24 17:42 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27846: (follow-up) Use background SVG for breadcrumb dividers (1.55 KB, patch)
2021-03-25 09:18 UTC, Martin Renvoize
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description wainuiwitikapark 2021-03-03 03:43:09 UTC
Breadcrumbs should adhere to the guidelines in https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html i.e. be a <nav aria label="Breadcrumb" class="breadcrumb"> with an ordered list inside, with appropriate styling to make it appear as breadcrumbs. It should also have aria-current="page" to specify where the current page is.
Comment 1 wainuiwitikapark 2021-03-10 03:24:33 UTC Comment hidden (obsolete)
Comment 2 wainuiwitikapark 2021-03-22 06:46:11 UTC Comment hidden (obsolete)
Comment 3 wainuiwitikapark 2021-03-22 07:41:23 UTC Comment hidden (obsolete)
Comment 4 wainuiwitikapark 2021-03-22 07:55:50 UTC Comment hidden (obsolete)
Comment 5 wainuiwitikapark 2021-03-22 08:01:51 UTC Comment hidden (obsolete)
Comment 6 wainuiwitikapark 2021-03-22 08:16:06 UTC Comment hidden (obsolete)
Comment 7 wainuiwitikapark 2021-03-22 21:50:26 UTC
Please remember to also build the scss file before testing these patches
Comment 8 wainuiwitikapark 2021-03-22 21:57:29 UTC Comment hidden (obsolete)
Comment 9 wainuiwitikapark 2021-03-22 22:00:13 UTC Comment hidden (obsolete)
Comment 10 wainuiwitikapark 2021-03-22 22:14:13 UTC Comment hidden (obsolete)
Comment 11 wainuiwitikapark 2021-03-22 23:12:09 UTC Comment hidden (obsolete)
Comment 12 wainuiwitikapark 2021-03-22 23:25:08 UTC Comment hidden (obsolete)
Comment 13 wainuiwitikapark 2021-03-22 23:39:45 UTC Comment hidden (obsolete)
Comment 14 wainuiwitikapark 2021-03-22 23:51:16 UTC Comment hidden (obsolete)
Comment 15 wainuiwitikapark 2021-03-23 01:09:50 UTC Comment hidden (obsolete)
Comment 16 wainuiwitikapark 2021-03-23 01:18:10 UTC Comment hidden (obsolete)
Comment 17 wainuiwitikapark 2021-03-23 01:20:11 UTC Comment hidden (obsolete)
Comment 18 wainuiwitikapark 2021-03-23 01:26:29 UTC Comment hidden (obsolete)
Comment 19 wainuiwitikapark 2021-03-23 01:31:26 UTC Comment hidden (obsolete)
Comment 20 wainuiwitikapark 2021-03-23 01:38:39 UTC Comment hidden (obsolete)
Comment 21 wainuiwitikapark 2021-03-23 01:52:28 UTC Comment hidden (obsolete)
Comment 22 wainuiwitikapark 2021-03-23 02:01:09 UTC Comment hidden (obsolete)
Comment 23 Owen Leonard 2021-03-24 11:28:38 UTC Comment hidden (obsolete)
Comment 24 Owen Leonard 2021-03-24 11:28:41 UTC Comment hidden (obsolete)
Comment 25 Owen Leonard 2021-03-24 11:28:45 UTC Comment hidden (obsolete)
Comment 26 Owen Leonard 2021-03-24 11:28:49 UTC Comment hidden (obsolete)
Comment 27 Owen Leonard 2021-03-24 11:28:52 UTC Comment hidden (obsolete)
Comment 28 Owen Leonard 2021-03-24 11:28:55 UTC Comment hidden (obsolete)
Comment 29 Owen Leonard 2021-03-24 11:28:59 UTC Comment hidden (obsolete)
Comment 30 Owen Leonard 2021-03-24 11:29:02 UTC Comment hidden (obsolete)
Comment 31 Owen Leonard 2021-03-24 11:29:06 UTC Comment hidden (obsolete)
Comment 32 Owen Leonard 2021-03-24 11:29:09 UTC Comment hidden (obsolete)
Comment 33 Owen Leonard 2021-03-24 11:29:12 UTC Comment hidden (obsolete)
Comment 34 Owen Leonard 2021-03-24 11:29:16 UTC Comment hidden (obsolete)
Comment 35 Owen Leonard 2021-03-24 11:29:21 UTC Comment hidden (obsolete)
Comment 36 Owen Leonard 2021-03-24 11:29:24 UTC
Created attachment 118730 [details] [review]
Bug 27846: (follow-up) Use SCSS-style nesting for style additions

This patch takes the changes introduced to the SCSS file in the previous
patches and converts it to use SCSS-style nesting to generate the
same output.

There should be no visible changes as a result.
Comment 37 Owen Leonard 2021-03-24 11:29:28 UTC Comment hidden (obsolete)
Comment 38 Owen Leonard 2021-03-24 11:29:33 UTC Comment hidden (obsolete)
Comment 39 Owen Leonard 2021-03-24 12:13:26 UTC Comment hidden (obsolete)
Comment 40 Owen Leonard 2021-03-24 12:13:30 UTC Comment hidden (obsolete)
Comment 41 Owen Leonard 2021-03-24 12:13:35 UTC Comment hidden (obsolete)
Comment 42 Owen Leonard 2021-03-24 12:20:32 UTC
I do have a couple of concerns about the new appearance:

- I don't think we should style the last breadcrumb as bold. I think this gives it too much visual weight on the page, where a page heading is going to already be announcing the context.

- The "/" as a separator between the breadcrumbs works fine except where there is a title in the breadcrumbs. In MARC21 at least there are a lot of titles which end in a slash (because MARC is dumb), so the breadcrumbs end up looking like this:

Home / Catalog / Moby Dick / / Details 

What about using CSS content? 

content: '›';
Comment 43 Owen Leonard 2021-03-24 12:35:23 UTC
(In reply to Owen Leonard from comment #42)
> What about using CSS content? 

Further investigation suggests that CSS content will be read by screenreaders unreliably but enough of the time that we shouldn't use it for this.

Using CSS is definitely more maintainable than going back to "@rsaquo" even if we add an aria-hidden attribute somehow. I think we should think about alternatives to the slash that can be pure CSS.
Comment 44 Martin Renvoize 2021-03-24 13:39:21 UTC
Created attachment 118744 [details] [review]
Bug 27846: changed scss for breadcrumbs

Changed styling for breadcrumbs to be accessible

Sponsored-by: Catalyst IT
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 45 Martin Renvoize 2021-03-24 13:39:25 UTC
Created attachment 118745 [details] [review]
Bug 27846: modules and modules/acqui folders

Modified breadcrumbs to be accessible, in particular for a
screen-reader.

Made the block of breadcrumbs be a <nav aria label="Breadcrumb"
class="breadcrumb"> with an ordered list inside. The last breadcrumbs
also has aria-current="page" to specify that it is the current page.

To test:
1) Apply patch
2) Build scss file
3) Ensure each of the files in the modules folder and the modules/acqui
   folder has breadcrumbs that are in a <nav aria label="Breadcrumb"
   class="breadcrumb"> block
4) Ensure that there is an ordered list in the block of breadcrumbs
5) Ensure that the last breadcrumb has aria-current="page"
6) Ensure that the breadcrumbs on each page of the staff client
   belonging to these files look the same as before, but the '>' symbol
   is replaced with '/' and the last breadcrumb has bold text
7) Ensure that when the last breadcrumb is clicked it takes you to the
   page you are currently on

Sponsored-by: Catalyst IT
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 46 Martin Renvoize 2021-03-24 13:39:28 UTC
Created attachment 118746 [details] [review]
Bug 27846: admin folder

Modified breadcrumbs to be accessible, in particular for a
screen-reader.

Made the block of breadcrumbs be a <nav aria label="Breadcrumb"
class="breadcrumb"> with an ordered list inside. The last breadcrumbs
also has aria-current="page" to specify that it is the current page.

To test:
1) Apply patch
2) Build scss file
3) Ensure each of the files in the admin folder has breadcrumbs that are
   in a <nav aria label="Breadcrumb" class="breadcrumb"> block
4) Ensure that there is an ordered list in the block of breadcrumbs
5) Ensure that the last breadcrumb has aria-current="page"
6) Ensure that the breadcrumbs on each page of the staff client
   belonging to these files look the same as before, but the '>' symbol
   is replaced with '/' and the last breadcrumb has bold text
7) Ensure that when the last breadcrumb is clicked it takes you to the
   page you are currently on

Sponsored-by: Catalyst IT
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 47 Martin Renvoize 2021-03-24 13:39:32 UTC
Created attachment 118747 [details] [review]
Bug 27846: authorities, catalogue and cataloguing folders

Modified breadcrumbs to be accessible, in particular for a
screen-reader.

Made the block of breadcrumbs be a <nav aria label="Breadcrumb"
class="breadcrumb"> with an ordered list inside. The last breadcrumbs
also has aria-current="page" to specify that it is the current page.

To test:
1) Apply patch
2) Build scss file
3) Ensure each of the files in the authorities, catalogue and
   cataloguing folders have breadcrumbs that are in a <nav aria
   label="Breadcrumb" class="breadcrumb"> block
4) Ensure that there is an ordered list in the block of breadcrumbs
5) Ensure that the last breadcrumb has aria-current="page"
6) Ensure that the breadcrumbs on each page of the staff client
   belonging to these files look the same as before, but the '>' symbol
   is replaced with '/' and the last breadcrumb has bold text
7) Ensure that when the last breadcrumb is clicked it takes you to the
   page you are currently on

Sponsored-by: Catalyst IT
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 48 Martin Renvoize 2021-03-24 13:39:36 UTC
Created attachment 118748 [details] [review]
Bug 27846: circ folder

Modified breadcrumbs to be accessible, in particular for a
screen-reader.

Made the block of breadcrumbs be a <nav aria label="Breadcrumb"
class="breadcrumb"> with an ordered list inside. The last breadcrumbs
also has aria-current="page" to specify that it is the current page.

To test:
1) Apply patch
2) Build scss file
3) Ensure each of the files in the circ folder have breadcrumbs that are
   in a <nav aria label="Breadcrumb" class="breadcrumb"> block
4) Ensure that there is an ordered list in the block of breadcrumbs
5) Ensure that the last breadcrumb has aria-current="page"
6) Ensure that the breadcrumbs on each page of the staff client
   belonging to these files look the same as before, but the '>' symbol
   is replaced with '/' and the last breadcrumb has bold text
7) Ensure that when the last breadcrumb is clicked it takes you to the
   page you are currently on

Sponsored-by: Catalyst IT
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 49 Martin Renvoize 2021-03-24 13:39:40 UTC
Created attachment 118749 [details] [review]
Bug 27846: clubs, course_reserves, errors and ill folders

Modified breadcrumbs to be accessible, in particular for a
screen-reader.

Made the block of breadcrumbs be a <nav aria label="Breadcrumb"
class="breadcrumb"> with an ordered list inside. The last breadcrumbs
also has aria-current="page" to specify that it is the current page.

To test:
1) Apply patch
2) Build scss file
3) Ensure each of the files in the clubs, course_reserves, errors and
   ill folders has breadcrumbs that are in a <nav aria
   label="Breadcrumb" class="breadcrumb"> block
4) Ensure that there is an ordered list in the block of breadcrumbs
5) Ensure that the last breadcrumb has aria-current="page"
6) Ensure that the breadcrumbs on each page of the staff client
   belonging to these files look the same as before, but the '>' symbol
   is replaced with '/' and the last breadcrumb has bold text
7) Ensure that when the last breadcrumb is clicked it takes you to the
   page you are currently on

Sponsored-by: Catalyst IT
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 50 Martin Renvoize 2021-03-24 13:39:43 UTC
Created attachment 118750 [details] [review]
Bug 27846: labels folder

Modified breadcrumbs to be accessible, in particular for a
screen-reader.

Made the block of breadcrumbs be a <nav aria label="Breadcrumb"
class="breadcrumb"> with an ordered list inside. The last breadcrumbs
also has aria-current="page" to specify that it is the current page.

To test:
1) Apply patch
2) Build scss file
3) Ensure each of the files in the labels folder have breadcrumbs that
   are in a <nav aria label="Breadcrumb" class="breadcrumb"> block
4) Ensure that there is an ordered list in the block of breadcrumbs
5) Ensure that the last breadcrumb has aria-current="page"
6) Ensure that the breadcrumbs on each page of the staff client
   belonging to these files look the same as before, but the '>' symbol
   is replaced with '/' and the last breadcrumb has bold text
7) Ensure that when the last breadcrumb is clicked it takes you to the
   page you are currently on

Sponsored-by: Catalyst IT
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 51 Martin Renvoize 2021-03-24 13:39:47 UTC
Created attachment 118751 [details] [review]
Bug 27846: members folder

Modified breadcrumbs to be accessible, in particular for a
screen-reader.

Made the block of breadcrumbs be a <nav aria label="Breadcrumb"
class="breadcrumb"> with an ordered list inside. The last breadcrumbs
also has aria-current="page" to specify that it is the current page.

To test:
1) Apply patch
2) Build scss file
3) Ensure each of the files in the members folder have breadcrumbs that
are in a <nav aria label="Breadcrumb" class="breadcrumb"> block
4) Ensure that there is an ordered list in the block of breadcrumbs
5) Ensure that the last breadcrumb has aria-current="page"
6) Ensure that the breadcrumbs on each page of the staff client
belonging to these files look the same as before, but the '>' symbol is
replaced with '/' and the last breadcrumb has bold text
7) Ensure that when the last breadcrumb is clicked it takes you to the
page you are currently on

Sponsored-by: Catalyst IT
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 52 Martin Renvoize 2021-03-24 13:39:51 UTC
Created attachment 118752 [details] [review]
Bug 27846: offline_circ, patroncards, patron_lists, plugins and pos

Modified breadcrumbs to be accessible, in particular for a
screen-reader.

Made the block of breadcrumbs be a <nav aria label="Breadcrumb"
class="breadcrumb"> with an ordered list inside. The last breadcrumbs
also has aria-current="page" to specify that it is the current page.

To test:
1) Apply patch
2) Build scss file
3) Ensure each of the files in the offline_circ, patroncards,
   patron_lists, plugins and pos folders have breadcrumbs that are in a
   <nav aria label="Breadcrumb" class="breadcrumb"> block
4) Ensure that there is an ordered list in the block of breadcrumbs
5) Ensure that the last breadcrumb has aria-current="page"
6) Ensure that the breadcrumbs on each page of the staff client
   belonging to these files look the same as before, but the '>' symbol
   is replaced with '/' and the last breadcrumb has bold text
7) Ensure that when the last breadcrumb is clicked it takes you to
   the page you are currently on

Sponsored-by: Catalyst IT
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 53 Martin Renvoize 2021-03-24 13:39:55 UTC
Created attachment 118753 [details] [review]
Bug 27846: reports, reserve and reviews folders

Modified breadcrumbs to be accessible, in particular for a
screen-reader.

Made the block of breadcrumbs be a <nav aria label="Breadcrumb"
class="breadcrumb"> with an ordered list inside. The last breadcrumbs
also has aria-current="page" to specify that it is the current page.

To test:
1) Apply patch
2) Build scss file
3) Ensure each of the files in the reports, reserve and reviews folders
   have breadcrumbs that are in a <nav aria label="Breadcrumb"
   class="breadcrumb"> block
4) Ensure that there is an ordered list in the block of breadcrumbs
5) Ensure that the last breadcrumb has aria-current="page"
6) Ensure that the breadcrumbs on each page of the staff client
   belonging to these files look the same as before, but the '>' symbol
   is replaced with '/' and the last breadcrumb has bold text
7) Ensure that when the last breadcrumb is clicked it takes you to the
   page you are currently on

Sponsored-by: Catalyst IT
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 54 Martin Renvoize 2021-03-24 13:39:58 UTC
Created attachment 118754 [details] [review]
Bug 27846: rotating_collections, serials, suggestion and tags folders

Modified breadcrumbs to be accessible, in particular for a
screen-reader.

Made the block of breadcrumbs be a <nav aria label="Breadcrumb"
class="breadcrumb"> with an ordered list inside. The last breadcrumbs
also has aria-current="page" to specify that it is the current page.

To test:
1) Apply patch
2) Build scss file
3) Ensure each of the files in the rotating_collections, serials,
   suggestion and tags folders have breadcrumbs that are in a <nav aria
   label="Breadcrumb" class="breadcrumb"> block
4) Ensure that there is an ordered list in the block of breadcrumbs
5) Ensure that the last breadcrumb has aria-current="page"
6) Ensure that the breadcrumbs on each page of the staff client
   belonging to these files look the same as before, but the '>' symbol
   is replaced with '/' and the last breadcrumb has bold text
7) Ensure that when the last breadcrumb is clicked it takes you to the
   page you are currently on

Sponsored-by: Catalyst IT
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 55 Martin Renvoize 2021-03-24 13:40:02 UTC
Created attachment 118755 [details] [review]
Bug 27846: tools and virtualshelves folders

Modified breadcrumbs to be accessible, in particular for a
screen-reader.

Made the block of breadcrumbs be a <nav aria label="Breadcrumb"
class="breadcrumb"> with an ordered list inside. The last breadcrumbs
also has aria-current="page" to specify that it is the current page.

To test:
1) Apply patch
2) Build scss file
3) Ensure each of the files in the tools and virtualshelves folders have
   breadcrumbs that are in a <nav aria label="Breadcrumb"
   class="breadcrumb"> block
4) Ensure that there is an ordered list in the block of breadcrumbs
5) Ensure that the last breadcrumb has aria-current="page"
6) Ensure that the breadcrumbs on each page of the staff client
   belonging to these files look the same as before, but the '>' symbol
   is replaced with '/' and the last breadcrumb has bold text
7) Ensure that when the last breadcrumb is clicked it takes you to the
   page you are currently on

Sponsored-by: Catalyst IT
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 56 Martin Renvoize 2021-03-24 13:40:07 UTC
Created attachment 118756 [details] [review]
Bug 27846: (follow-up) Markup corrections

This patch makes minor markup corrections which were introduced by the
previous patches or discovered during testing.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 57 Martin Renvoize 2021-03-24 13:40:11 UTC
Created attachment 118757 [details] [review]
Bug 27846: (follow-up) Use SCSS-style nesting for style additions

This patch takes the changes introduced to the SCSS file in the previous
patches and converts it to use SCSS-style nesting to generate the
same output.

There should be no visible changes as a result.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 58 Martin Renvoize 2021-03-24 13:40:15 UTC
Created attachment 118758 [details] [review]
Bug 27846: (follow-up) Indentation corrections

This patch makes some indentation changes to make things (in my opinion)
more consistent. Diffing while ignoring whitespace should show no
changes except to acqui/basket.tt where some lines were broken up.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 59 Martin Renvoize 2021-03-24 13:40:19 UTC
Created attachment 118759 [details] [review]
Bug 27846: (follow-up) Add id back to breadcrumbs container

I think the "breadcrumbs" ID is worth saving for past and future CSS
customization reasons.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 60 Martin Renvoize 2021-03-24 13:40:22 UTC
Created attachment 118760 [details] [review]
Bug 27846: (QA follow-up) Apply changes to transfers_to_send

It looks like the transfers to send page was added after these changes
were coded up.. This patch just impliments them for this page too.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 61 Martin Renvoize 2021-03-24 13:40:26 UTC
Created attachment 118761 [details] [review]
Bug 27846: (follow-up) Restore `>` symbol

This patch restores the original look but uses css ::before to insert
the symbol. This, for me, appears to resolve the previous issue that
screen readers would anounce the character which is what the change to a
slanted border was achieving.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 62 Martin Renvoize 2021-03-24 13:47:22 UTC
I'm told that my last follow-up may work in some screen readers whilst not work in others.

Owen is looking at an alternative for me :)

There was also some discussion over the emboldening of the last item in the breadcrumb.. Is this actually required to meet the accessibility guidelines (general opinion seemed to be people didn't like the bold).. and I'm not seeing a clear point to say it should be bolded?
Comment 63 Owen Leonard 2021-03-24 17:42:36 UTC
Created attachment 118767 [details] [review]
Bug 27846: (follow-up) Use background SVG for breadcrumb dividers
Comment 64 Owen Leonard 2021-03-24 17:43:41 UTC
(In reply to Owen Leonard from comment #63)

> Bug 27846: (follow-up) Use background SVG for breadcrumb dividers

This is the alternative I came up with for the slash-like border dividers.
Comment 65 wainuiwitikapark 2021-03-24 21:25:21 UTC
Hi there,

Thanks so much for your work on this!

I think the "/" can be changed back to a ">" using css if you think this makes more sense. I kind of agree too, I was just going off the WCAG examples.

In terms of the boldness of the current page, I personally thinks it looks a lot better bold. I have low vision and sometimes redundancy is okay to be more accessible. I'm okay with reverting it back to non-bold using css though if you feel strongly that this should be the case. 

The WCAG example was also recommended to me by our Accessibility team at Catalyst, which is lead by someone who is totally blind.

Thanks again!
Comment 66 wainuiwitikapark 2021-03-24 22:56:14 UTC
(In reply to wainuiwitikapark from comment #65)
> Hi there,
> 
> Thanks so much for your work on this!
> 
> I think the "/" can be changed back to a ">" using css if you think this
> makes more sense. I kind of agree too, I was just going off the WCAG
> examples.
> 
> In terms of the boldness of the current page, I personally thinks it looks a
> lot better bold. I have low vision and sometimes redundancy is okay to be
> more accessible. I'm okay with reverting it back to non-bold using css
> though if you feel strongly that this should be the case. 
> 
> The WCAG example was also recommended to me by our Accessibility team at
> Catalyst, which is lead by someone who is totally blind.
> 
> Thanks again!

I think the bold works fine for this instance but if you feel strongly about this, would you mind please creating a new bug that involves this. It's really import this bug be completed :)

Thanks heaps!
Comment 67 Martin Renvoize 2021-03-25 09:18:14 UTC
Created attachment 118770 [details] [review]
Bug 27846: (follow-up) Use background SVG for breadcrumb dividers

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 68 Martin Renvoize 2021-03-25 09:20:11 UTC
The bold has grown on me, especially with Owens SVG `>` as it's a little larger and bolder than before too and makes the bold of the final breadcrumb slug seem more in keeping.

Passing QA

Great work everyone, so pleased to see accessibility taking a priority now!
Comment 69 Martin Renvoize 2021-03-25 09:26:08 UTC
As an aside, Do you have a screen reader you would recommend for use in testing Wainui (I really hope I've split your name in the right place there).

I'd love to get the QA team more involved with testing these things, but I don't think at the moment we have anyone with that much expertise or first hand experience.

I try to test using the Chromvox extension here as a starting point, but I find it a bit buggy and I'm never sure if it's the plugin acting up or our coding.. me personally being a Linux junky doesn't help either.. popular screen readers I've googled all appear to be for windows.
Comment 70 wainuiwitikapark 2021-03-25 20:36:24 UTC
(In reply to Martin Renvoize from comment #68)
> The bold has grown on me, especially with Owens SVG `>` as it's a little
> larger and bolder than before too and makes the bold of the final breadcrumb
> slug seem more in keeping.
> 
> Passing QA
> 
> Great work everyone, so pleased to see accessibility taking a priority now!

Okay great!

Awesome thanks so much, yes super exciting!!
Comment 71 wainuiwitikapark 2021-03-25 20:42:08 UTC
(In reply to Martin Renvoize from comment #69)
> As an aside, Do you have a screen reader you would recommend for use in
> testing Wainui (I really hope I've split your name in the right place there).
> 
> I'd love to get the QA team more involved with testing these things, but I
> don't think at the moment we have anyone with that much expertise or first
> hand experience.
> 
> I try to test using the Chromvox extension here as a starting point, but I
> find it a bit buggy and I'm never sure if it's the plugin acting up or our
> coding.. me personally being a Linux junky doesn't help either.. popular
> screen readers I've googled all appear to be for windows.

Hi!

I'm still getting used to the screen-readers as I've usually just relied on making text larger but I have been recommended Orca by our accessibility team.  sometimes use VoiceOver from iOS at home. I know our totally blind Accessibility lead at Catalyst uses NVDA.

I will ask around for what general opinions on the best screen-readers and tools to simulate these are.

Thanks :)
Comment 72 Jonathan Druart 2021-04-01 16:54:21 UTC
Pushed to master for 21.05, thanks to everybody involved!
Comment 73 Jonathan Druart 2021-04-01 16:57:13 UTC
Congratulations for your first patches pushed, Wainui!
Comment 74 Fridolin Somers 2021-04-15 10:40:02 UTC
Enhancement not pushed to 20.11.x