[Bug 42335] New: Accessibility of top level menu (staff interface)
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42335 Bug ID: 42335 Summary: Accessibility of top level menu (staff interface) Initiative type: --- Sponsorship --- status: Product: Koha Version: 25.05 Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: Accessibility Assignee: koha-bugs@lists.koha-community.org Reporter: raina@flo.org QA Contact: testopia@bugs.koha-community.org CC: martin.renvoize@openfifth.co.uk, matt.blenkinsop@openfifth.co.uk, oleonard@myacpl.org In the top level menu (#toplevelmenu) in the staff interface, the dropdown icon (#catalog-search-dropdown) that expands to show the Advanced and Item search options does not have any label for assistance technology. The Cart icon in the same menu also does not have any label. Because both have href attributes but no labels or link text, a screen reader may read these as "link" (tested with VoiceOver), making it unclear to the user what they are when user is navigating through the menu. For the dropdown icon that goes to Search options, this does follow the "Search" text in the top level menu, but it could be made more clear to all users that this is an icon to toggle show search options (such as with an aria-label), whereas clicking the "Search" text will to the Advanced search page. The shopping cart icon could simply have an aria-label. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42335 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|koha-bugs@lists.koha-commun |Laura.escamilla@bywatersolu |ity.org |tions.com Status|NEW |Needs Signoff -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42335 --- Comment #1 from Laura Escamilla <Laura.escamilla@bywatersolutions.com> --- Created attachment 198309 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=198309&action=edit Bug 42335: Add accessible labels to catalog search dropdown and cart links in staff interface To test: 1. Go to the staff interface main page 2. Inspect the top menu (#toplevelmenu) 3. Locate the catalog search dropdown icon and cart icon 4. Confirm both links have aria-label attributes 5. (Optional) Use a screen reader or accessibility inspector to verify labels are announced 6. Sign off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42335 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42335 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #198309|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42335 --- Comment #2 from David Nind <david@davidnind.com> --- Created attachment 198325 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=198325&action=edit Bug 42335: Add accessible labels to catalog search dropdown and cart links in staff interface To test: 1. Go to the staff interface main page 2. Inspect the top menu (#toplevelmenu) 3. Locate the catalog search dropdown icon and cart icon 4. Confirm both links have aria-label attributes 5. (Optional) Use a screen reader or accessibility inspector to verify labels are announced 6. Sign off Signed-off-by: David Nind <david@davidnind.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42335 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Version|25.05 |Main Severity|enhancement |normal Text to go in the| |This adds missing aria release notes| |labels to the staff | |interface header search | |dropdown menu and the cart. | |This means that screen | |readers get more | |information instead of just | |"link". CC| |david@davidnind.com --- Comment #3 from David Nind <david@davidnind.com> --- Testing notes (using KTD and axe devTools in the browser): 1. axe DevTools shows an issue for search dropdown menu (Links must have discernible text). 2. After the patch, it is no longer shown as an issue. 3. axe DevTools doesn't identify any issues for the cart link (which shows you can't rely on automated tests completely). Change to a normal bug instead of an enhancement. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42335 Brendan Lawlor <blawlor@clamsnet.org> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |blawlor@clamsnet.org QA Contact|testopia@bugs.koha-communit |blawlor@clamsnet.org |y.org | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42335 Brendan Lawlor <blawlor@clamsnet.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Failed QA --- Comment #4 from Brendan Lawlor <blawlor@clamsnet.org> --- I used NVDA to test. Before the patch: The search drop down is announced as 'button collapsed' After patch: The search drop down is announced as 'Show search options button collapsed' This fix is satisfactory, but there is still an issue with the shopping cart link. Before patch: The Cart link is announced as 'same page link' After using the cart the link is announced with the basket count like '3 same page link' or '0 same page link' After patch: The cart link is announced as 'View cart same page link' After using the cart the visual basket count is updated but it's not accessible to screen readers, it's always just announced as 'View cart same page link' The aria-label "View cart" overrides all inner content, which includes the basket count. That fails WCAG 2.1 Success Criterion 1.3.1 Info and Relationships because meaningful information is not accessible to screen readers. It's also a possible fail of WCAG 2.5.3 Label in Name Because the visual label does not match the accessible name Possible solution: Use a span with class sr-only, so that the accessible name becomes "3 items in cart link" which matches the visible information. <a class="nav-link" href="/cgi-bin/koha/basket/basket.pl?" id="cartmenulink"> <i class="fa fa-shopping-cart" aria-hidden=""true"></i> <span id="basketcount"> (0)</span> <span class="sr-only">items in cart</span> </a> This solution is nice because it doesn't depend on javascript. The other option would be to use the aria-label like you used but it would also have to be updated when basket.js updates the basketcount. I added (0) because the basket.js does not set the 0 until after you've used the cart the first time. Also I included the base url for the link to bring up another accessibility issue of using href="#". It's common in Koha for components that are controlled by javascript. The problem is the user expects a same page link, so it should not load a new page, open a new window or trigger an action. I am going to file a bug for that issue because it's really outside the scop of this one. In this case js opens the cart in a new window so it might be nice to include "(opens in a new window)" so the user can predict the context change. In this case this link is a little weird because when there's nothing in the cart it doesn't behave like a link, and the -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42335 --- Comment #5 from Brendan Lawlor <blawlor@clamsnet.org> --- ...when there's nothing in the cart, this component does not behave like a link, which would be confusing. The little popup info #cartDetails that says 'Your cart is currently empty" is not accessible. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42335 Laura Escamilla <Laura.escamilla@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Failed QA |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42335 --- Comment #6 from Laura Escamilla <Laura.escamilla@bywatersolutions.com> --- Created attachment 209631 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=209631&action=edit Bug 42335: Preserve accessible cart count in staff interface Updated the cart link to address the Failed QA feedback. Removed the static `aria-label`, which prevented screen readers from accessing the dynamically updated basket count. Added visually hidden, translatable text and initialized the empty cart count to `(0)`. Tested with an empty cart and after adding records. Confirmed the count updates correctly and remains part of the link text. The catalog search dropdown fix remains unchanged. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42335 --- Comment #7 from Owen Leonard <oleonard@myacpl.org> --- It seems odd to me to show "(0)" all the time. It seems distracting. I wonder if there's a way to handle that label without requiring the zero to be there. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42335 Brendan Lawlor <blawlor@clamsnet.org> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Failed QA --- Comment #8 from Brendan Lawlor <blawlor@clamsnet.org> --- 1. This doesn't have a filter: [% t('items in cart') %] so xt/find-missing-filters.t fails. It would be fixed with [% t('items in cart') | html %] 2. The accessible name has confusing grammar when there are '(1) items in cart' I think this could be resolved by leading with the word Cart, so no plural form is needed and the link starts with it's purpose, so it's better for users using a screen reader. <a class="nav-link" href="#" id="cartmenulink"> <i class="fa fa-shopping-cart" aria-hidden="true"></i> <span class="visually-hidden">[% t('Cart') | html %]</span> <span id="basketcount"><(0)</span> </a> 3. The first commit removes title="Cart", which could be considered a useful tooltip for sighted mouse users. If we add it back it should be added to the <a> element rather than on the <i> element it was on before. 4. In reply to Owen's comment, before this patch (0) would show after emptying the cart, so it could be considered consistent, event though it is different that it starts with (0) with this patch. The js wraps the count in a <span> so the first hard coded (0) is styled slightly differently, appearing a tiny bit larger. The JS probably doesn't need to add the extra span in this case. 1 is a blocker, 2-4 are recommended -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42335 --- Comment #9 from Brendan Lawlor <blawlor@clamsnet.org> --- (In reply to Owen Leonard from comment #7)
It seems odd to me to show "(0)" all the time. It seems distracting. I wonder if there's a way to handle that label without requiring the zero to be there.
I thought about this some more and I think that if the accessible name is simply 'Cart' then it would be fine to remove the hard coded (0) that shows all the time. There is one other accessibility issue, that is worth a a follow up bug too. When you click on an empty cart the message that pops up 'Your cart is currently empty' and when adding records to the cart 'This record has been added to your cart' When those messages are visible they are temporarily in the accessibility tree, but a screen reader wouldn't hear it. - It has no role="status" or aria-live so the change is not announced (only one of these would be needed) - The #cartDetails div is not connected to the link with aria-describedby - The message itself is gone after 2 seconds, so that could also fail WCAG 2.2.1 (Timing adjustable) -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org