When the OPAC screen width is reduced, the link texts "Log in to your account", "Cart" and "Lists" are removed, causing the links to lose their text alternative. This violates accessibility guidelines which require that all links have a text alternative, even if it is not visible.
Created attachment 170118 [details] [review] Bug 37586: Added aria-labels to the masthead links. 1. **Check the OPAC Interface**: - Open the OPAC in a normal-sized browser window. - You’ll see the text next to the 'Cart' and 'Login' icons clearly. - Gradually reduce the window size until the text next to these icons disappears. - Inspect the icon elements. You’ll find that there is no alternative text (like `aria-label`) provided for these links. This lack of alternative text is an accessibility issue. 2. **Apply the Patch**: - Implement the provided patch to address the accessibility issue. - Restart_all 3. **Verify the Fix**: - Inspect the icons again. - For the 'Cart' icon, you should see an `aria-label` attribute with the text "View your shopping cart". - For the 'Login' icon, you should see an `aria-label` attribute with the text "Log in to your account". - These changes will improve accessibility for users relying on screen readers. 4. **Sign Off**: - Sign off and Have an amazing day! :D
Note: In my original description I listed the "Lists" icon as an issue but I was incorrect. It already has it's own aria-label.
Created attachment 170134 [details] [review] Bug 37586: Updated aria-labels for masthead links Update to my last comment: The Lists aria-label had an accessibility issue as the label did not match the visible text. New test plan: Check the OPAC Interface: * Open the OPAC in a normal-sized browser window. * You’ll see the text next to the 'Cart', 'Lists', and 'Login' icons clearly. * Gradually reduce the window size until the text next to these icons disappears. * Inspect the icon elements. You’ll find that there is no alternative text (like aria-label) provided for 'Cart' and 'Login'. The aria-label for 'Lists' does not match the visible text. It currently says "Show dropdown with detailed list information". This lack of alternative text is an accessibility issue and labels should match visible text. Apply the Patch: * Apply the patch * Restart_all Verify the Fix: * Inspect the icons again. * For the 'Cart' icon, you should see an aria-label attribute with the text "View your shopping cart". * For the 'Login' icon, you should see an aria-label attribute with the text "Log in to your account". * For the 'Lists' icon, you should see an updated aria-label attribute with the new text of "Lists". * These changes will improve accessibility for users relying on screen readers. Sign Off: * Sign off and Have an amazing day!
Created attachment 170135 [details] [review] Bug 37586: Added aria-label for Login icon
Hi Laura, the text I see in OPAC doesn't match to the test plan. Can you please check?
Hi Nicholas, Were all the labels not matching or just a specific one?
Hello Laura, i don't see the new texts for all icons.
Created attachment 170472 [details] [review] Bug 37586: Updated aria-labels for masthead links Update to my last comment: The Lists aria-label had an accessibility issue as the label did not match the visible text. New test plan: Check the OPAC Interface: * Open the OPAC in a normal-sized browser window. * You’ll see the text next to the 'Cart', 'Lists', and 'Login' icons clearly. * Gradually reduce the window size until the text next to these icons disappears. * Inspect the icon elements. You’ll find that there is no alternative text (like aria-label) provided for 'Cart' and 'Login'. The aria-label for 'Lists' does not match the visible text. It currently says "Show dropdown with detailed list information". This lack of alternative text is an accessibility issue and labels should match visible text. Apply the Patch: * Apply the patch * Restart_all Verify the Fix: * Inspect the icons again. * For the 'Cart' icon, you should see an aria-label attribute with the text "View your shopping cart". * For the 'Login' icon, you should see an aria-label attribute with the text "Log in to your account". * For the 'Lists' icon, you should see an updated aria-label attribute with the new text of "Lists". * These changes will improve accessibility for users relying on screen readers. Sign Off: * Sign off and Have an amazing day! Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Created attachment 170473 [details] [review] Bug 37586: Added aria-label for Login icon Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Hm, it looks like something went wrong with the status here. I only see a sign-off from Lucas and Nicolas had trouble making the change visible (with me sitting next to him). Can we have another set of eyes please?
Created attachment 170530 [details] [review] Bug 37586: Updated aria-labels for masthead links Update to my last comment: The Lists aria-label had an accessibility issue as the label did not match the visible text. New test plan: Check the OPAC Interface: * Open the OPAC in a normal-sized browser window. * You’ll see the text next to the 'Cart', 'Lists', and 'Login' icons clearly. * Gradually reduce the window size until the text next to these icons disappears. * Inspect the icon elements. You’ll find that there is no alternative text (like aria-label) provided for 'Cart' and 'Login'. The aria-label for 'Lists' does not match the visible text. It currently says "Show dropdown with detailed list information". This lack of alternative text is an accessibility issue and labels should match visible text. Apply the Patch: * Apply the patch * Restart_all Verify the Fix: * Inspect the icons again. * For the 'Cart' icon, you should see an aria-label attribute with the text "View your shopping cart". * For the 'Login' icon, you should see an aria-label attribute with the text "Log in to your account". * For the 'Lists' icon, you should see an updated aria-label attribute with the new text of "Lists". * These changes will improve accessibility for users relying on screen readers. Sign Off: * Sign off and Have an amazing day! Signed-off-by: Lucas Gass <lucas@bywatersolutions.com> Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Created attachment 170531 [details] [review] Bug 37586: Added aria-label for Login icon Signed-off-by: Lucas Gass <lucas@bywatersolutions.com> Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Great to see this getting looked at, thanks Laura. Passing QA
Pushed for 24.11! Well done everyone, thank you!
Backported to 24.05.x for upcoming 24.05.04
Pushed to 23.11.x for 23.11.10
Not backporting to 23.05.x unless requested