[Accessible] Make tabs on product page accessible #53158

Manussakis · 2024-11-25T20:51:13Z

Submission Review Guidelines:

I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
I have checked to ensure there aren't other open Pull Requests for the same update/change.
I have reviewed my code for security best practices.
Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

Closes #51924 .

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

Go to a product page.
Scroll down to the tabs.
When focus is on a tab item:
- Verify that pressing the Tab/Shift+Tab key on the keyboard moves the focus away from the tab list.
- Verify it's possible to navigate through the tab items by pressing the arrows left/right keys on the keyboard.
- Verify that the focus moves to the first tab item when the Home key is pressed on the keyboard.
- Verify that the focus moves to the last tab item when the End key is pressed on the keyboard.
Turn on the screen reader.
Verify screen reader announces the selected tab item and its position (e.g. 2 of 3).
Verify it's possible to select a tab by pressing the Enter key on the keyboard.

Changelog entry

Automatically create a changelog entry from the details below.

This Pull Request does not require a changelog entry. (Comment required below)

Changelog Entry Details

Significance

Patch
Minor
Major

Type

Fix - Fixes an existing bug
Add - Adds functionality
Update - Update existing functionality
Dev - Development related task
Tweak - A minor adjustment to the codebase
Performance - Address performance issues
Enhancement - Improvement to existing functionality

Message

Changelog Entry Comment

Comment

github-actions · 2024-11-25T20:52:03Z

Hi ,

Apart from reviewing the code changes, please make sure to review the testing instructions and verify that relevant tests (E2E, Unit, Integration, etc.) have been added or updated as needed.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

…focus is on the stars or tabs.

Manussakis · 2024-11-27T02:13:21Z

@dkotter This PR is ready for code review.
Thanks!

kmanijak

@Manussakis, works as expected! Thanks you for working on it. Could you mark the PR ready for review and remove WIP from PR title? Unless there's something missing?

Once marked as ready for review I'm happy to approve and merge 🚀

Manussakis · 2024-11-27T16:44:05Z

@kmanijak Thanks for testing this PR!

Before removing it from the draft, let's wait for @dkotter and @qasumitbagthariya from 10up to review it too.

Thanks!

dkotter

@ankitguptaindia @qasumitbagthariya This is ready for QA

qasumitbagthariya · 2024-11-28T12:55:27Z

QA/Test Report ✅

I have checked this PR in the Manussakis:fix/51924 branch and changes working as expected.

Verify that pressing the Tab/Shift+Tab key on the keyboard moves the focus away from the tab list. ✅
Verify it's possible to navigate through the tab items by pressing the arrows left/right keys on the keyboard. ✅
Verify that the focus moves to the first tab item when the Home key is pressed on the keyboard. ✅
Verify that the focus moves to the last tab item when the End key is pressed on the keyboard. ✅
Verify screen reader announces the selected tab item and its position (e.g. 2 of 3). ✅

Screen.Recording.2024-11-28.at.6.07.10.PM.mov

Testing Environment

WordPress: 6.7
Theme: Storefront 4.6.0
WooCommerce - WooCommerce - Dev version with this fix specific branch.
PHP: 8.0.30
Web Server: Nginx 1.20.2
Browser: Chrome
OS: macOS Ventura 13.3
Git Branch: Manussakis:fix/51924

@Manussakis Please remove [WIP] from the title and take this PR out of draft.

cc @vikrampm1

Manussakis · 2024-11-29T14:30:48Z

@kmanijak This PR is ready to be merged.
Thanks!

kmanijak

Hi @Manussakis, thanks for the ping! I'm just not sure I understand one case you covered. Do you mind elaborating? 🙌

kmanijak · 2024-12-02T13:00:30Z

plugins/woocommerce/client/legacy/js/frontend/single-product.js

+		.on( 'focusout', '.wc-tabs li a, ul.tabs li a, #respond p.stars a', function() {
+			setTimeout( function () {
+				var $activeElement = $( document.activeElement );
+				var sliderKeyupBlockers = [ '.stars', '.tabs', '.wc-tabs'];
+				var $closestBlocker = $activeElement.closest( sliderKeyupBlockers.join( ', ' ) );
+
+				if ( $closestBlocker.length ) {
+					// Prevent keyup events from being triggered on the flexslider when the focus is on the stars or tabs.
+					productGalleryElement.data('flexslider').animating = true;
+					return;
+				}
+
+				productGalleryElement.data('flexslider').animating = false;
+			}, 0);
+		} )


Could you explain what case does it cover?

@kmanijak

This code fixes this issue that @qasumitbagthariya found on the #53018 PR.

The seTimeout function is necessary to ensure the correct active element is returned, otherwise, the body element is returned.

Please let me know if you have any questions.

👋 folks, it looks like that line 84 creates a regression: #57292

When the user clicks on the description and reviews tabs, the animation is set to true (and never reset) and this caused that this logic never runs and so the animation isn't triggered.

I'm going to see how we can fix it, but sharing in case you have a better idea to avoid setting animating to true.

PR created: #57373

@gigitux
According to my investigation, the issue is that when the focus is on the tab items (Description, Review,...), clicking on the slider, either on the thumbnails or on the active image, doesn't trigger the focusout event from the focused tab item, only if you click on any other element outside it.

Once the focus moves away from the tab, the slider works back.

Blocking the slider when the tab is active is intended, as this avoids the slides from moving when the user is using the keyboard to navigate through the tabs' content.

I am also investigating it and will keep you posted.

Thanks!

kmanijak

This code fixes this issue that @qasumitbagthariya found on the #53018 PR.
The seTimeout function is necessary to ensure the correct active element is returned, otherwise, the body element is returned.
Please let me know if you have any questions.

Appreciate the explanation! LGTM, thank you!

louwie17 · 2024-12-19T09:45:25Z

Just a note that this PR caused a regression on product pages that aren't displaying a product gallery ( for example if a product has a single image ). See this error:

louwie17 · 2024-12-19T10:42:48Z

I end up working on a fix here: #53877
Given it needs a code freeze exception for the 9.6 release.

* Add aria attributes to tab link on product page * Make product tabs keyboard accessible * Add changelog file * Fix tab focus style on TT1 theme * Bump tabs template version * Prevent keyup events from being triggered on the flexslider when the focus is on the stars or tabs. * Update test to match the new tab role * Fix slider when clicking on the thumbnail with focus on tab or stars --------- Co-authored-by: Karol Manijak <[email protected]>

gigitux · 2025-03-04T10:15:57Z

👋 Hey folks, I just came across this issue. According to the Lighthouse report, it seems this PR lowers the accessibility score of the Single Product Page.

@Manussakis is it something that you can investigate?

Manussakis added 2 commits November 25, 2024 17:48

Add aria attributes to tab link on product page

035fce6

Make product tabs keyboard accessible

1b062a1

github-actions bot added plugin: woocommerce Issues related to the WooCommerce Core plugin. type: community contribution labels Nov 25, 2024

woocommercebot requested review from a team, albarin, alexflorisca and kmanijak and removed request for a team November 25, 2024 20:51

Manussakis and others added 6 commits November 25, 2024 17:52

Add changelog file

ddf589c

Fix tab focus style on TT1 theme

daf7411

Bump tabs template version

5669a80

Merge branch 'trunk' into fix/51924

ac56b03

Prevent keyup events from being triggered on the flexslider when the …

b99ffdc

…focus is on the stars or tabs.

Update test to match the new tab role

a7bf710

Manussakis requested a review from dkotter November 27, 2024 02:13

kmanijak reviewed Nov 27, 2024

View reviewed changes

Fix slider when clicking on the thumbnail with focus on tab or stars

e8cf616

dkotter approved these changes Nov 27, 2024

View reviewed changes

dkotter assigned Manussakis Nov 27, 2024

Manussakis marked this pull request as ready for review November 29, 2024 14:29

Manussakis changed the title ~~[WIP][Accessible] Make tabs on product page accessible~~ [Accessible] Make tabs on product page accessible Nov 29, 2024

Merge branch 'trunk' into fix/51924

93162b8

kmanijak reviewed Dec 2, 2024

View reviewed changes

kmanijak approved these changes Dec 2, 2024

View reviewed changes

kmanijak merged commit 3765a66 into woocommerce:trunk Dec 2, 2024
38 of 41 checks passed

github-actions bot added this to the 9.6.0 milestone Dec 2, 2024

github-actions bot added the needs: analysis Indicates if the PR requires a PR testing scrub session. label Dec 2, 2024

Stojdza added status: analysis complete Indicates if a PR has been analysed by Solaris and removed needs: analysis Indicates if the PR requires a PR testing scrub session. labels Dec 3, 2024

louwie17 mentioned this pull request Dec 19, 2024

[Accessibility] Make the rating stars accessible #53018

Merged

12 tasks

louwie17 mentioned this pull request Dec 19, 2024

Fix flexslider product page js error #53877

Merged

12 tasks

louwie17 mentioned this pull request Dec 19, 2024

[CFE]: Fix JS error when using keyboard arrows/tabs on product page with no images or a single image #53878

Closed

9 tasks

gigitux mentioned this pull request Mar 4, 2025

Woocommerce 9.7.0 product TAB's accessibility issue #55980

Closed

5 tasks

Manussakis mentioned this pull request Mar 5, 2025

[Accessibility] Make tab elements as direct children of tablist in product page #56119

Merged

12 tasks

This was referenced Apr 17, 2025

Fix mobile unresponsiveness of product gallery after ‘Reviews’ tab click #57373

Merged

[HC] [Enhancement]: "Interactive controls must not be nested" on product tabs (Accessibility enhancement) #51333

Closed

[Accessible] Make tabs on product page accessible #53158

[Accessible] Make tabs on product page accessible #53158

Uh oh!

Conversation

Manussakis commented Nov 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Submission Review Guidelines:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Changelog entry

Significance

Type

Message

Comment

Uh oh!

github-actions bot commented Nov 25, 2024

Uh oh!

Manussakis commented Nov 27, 2024

Uh oh!

kmanijak left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Manussakis commented Nov 27, 2024

Uh oh!

dkotter left a comment

Choose a reason for hiding this comment

Uh oh!

qasumitbagthariya commented Nov 28, 2024

QA/Test Report ✅

Uh oh!

Manussakis commented Nov 29, 2024

Uh oh!

kmanijak left a comment

Choose a reason for hiding this comment

Uh oh!

kmanijak Dec 2, 2024

Choose a reason for hiding this comment

Uh oh!

Manussakis Dec 2, 2024

Choose a reason for hiding this comment

Uh oh!

gigitux Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

gigitux Apr 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Manussakis Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

kmanijak left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

louwie17 commented Dec 19, 2024

Uh oh!

louwie17 commented Dec 19, 2024

Uh oh!

gigitux commented Mar 4, 2025

Uh oh!

Uh oh!

Manussakis commented Nov 25, 2024 •

edited

Loading

kmanijak left a comment •

edited

Loading

gigitux Apr 17, 2025 •

edited

Loading