Bug 39497

Summary: 'Lists' page tabs should be marked as such
Product: Koha Reporter: Chloé Zermatten <chloe.zermatten>
Component: AccessibilityAssignee: Chloé Zermatten <chloe.zermatten>
Status: Pushed to main --- QA Contact: Baptiste Wojtkowski (bwoj) <baptiste.wojtkowski>
Severity: normal    
Priority: P5 - low CC: baptiste.wojtkowski, martin.renvoize, matt.blenkinsop, oleonard
Version: Main   
Hardware: All   
OS: All   
GIT URL: Change sponsored?: ---
Patch complexity: --- Documentation contact:
Documentation submission: Text to go in the release notes:
Version(s) released in:
25.05.00
Circulation function:
Attachments: Bug 39497: update 'Lists' page tabs attributes
Bug 39497: update 'Lists' page tabs attributes
Bug 39497: update 'Lists' page tabs attributes
Bug 39497: update 'Lists' page tabs attributes

Description Chloé Zermatten 2025-03-31 12:34:18 UTC
On the Koha OPAC, the 'Lists' page contains tabs which aren't clearly marked as such (no relevant attribute set on the element).

This means that screen readers will not recognise the tabs as such, and screen reader users will not be made aware that these are available.

Since the 'Advanced Search' page contains tabs that are correctly identified and described by screen readers, update the HTML for the tabs on the 'Lists' page so that it matches theirs.
Comment 1 Chloé Zermatten 2025-04-07 12:47:25 UTC
Created attachment 180694 [details] [review]
Bug 39497: update 'Lists' page tabs attributes

On the Koha OPAC, the 'Lists' page contains tabs which aren't clearly marked as such (no relevant attribute set on the element).

This means that screen readers will not recognise the tabs as such, and screen reader users will not be made aware that these are available.

Since the 'Advanced Search' page contains tabs that are correctly identified and described by screen readers, update the HTML atributes for the tabs on the 'Lists' page so that it matches theirs.

Note: this is a quick and simple fix aiming to meet accessibility requirements. Another approach could be to implement wrappers (as in advsearch.tt), but it seems a bigger refactor of opac-shelves.tt may be needed to allow that.

Test plan:

0) Before testing, ensure that the relevant patron has a few public and private lists.
1) Log in on the Koha OPAC
3) Navigate to Home > koha > Lists
2) Notice that, when the page first load, the 'Your Lists' tab panel is displayed (functionality is preserved)
3) Select 'Public lists', and notice that the tab panel now matches that (again, functionality is preserved)
4) Either inspect the page's HTML or run a Lighthouse test, and check that all aria attribute required by screen readers are present

(aria attributes assumed to be required are aria-controls, aria-selected, and aria-labelledby. It is also assumed that 'role' attributes are needed)
Comment 2 Chloé Zermatten 2025-04-07 12:49:16 UTC
Created attachment 180695 [details] [review]
Bug 39497: update 'Lists' page tabs attributes

On the Koha OPAC, the 'Lists' page contains tabs which aren't clearly marked as such (no relevant attribute set on the element).

This means that screen readers will not recognise the tabs as such, and screen reader users will not be made aware that these are available.

Since the 'Advanced Search' page contains tabs that are correctly identified and described by screen readers, update the HTML atributes for the tabs on the 'Lists' page so that it matches theirs.

Note: this is a quick and simple fix aiming to meet accessibility requirements. Another approach could be to implement wrappers (as in advsearch.tt), but it seems a bigger refactor of opac-shelves.tt may be needed to allow that.

Test plan:

0) Before testing, ensure that the relevant patron has a few public and private lists.
1) Log in on the Koha OPAC
3) Navigate to Home > koha > Lists
2) Notice that, when the page first load, the 'Your Lists' tab panel is displayed (functionality is preserved)
3) Select 'Public lists', and notice that the tab panel now matches that (again, functionality is preserved)
4) Either inspect the page's HTML or run a Lighthouse test, and check that all aria attribute required by screen readers are present

(aria attributes assumed to be required are aria-controls, aria-selected, and aria-labelledby. It is also assumed that 'role' attributes are needed)
Comment 3 Brendan Gallagher 2025-04-07 19:20:18 UTC
Created attachment 180706 [details] [review]
Bug 39497: update 'Lists' page tabs attributes

On the Koha OPAC, the 'Lists' page contains tabs which aren't clearly marked as such (no relevant attribute set on the element).

This means that screen readers will not recognise the tabs as such, and screen reader users will not be made aware that these are available.

Since the 'Advanced Search' page contains tabs that are correctly identified and described by screen readers, update the HTML atributes for the tabs on the 'Lists' page so that it matches theirs.

Note: this is a quick and simple fix aiming to meet accessibility requirements. Another approach could be to implement wrappers (as in advsearch.tt), but it seems a bigger refactor of opac-shelves.tt may be needed to allow that.

Test plan:

0) Before testing, ensure that the relevant patron has a few public and private lists.
1) Log in on the Koha OPAC
3) Navigate to Home > koha > Lists
2) Notice that, when the page first load, the 'Your Lists' tab panel is displayed (functionality is preserved)
3) Select 'Public lists', and notice that the tab panel now matches that (again, functionality is preserved)
4) Either inspect the page's HTML or run a Lighthouse test, and check that all aria attribute required by screen readers are present

(aria attributes assumed to be required are aria-controls, aria-selected, and aria-labelledby. It is also assumed that 'role' attributes are needed)

Signed-off-by: Brendan Gallagher <brendan@bywatersolutions.com>
Comment 4 Baptiste Wojtkowski (bwoj) 2025-04-30 11:28:20 UTC
Created attachment 181713 [details] [review]
Bug 39497: update 'Lists' page tabs attributes

On the Koha OPAC, the 'Lists' page contains tabs which aren't clearly marked as such (no relevant attribute set on the element).

This means that screen readers will not recognise the tabs as such, and screen reader users will not be made aware that these are available.

Since the 'Advanced Search' page contains tabs that are correctly identified and described by screen readers, update the HTML atributes for the tabs on the 'Lists' page so that it matches theirs.

Note: this is a quick and simple fix aiming to meet accessibility requirements. Another approach could be to implement wrappers (as in advsearch.tt), but it seems a bigger refactor of opac-shelves.tt may be needed to allow that.

Test plan:

0) Before testing, ensure that the relevant patron has a few public and private lists.
1) Log in on the Koha OPAC
3) Navigate to Home > koha > Lists
2) Notice that, when the page first load, the 'Your Lists' tab panel is displayed (functionality is preserved)
3) Select 'Public lists', and notice that the tab panel now matches that (again, functionality is preserved)
4) Either inspect the page's HTML or run a Lighthouse test, and check that all aria attribute required by screen readers are present

(aria attributes assumed to be required are aria-controls, aria-selected, and aria-labelledby. It is also assumed that 'role' attributes are needed)

Signed-off-by: Brendan Gallagher <brendan@bywatersolutions.com>
Signed-off-by: Baptiste Wojtkowski <baptiste.wojtkowski@biblibre.com>
Comment 5 Katrin Fischer 2025-05-02 06:55:10 UTC
Pushed for 25.05!

Well done everyone, thank you!